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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
/* ==========================================================
  1. ヘッダー背景色をディープネイビー（#102A43）に強制固定
========================================================== */
#header,
.header-container,
.logo-header,
.logo-capsule,
.site-header {
  background-color: #102A43 !important;
  background: #102A43 !important;
}



/* スマホ表示時（画面幅480px以下）のロゴサイズ微調整 */
@media (max-width: 480px) {
  #header .site-name a,
  #header .site-name a span,
  .site-name-text a {
    font-size: 20px !important;       /* スマホ画面に合わせて文字を縮小 */
    letter-spacing: 0.1em !important;
  }
}

/* ==========================================================
  3. H2見出し：記事の大きな区切り
========================================================== */
.article h2, .entry-content h2 {
  background-color: #F0F4F8 !important; /* ソフト・スレートブルー（薄いグレーネイビー） */
  color: #102A43 !important;            /* ディープ-・サファイアネイビー */
  padding: 15px 20px !important;
  border-left: 6px solid #102A43 !important; /* 左側に太いネイビーのアクセント線 */
  border-bottom: none !important;        /* デフォルトの下線を消去 */
  border-radius: 0 6px 6px 0;            /* 右側だけ少し角を丸くして上品に */
  font-size: 20px !important;
  font-weight: bold !important;
  margin: 40px 0 20px 0 !important;
  letter-spacing: 0.5px;
}

/* ==========================================================
  4. H3見出し：H2の中の小見出し
========================================================== */
.article h3, .entry-content h3 {
  color: #102A43 !important;            /* ディープ-・サファイアネイビー */
  border-bottom: 2px solid #102A43 !important; /* 下側にシャープなネイビーの線を引く */
  padding: 8px 0 !important;
  font-size: 17px !important;
  font-weight: bold !important;
  margin: 30px 0 15px 0 !important;
  background: none !important;           /* 背景は透明にしてすっきりと */
}

/* ==========================================================
  固定ページの日付消す
========================================================== */
.page .date-tags {
display: none;
}
/* ==========================================================
  6. キャッチフレーズ（日本語解説文）の文字色を上品な薄グレーに強制上書き
========================================================== */
#header .site-description,
.site-description,
.tagline,
.site-description-text {
  color: #D9E2EC !important;       /* 💡 信頼パレットの上品な薄グレー */
  display: block !important;
  visibility: visible !important;
  font-weight: bold !important;
  font-size: 11px !important;       /* 文字を小さくして知的な印象を強調 */
  letter-spacing: 0.12em !important; /* 文字間隔を広げて高級感を演出 */
  margin-top: 6px !important;       /* メインロゴ（英語）との隙間を程よく調整 */
  line-height: 1.4 !important;
  opacity: 1 !important;
}

/* 📱 スマホ表示時（画面幅480px以下）のサイズ微調整 */
@media (max-width: 480px) {
  #header .site-description,
  .site-description,
  .site-description-text {
    font-size: 10px !important;     /* スマホ画面に合わせてさらに文字を縮小 */
    letter-spacing: 0.08em !important;
    line-height: 1.3 !important;
  }
}

/* ==========================================================
  信頼感全振り：サイト全体（body）のフォント最適化
========================================================== */
body, 
.entry-content, 
.article {
  /* 💡 Mac、iPhone、Windowsのすべてで最高品質のシステムゴシック体が自動選択される黄金比率の指定 */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "BIZ UDPGothic", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif !important;
  
  /* 💡 文字の読みやすさ（可読性）を最大化するフロントエンド調整 */
  line-height: 1.85 !important;    /* 行と行の間を少し広めにして、長文でも目が疲れないように調整 */
  letter-spacing: 0.05em !important; /* 文字間隔をわずかに広げて知的な高級感を演出 */
  color: #212529 !important;        /* 真っ黒（#000）ではなく、目に優しい高級感のある「墨黒」を指定 */
  
  /* 💡 画面上の文字の輪郭をシャープに美しく見せるMac/iOS向けの処理 */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}



/* ==========================================================
  💡 フロントページ：新着記事一覧（ミニマル横型：画像比率アップ版）
========================================================== */

