@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. フォントの読み込み（必ず一番上に書く） */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=JetBrains+Mono:wght@400;500&family=Noto+Sans+JP:wght@400;500;700&display=swap');

/* ====================================
   信頼感のあるテック系デザイン (Pattern A)
   for Cocoon Child
   ==================================== */

:root {
  /* 配色パレット: インテリジェンス・ブルー */
  --tech-base:   #F8FAFC;  /* 背景色 */
  --tech-main:   #1E293B;  /* 文字色 */
  --tech-accent: #3B82F6;  /* アクセント色 */
  --tech-code-bg:#1E293B;  /* コード背景 */
  
  /* フォント設定 */
  --tech-font-body: 'Inter', 'Noto Sans JP', sans-serif;
  --tech-font-code: 'JetBrains Mono', 'Inter', 'Noto Sans JP', monospace;
}

/* --- 全体のベース設定 --- */
body {
  background-color: var(--tech-base) !important;
  color: var(--tech-main);
  font-family: var(--tech-font-body);
  line-height: 1.8;
  letter-spacing: 0.03em;
  -webkit-font-smoothing: antialiased;
}

/* --- 以下、先ほどと同じCSSコード --- */
.main {
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 
              0 2px 4px -1px rgba(0, 0, 0, 0.03);
  padding: 40px;
  margin-top: 20px;
}

.entry-title {
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--tech-main);
  margin-bottom: 1rem;
}

.article-body h2 {
  background: none;
  border: none;
  position: relative;
  font-size: 1.75rem;
  font-weight: 700;
  margin-top: 3.5rem;
  margin-bottom: 1.5rem;
  padding: 0.5rem 0 0.5rem 1rem;
  border-left: 5px solid var(--tech-accent);
  color: var(--tech-main);
  line-height: 1.4;
}

.article-body h3 {
  border: none;
  border-bottom: 2px solid #E2E8F0;
  padding: 0.5rem 0;
  margin-top: 2.5rem;
  font-size: 1.4rem;
  font-weight: 600;
}

a, .entry-content a {
  color: var(--tech-accent);
  text-decoration: none;
  font-weight: 600;
}
.entry-content a:hover {
  text-decoration: underline;
  opacity: 0.8;
}

.entry-content pre {
  background-color: var(--tech-code-bg);
  color: #E2E8F0;
  padding: 1.5rem;
  border-radius: 8px;
  font-family: var(--tech-font-code);
  font-size: 0.9rem;
  line-height: 1.6;
  border: 1px solid rgba(255,255,255,0.1);
}

.entry-content code {
  font-family: var(--tech-font-code);
}

.entry-content p code, 
.entry-content li code {
  background-color: #F1F5F9;
  color: #BE185D;
  padding: 0.2em 0.5em;
  border-radius: 4px;
  margin: 0 3px;
  border: 1px solid #E2E8F0;
  font-size: 0.9em;
}

@media screen and (max-width: 768px) {
  .main {
    padding: 20px 15px;
  }
  .entry-title {
    font-size: 1.6rem;
  }
}

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

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

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

/* ====================================
   Cocoon標準ハイライト (Highlight.js) カスタマイズ
   ==================================== */

/* コードブロックの背景色をテーマの「ダークネイビー」に統一 */
.entry-content pre,
.entry-content pre code {
  font-family: var(--tech-font-code) !important; /* JetBrains Monoを強制 */
  font-size: 0.9rem;
  line-height: 1.6;
}

/* Cocoon標準のpreタグのデザイン上書き */
.entry-content pre {
  background-color: var(--tech-code-bg) !important; /* 背景色 #1E293B */
  border: 1px solid rgba(255, 255, 255, 0.1);       /* 薄い枠線 */
  border-radius: 8px;                               /* 角丸 */
  padding: 1.5rem;                                  /* 内側の余白 */
  color: #E2E8F0;                                   /* デフォルトの文字色 */
}

/* 記述言語のラベル（右上の「HTML」など）のデザイン */
.code-title {
  background-color: var(--tech-accent) !important; /* アクセントカラー(青) */
  color: #fff !important;
  border-radius: 0 0 0 4px;
}

/* ====================================
   ヘッダーデザインのカスタマイズ (Tech Magazine Style)
   ==================================== */

/* 1. ヘッダー全体の背景を「知的なダークグラデーション」にする */
.header {
  /* メインカラーから少し明るい色へのグラデーション */
  background: linear-gradient(135deg, var(--tech-main) 0%, #2D3748 100%) !important;
  color: #ffffff !important; /* 文字色を白に強制 */
  border-bottom: 5px solid var(--tech-accent); /* 下部にアクセントカラーのライン */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); /* 影をつけて立体感を出す */
}

/* 2. サイトタイトル (ブログ名) のデザイン */
.site-name-text {
  font-family: 'Inter', sans-serif !important; /* 英字フォントを優先してかっこよく */
  font-weight: 800;        /* かなり太く */
  font-size: 2.4rem;       /* 文字を大きく */
  letter-spacing: 0.05em;  /* 文字間隔を少し広げて読みやすく */
  color: #ffffff !important;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.3); /* 文字に影をつけて浮き立たせる */
}

/* 3. キャッチフレーズ (タイトルの下の説明文) */
.site-description-text {
  color: rgba(255, 255, 255, 0.85) !important; /* 白の不透明度を下げて少し控えめに */
  font-size: 0.9rem;
  font-weight: 500;
  margin-top: 5px;
}

/* 4. ヘッダー内のリンク色を調整 */
.header a {
  color: #ffffff !important;
  text-decoration: none;
}

/* 5. モバイル表示の微調整 */
@media screen and (max-width: 768px) {
  .site-name-text {
    font-size: 1.8rem; /* スマホでは少し小さく */
  }
}

/* --- ロゴ画像のサイズ調整 --- */
.logo-header img {
  max-height: 60px; /* ←この数字を変えて高さを調整してください（例: 50px～80px） */
  width: auto;      /* 横幅は自動で変わります */
}

/* スマホでの表示サイズ調整 */
@media screen and (max-width: 768px) {
  .logo-header img {
    max-height: 45px; /* スマホでは少し小さめに */
  }
}

/* ====================================
   プランB：ロゴアイコン表示（パディング方式）
   ==================================== */

.site-name-text {
  display: inline-block;       /* ブロック要素にして高さを持たせる */
  position: relative;          /* 位置調整の基準点 */
  
  /* 画像の設定 */
  /* ↓ 必ずブラウザで開いて確認できた「正しいURL」を入れてください */
  background-image: url('https://yougears-lab.com/blog/wp-content/uploads/2025/12/rogo.png');
  
  background-repeat: no-repeat;
  background-size: 40px 40px;  /* 画像の大きさ（縦横） */
  background-position: left center; /* 左側の中心に配置 */
  
  /* 画像を表示するためのスペース確保 */
  padding-left: 55px;          /* 画像サイズ40px ＋ 隙間15px */
  
  /* 高さの調整（画像が切れる場合はここを増やす） */
  min-height: 40px;
  line-height: 40px;           /* 文字の垂直位置を真ん中に */
}

/* スマホでの微調整 */
@media screen and (max-width: 768px) {
  .site-name-text {
    background-size: 30px 30px; /* スマホではアイコンを小さく */
    padding-left: 40px;         /* 隙間も狭く */
    min-height: 30px;
    line-height: 30px;
  }
}

/* ====================================
   グローバルナビ (メニューバー) のデザイン
   ==================================== */

/* 1. メニューバー全体の背景を「ダークネイビー」に */
.navi-bg {
  background-color: var(--tech-main) !important; /* #1E293B */
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); /* 下に影を落として立体的に */
  border-bottom: 2px solid rgba(255, 255, 255, 0.05); /* 微妙な境界線 */
}

/* 2. メニュー項目の文字設定 */
#navi .navi-in a {
  color: #ffffff !important;   /* 文字色は白 */
  font-family: var(--tech-font-body);
  font-weight: 600;            /* 太字で視認性アップ */
  font-size: 0.95rem;          /* 少し小さめにしてスマートに */
  letter-spacing: 0.05em;      /* 文字間隔を広げる */
  transition: all 0.2s ease;   /* 動きを滑らかに */
  padding-top: 1.2em;          /* 上下の余白を確保 */
  padding-bottom: 1.2em;
  text-decoration: none;
}

/* 3. マウスを乗せた時 (ホバー時) の動き */
#navi .navi-in a:hover {
  background-color: rgba(255, 255, 255, 0.05);   /* 背景をごく薄く明るく */
  color: var(--tech-accent) !important;          /* 文字をテックブルー(#3B82F6)に */
  box-shadow: inset 0 -3px 0 var(--tech-accent); /* 下に青いラインを光らせる */
}

/* 4. サブメニュー（ドロップダウン）がある場合の背景色 */
.sub-menu {
  background-color: var(--tech-main) !important;
}

/* 5. スマホ用メニューボタン（ハンバーガー）の色調整 */
/* ヘッダー背景が暗い場合に見えなくなるのを防ぐため白に設定 */
.mobile-menu-buttons, .mobile-menu-buttons .menu-caption {
  color: #ffffff !important; 
}

/* ====================================
   ホーム画面：記事カードのデザイン (Tech Magazine Style)
   ==================================== */