/* 【カード外枠】スマートな下線のみで区切る洗練されたスタイル */
.home .widget-entry-card.e-card {
  display: flex !important;            /* 画像とテキストを横並びに */
  align-items: flex-start !important;  /* テキストが長くなっても画像の上端を固定 */
  background-color: transparent !important; /* 背景を透明にしてサイトに同化 */
  border: none !important;             /* 枠線を完全消去 */
  border-bottom: 1px solid #E4E9F0 !important; /* 下側にだけ上品な境界線を敷く */
  border-radius: 0 !important;         /* 丸みをなくしてソリッドに */
  box-shadow: none !important;         /* 影を消してフラットで知的な印象へ */
  margin: 0 0 20px 0 !important;
  padding: 0 0 20px 0 !important;       /* 下線との間の余白 */
  width: 100% !important;
  box-sizing: border-box !important;
}

/* マウスホバー時の心地よい透過エフェクト */
.home .widget-entry-card.e-card:hover img {
  opacity: 0.85 !important;
}

/* 🚀 【左側：画像エリア】表示比率を「36%」へ引き上げ、存在感を大幅アップ */
.home .widget-entry-card-thumb.card-thumb {
  flex: 0 0 36% !important;            /* 💡 画像の横幅を全体の「36%」に拡大 */
  width: 36% !important;
  max-width: 165px !important;         /* 💡 比率アップに合わせて、PCでの拡大上限を165pxに最適化 */
  float: none !important;              /* 回り込みバグの完全防止 */
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 4px !important;       /* 画像の角をほんのり丸める */
  overflow: hidden !important;
}

/* 画像自体の縦横比（1.91 : 1）を完全に維持させ、文字の歪みを絶対防御 */
.home .widget-entry-card-thumb.card-thumb img {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1.91 / 1 !important;    /* 黄金比率を1pxの狂いもなく維持 */
  object-fit: cover !important;        /* 領域に合わせて綺麗にトリミング */
  display: block !important;
}

/* 🚀 【右側：テキストエリア】画像を大きくした分、隙間を絶妙に調整 */
.home .widget-entry-card-content.card-content {
  flex: 1 !important;
  /* 💡 修正ポイント：画像が大きくなった分、文字との間隔を「15px」のジャストサイズに微調整 */
  margin: 0 0 0 15px !important;       
  padding: 0 !important;               /* 余計なシステムパディングを一掃 */
  float: none !important;
  box-sizing: border-box !important;
}

/* 記事タイトルをディープネイビーにし、フォントサイズを最適化 */
.home .widget-entry-card-title.card-title {
  color: #102A43 !important;            /* 信頼パレット：ディープ・サファイアネイビー */
  font-size: 15px !important;           /* ニュースとして極めて視認性の高いサイズ */
  font-weight: bold !important;
  line-height: 1.45 !important;         /* 行間を広げてタイトルの読みやすさを最大化 */
  margin: 0 !important;
  padding: 0 !important;
}

/* 日付エリアの配置調整 */
.home .widget-entry-card-meta.card-meta {
  margin: 0 0 6px 0 !important;        /* タイトルの上に6pxの隙間を作る */
}
.home .widget-entry-card-date.display-none,
.home .new-entry-card-post-date {
  display: block !important;           /* 非表示バグを解除して日付を露出 */
  font-size: 11px !important;
  color: #627D98 !important;           /* 上品なスレートグレー */
  font-family: sans-serif !important;
}

/* 📱 スマホ表示時（画面幅480px以下）の最終微調整 */
@media (max-width: 480px) {
  .home .widget-entry-card.e-card {
    padding: 0 0 14px 0 !important;     /* スマホ画面に合わせてカードを薄型化 */
    margin-bottom: 14px !important;
  }
  .home .widget-entry-card-thumb.card-thumb {
    /* 💡 スマホ画面でもアイキャッチ内の文字がはっきり読めるよう「34%」の広さを確保 */
    flex: 0 0 34% !important;          
    width: 34% !important;
  }
  .home .widget-entry-card-content.card-content {
    margin: 0 0 0 12px !important;     /* スマホ用に隙間を12pxにタイト調整 */
  }
  .home .widget-entry-card-title.card-title {
    font-size: 13px !important;         /* スマホでもタイトルが2〜3行でスマートに収まるサイズ */
    line-height: 1.35 !important;
  }
}