/* 1. カード全体をシャープにして影をつける */
.entry-card-wrap {
  background-color: #ffffff;
  border-radius: 8px; /* 角丸を少し小さくしてスマートに */
  box-shadow: 0 2px 4px rgba(0,0,0,0.05); /* 薄い影 */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* アニメーション */
  border: 1px solid rgba(0,0,0,0.03); /* 極薄の枠線 */
  overflow: hidden;
  margin-bottom: 20px; /* カード下の余白 */
}

/* 2. マウスを乗せた時に「フワッ」と浮き上がる演出 */
.a-wrap:hover .entry-card-wrap {
  transform: translateY(-5px); /* 上に5px浮く */
  box-shadow: 0 12px 20px -5px rgba(0, 0, 0, 0.15); /* 影を濃くして立体感を出す */
}

/* 3. 記事タイトルのデザイン */
.entry-card-title {
  font-weight: 700;
  font-size: 1.1rem;
  line-height: 1.5;
  margin-bottom: 0.5rem;
  color: var(--tech-main);
}

/* 4. 記事抜粋（説明文）の文字サイズ調整 */
.entry-card-snippet {
  font-size: 0.85rem;
  color: #64748B; /* 少し薄いグレー */
  line-height: 1.6;
}

/* 5. 日付ラベルのデザイン */
.entry-card-date {
  font-family: 'Inter', sans-serif;
  font-size: 0.8rem;
  color: #94A3B8;
}

/* 6. 「新着記事」などのセクション見出しデザイン */
.list-title-in {
  display: inline-block;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--tech-main);
  border-bottom: 4px solid var(--tech-accent); /* 青い下線 */
  padding-bottom: 5px;
  margin-bottom: 20px;
}

/* 7. アピールエリア（メインビジュアル）の調整 */
.appeal-area {
  background-color: var(--tech-main); /* 画像読み込み前の背景色 */
}
.appeal-title {
  font-weight: 800;
  letter-spacing: 0.05em;
  text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}
.appeal-message {
  font-weight: 500;
  opacity: 0.9;
}

/* ====================================
   ヘッダーとアピールエリアの隙間を調整
   ==================================== */

/* トップページ（フロントページ）のみ適用 */
.home #content {
  margin-top: 0 !important; /* 上部の余白をゼロにする */
}

/* もしアピールエリア自体の上下にも余白がある場合は以下も追加 */
.appeal-area {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* メインコンテンツエリアの上部余白も調整（念のため） */
.home .main {
  margin-top: 0 !important;
  padding-top: 20px; /* カードと画像の間に少しだけ隙間を空ける */
}

/* ====================================
   メニューバーの文字色修正 (強制適用)
   ==================================== */

/* 1. 背景色を確実に「ダークネイビー」にする */
/* (念のためIDとクラス両方で指定して優先度を上げます) */
#navi, .navi-bg {
  background-color: #1E293B !important; /* メインカラー */
  border-bottom: 1px solid rgba(255,255,255,0.1); /* 薄い区切り線 */
}

/* 2. メニューの文字色を「白」にする */
#navi .navi-in > ul > li > a {
  color: #ffffff !important;   /* ←ここで白に強制統一 */
  font-weight: 600;            /* 太字で見やすく */
  text-decoration: none;
}

/* 3. マウスを乗せた時の色 (テックブルー) */
#navi .navi-in > ul > li > a:hover {
  background-color: rgba(255, 255, 255, 0.05);
  color: #3B82F6 !important;   /* ←ホバー時は青 */
  transition: all 0.3s ease;
}

/* ====================================
   カテゴリラベルの配色 (強制適用)
   ==================================== */

/* 共通設定：文字色を白、太字に */
.cat-label {
  color: #ffffff !important;
  font-weight: 700 !important;
  border: none !important; /* スキンの枠線を消す */
}

/* 1. Power Platform (オレンジ) */
/* ↓ .cat-label-の後の数字を、実際のIDに書き換えてください */
.cat-label-29
 { 
  background-color: #EA580C !important; 
}

/* 2. Power Apps (オレンジ) */
.cat-label-8
 { 
  background-color: #EA580C !important; 
}

/* 3. Power Automate (オレンジ) */
.cat-label-9
 { 
  background-color: #EA580C !important; 
}

/* 4. Power BI (オレンジ) */
.cat-label-10
 { 
  background-color: #EA580C !important; 
}

/* 5. Power Query (オレンジ) */
.cat-label-11
 { 
  background-color: #EA580C !important; 
}

/* 6. Microsoft Azure (ブルー) */
.cat-label-12 { 
  background-color: #0078D4 !important; 
}

/* 7. AI (バイオレット) */
.cat-label-18 { 
  background-color: #8B5CF6 !important; 
}

/* 8. Azure OpenAI (バイオレット) */
.cat-label-13 { 
  background-color: #8B5CF6 !important; 
}

/* 9. Claide (バイオレット) */
.cat-label-14 { 
  background-color: #8B5CF6 !important; 
}