.review-summary-box-secretlab h1.review-main-title { margin: 0 0 12px 0 !important; font-size: 24px !important; color: #102A43 !important; font-weight: bold !important; line-height: 1.3 !important; border: none !important; background: none !important; padding: 0 !important; text-align: left !important; }
.catchphrase { font-weight: bold; color: #E15B00; font-size: 16px; margin: 0 0 10px 0; }
.description { margin: 0; font-size: 14px; color: #555; }
.review-page-container h2 { font-size: 19px !important; color: #102A43 !important; border-bottom: 2px solid #D9E2EC !important; padding-bottom: 6px !important; margin: 45px 0 15px 0 !important; font-weight: bold !important; background: none !important; border-left: none !important; }
.box-good h2.box-label, .box-bad h2.box-label { font-size: 15px !important; color: #212529 !important; font-weight: bold !important; margin: 0 0 12px 0 !important; padding: 0 !important; border: none !important; background: none !important; text-align: left !important; }
.review-section-block { margin-bottom: 20px; }
.box-good, .box-bad { width: 100%; padding: 20px; border-radius: 8px; box-sizing: border-box; }
.box-good { background: #e8f5e9; border: 1px solid #c8e6c9; }
.box-bad { background: #ffebee; border: 1px solid #ffcdd2; }
.box-good ul, .box-bad ul { margin: 0; padding-left: 20px; font-size: 14px; }
.box-good li, .box-bad li { margin-bottom: 8px; }
.box-good li:last-child, .box-bad li:last-child { margin-bottom: 0; }
.price-compare-section { margin-bottom: 35px; }
.price-table { border: 1px solid #D9E2EC; border-radius: 8px; overflow: hidden; }
.price-row-item { display: flex; align-items: center; justify-content: space-between; padding: 15px 20px; border-bottom: 1px solid #eee; background: #fff; }
.price-row-item:last-child { border-bottom: none; }
.shop-name { font-weight: bold; font-size: 14px; width: 150px; }
.shop-name.amazon { color: #ff9900; }
.shop-name.rakuten { color: #bf0000; }
.shop-name.yahoo { color: #ff0033; }
.price-value { font-size: 18px; font-weight: bold; color: #d32f2f; flex: 1; text-align: left; padding-left: 20px; }
.price-value small { font-size: 11px; color: #627D98; font-weight: normal; }
.shop-btn { display: inline-block; color: #fff !important; text-decoration: none !important; padding: 8px 18px; font-size: 13px; font-weight: bold; border-radius: 4px; transition: all 0.2s ease; }
.btn-amazon { background: #ff9900; box-shadow: 0 2px 4px rgba(255,153,0,0.3); }
.btn-amazon:hover { background: #df8600; transform: translateY(-1px); }
.btn-rakuten { background: #bf0000; box-shadow: 0 2px 4px rgba(191,0,0,0.3); }
.btn-rakuten:hover { background: #9e0000; transform: translateY(-1px); }
.btn-yahoo { background: #ff0033; box-shadow: 0 2px 4px rgba(255,0,51,0.3); }
.btn-yahoo:hover { background: #cc0029; transform: translateY(-1px); }
.vertical-spec-card-secretlab { border: 1px solid #D9E2EC; border-radius: 6px; overflow: hidden; width: 100%; }
.spec-item { display: flex !important; border-bottom: 1px solid #eee; font-size: 13px; width: 100%; box-sizing: border-box; }
.spec-item:last-child { border-bottom: none; }
.spec-item .lbl { width: 130px !important; min-width: 130px !important; flex-basis: 130px !important; flex-shrink: 0 !important; background: #F0F4F8; padding: 12px 10px; font-weight: bold; border-right: 1px solid #eee; color: #102A43; box-sizing: border-box; }
.spec-item .val { flex: 1 !important; padding: 12px 12px; color: #212529; box-sizing: border-box; }
@media (max-width: 600px) {
  .price-row-item { flex-direction: column; gap: 10px; text-align: center; padding: 15px; }
  .price-value { text-align: center; padding-left: 0; }
  .shop-btn { width: 100%; text-align: center; }
  .spec-item .lbl { width: 110px !important; min-width: 110px !important; flex-basis: 110px !important; padding: 10px 8px; }
  .spec-item .val { padding: 10px 8px; }
}