/* 10. Gemini (バイオレット) */
.cat-label-16 { 
  background-color: #8B5CF6 !important; 
}

/* 11. NotebookLM (バイオレット) */
.cat-label-17 { 
  background-color: #8B5CF6 !important; 
}

/* 12. Google Workspace (イエロー) */
.cat-label-15 { 
  background-color: #EAB308 !important; 
}

/* 13. 雑記 (ローズ) */
.cat-label-7 { 
  background-color: #E11D48 !important; 
}

/* ====================================
   記事内の見出しデザイン (強制上書き)
   ==================================== */

/* H2見出し：左にテックブルーの太線 */
.article-body h2 {
  background: none !important;       /* 元の背景色を消す */
  border: none !important;           /* 元の枠線を消す */
  border-left: 6px solid var(--tech-accent) !important; /* 青い左線を強制 */
  padding: 0.4em 0 0.4em 1rem !important; /* 余白調整 */
  margin: 3rem 0 1.5rem 0 !important;     /* 上下の隙間 */
  font-size: 1.6rem;
  color: var(--tech-main);
  line-height: 1.4;
}

/* H3見出し：下線のみのシンプルスタイル */
.article-body h3 {
  background: none !important;
  border: none !important;
  border-bottom: 2px solid #E2E8F0 !important; /* 薄いグレーの下線 */
  padding: 0.5rem 0 !important;
  margin: 2.5rem 0 1rem 0 !important;
  font-size: 1.3rem;
  font-weight: 600;
}

/* H4見出し：控えめな太字 */
.article-body h4 {
  border: none !important;
  font-size: 1.1rem;
  margin: 2rem 0 1rem 0 !important;
  font-weight: 700;
  color: #475569;
}

/* ====================================
   目次 (TOC) のデザインカスタマイズ
   ==================================== */

/* 目次全体の枠組み */
.toc {
  border: 1px solid #E2E8F0 !important; /* 薄いグレーの枠 */
  border-radius: 8px !important;         /* 角丸 */
  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05); /* 軽い影 */
  padding: 0 !important;                 /* 内側の余白リセット */
  overflow: hidden;                      /* はみ出し防止 */
  margin: 2em 0 !important;
  background-color: #fff;
}

/* 目次のタイトル部分 (CONTENTS) */
.toc-title {
  background-color: var(--tech-main) !important; /* ダークネイビー背景 */
  color: #ffffff !important;           /* 白文字 */
  padding: 12px 20px !important;
  font-family: var(--tech-font-code);  /* コード用フォントでテック感 */
  font-weight: 700;
  font-size: 1.1rem;
  display: block;
  letter-spacing: 0.05em;
  text-align: left !important;         /* 左寄せ */
}

/* タイトルのアイコンをfontAwesomeなどで装飾する場合（任意） */
.toc-title::before {
  content: "📑"; /* アイコンの代わりに絵文字を配置 */
  margin-right: 8px;
  font-size: 0.9em;
}

/* 目次の中身（リスト部分） */
.toc-content {
  padding: 20px !important;
  background-color: #ffffff;
}

/* リストの文字デザイン */
.toc ul li a {
  color: #475569 !important;
  text-decoration: none;
  font-weight: 500;
  transition: all 0.2s;
  display: block;
  padding: 4px 0;
}

/* マウスを乗せた時 */
.toc ul li a:hover {
  color: var(--tech-accent) !important; /* 青色に変化 */
  transform: translateX(4px);           /* 右に少し動く */
}

/* 数字のスタイル */
.toc ul li::before {
  color: #94A3B8; /* 数字は薄いグレー */
  font-family: var(--tech-font-code);
}

/* ====================================
   コードコピーボタンのデザイン
   ==================================== */

/* ボタンの配置場所を確保 */
.entry-content pre {
  position: relative; /* これがないとボタンが変な場所に飛びます */
}

/* ボタン本体のデザイン */
.copy-button {
  position: absolute;  /* preタグの中での絶対位置 */
  top: 5px;            /* 上からの距離 */
  right: 5px;          /* 右からの距離 */
  
  background-color: rgba(255, 255, 255, 0.1); /* 背景は半透明 */
  color: #cbd5e1;       /* 文字色（薄いグレー） */
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  
  font-family: var(--tech-font-body);
  font-size: 0.75rem;
  padding: 4px 8px;
  cursor: pointer;
  transition: all 0.2s;
  z-index: 10; /* コードより手前に表示 */
}

/* マウスを乗せた時 */
.copy-button:hover {
  background-color: var(--tech-accent); /* テックブルー */
  color: #fff;
  border-color: var(--tech-accent);
}

/* コピー成功時（Copied!）のデザイン */
.copy-button.copied {
  background-color: #10B981; /* 成功時はグリーン */
  color: #fff;
  border-color: #10B981;
}