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

/************************************
** 子テーマ用のスタイルを書く
************************************/

/* =============================================
   AI人事部長 カスタムデザイン
   ============================================= */

/* ボディ背景（水玉ドット） */
body {
  background-color: #EBF5FF;
  background-image:
    radial-gradient(circle, #64B5F6 1.5px, transparent 1.5px),
    radial-gradient(circle, #90CAF9 1.5px, transparent 1.5px);
  background-size: 28px 28px, 56px 56px;
  background-position: 0 0, 14px 14px;
  background-attachment: fixed;
}

/* メインコンテンツ背景 */
#main, .site-content, .content-area, .wrap,
article.post, .entry-content, .post-contents {
  background-color: rgba(255, 255, 255, 0.93);
  border-radius: 8px;
}

/* サイドバー背景 */
#sidebar, .sidebar, .widget {
  background-color: rgba(255, 255, 255, 0.90);
  border-radius: 8px;
}

/* ヘッダー */
#header, .site-header {
  background: linear-gradient(135deg, #1565C0 0%, #1976D2 50%, #42A5F5 100%);
}

/* =============================================
   ヒーローエリア
   ============================================= */
.ai-hero {
  background: linear-gradient(135deg, #FFF8E7 0%, #EAF4FD 55%, #E1F0FB 100%);
  border: 1px solid rgba(179, 212, 245, 0.7);
  border-radius: 20px;
  padding: 48px 40px;
  margin-bottom: 32px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 28px rgba(66, 133, 244, 0.12);
}
.ai-hero::before {
  content: '';
  position: absolute;
  top: -60px;
  right: -60px;
  width: 280px;
  height: 280px;
  background: rgba(33,150,243,0.07);
  border-radius: 50%;
}
.ai-hero::after {
  content: '';
  position: absolute;
  bottom: -80px;
  right: 80px;
  width: 200px;
  height: 200px;
  background: rgba(255,64,129,0.06);
  border-radius: 50%;
}
.ai-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 700px;
}
.ai-hero__badge {
  display: inline-block;
  background: #ffffff;
  color: #1565C0;
  font-size: 0.82em;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 5px 14px;
  border-radius: 20px;
  border: 1px solid rgba(21,101,192,0.25);
  margin-bottom: 16px;
  box-shadow: 0 2px 6px rgba(21,101,192,0.08);
}
.ai-hero__title {
  color: #2C3A47 !important;
  font-size: 2em !important;
  font-weight: 900 !important;
  line-height: 1.3 !important;
  margin: 0 0 16px !important;
  text-shadow: none !important;
  border: none !important;
  padding: 0 !important;
}
.ai-hero__title span {
  color: #E91E63;
  background: linear-gradient(transparent 62%, rgba(233,30,99,0.18) 0%);
}
.ai-hero__desc {
  color: #45525C !important;
  font-size: 0.95em !important;
  line-height: 1.75 !important;
  margin: 0 0 28px !important;
}
.ai-hero__desc strong {
  color: #E65100;
  font-weight: 700;
}
.ai-hero__cats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.ai-hero__cat-btn {
  display: inline-block;
  padding: 9px 18px;
  border-radius: 50px;
  font-size: 0.85em;
  font-weight: 700;
  text-decoration: none !important;
  transition: all 0.25s ease;
  border: 2px solid transparent;
}
.ai-hero__cat-btn--1 {
  background: #E3F2FD;
  color: #1565C0 !important;
  border-color: rgba(21,101,192,0.25);
}
.ai-hero__cat-btn--2 {
  background: #FFF8DE;
  color: #B8860B !important;
  border-color: rgba(184,134,11,0.3);
}
.ai-hero__cat-btn--3 {
  background: #E6F7EC;
  color: #2E7D32 !important;
  border-color: rgba(46,125,50,0.25);
}
.ai-hero__cat-btn--4 {
  background: #FCE4EC;
  color: #C2185B !important;
  border-color: rgba(194,24,91,0.25);
}
.ai-hero__cat-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

/* =============================================
   縦型カード2列 スタイリング強化
   ============================================= */
.card-wrap,
.entry-card-wrap {
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
  border-radius: 12px !important;
  overflow: hidden;
}
.card-wrap:hover,
.entry-card-wrap:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 8px 24px rgba(21, 101, 192, 0.18) !important;
}
.card-thumb img,
.entry-card-thumb img {
  transition: transform 0.35s ease !important;
}
.card-wrap:hover .card-thumb img,
.entry-card-wrap:hover .entry-card-thumb img {
  transform: scale(1.04) !important;
}
.card-title,
.entry-card-title {
  color: #1565C0 !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
}
.card-cat-label,
.entry-card-cat-label {
  background: linear-gradient(135deg, #1976D2, #42A5F5) !important;
  border-radius: 4px !important;
  font-weight: 700 !important;
}
.card-snippet,
.entry-card-snippet {
  color: #546E7A !important;
  font-size: 0.82em !important;
  line-height: 1.65 !important;
}
.a-wrap.card-wrap,
.a-wrap.entry-card-wrap {
  background: #fff;
  border: 1px solid rgba(21, 101, 192, 0.08);
  box-shadow: 0 2px 8px rgba(21, 101, 192, 0.08);
}

/* インデックスリストトップのウィジェット余白除去 */
.index-top-widgets .widget {
  background: none !important;
  padding: 0 !important;
  margin-bottom: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
@media screen and (max-width: 768px) {
  .ai-hero {
    padding: 32px 20px;
  }
  .ai-hero__title {
    font-size: 1.5em !important;
  }
  .ai-hero__cat-btn {
    font-size: 0.8em;
    padding: 7px 14px;
  }
}

/*1023px以下*/
@media screen and (max-width: 1023px){
}

/*834px以下*/
@media screen and (max-width: 834px){
}

/*480px以下*/
@media screen and (max-width: 480px){
}

/* SECTION additions */
.ai-section { margin: 0 0 40px; }
.ai-section__head { margin-bottom: 20px; }
.ai-section__eyebrow { display: inline-block; font-size: 0.78em; font-weight: 700; color: #1565C0; background: #E3F2FD; padding: 4px 12px; border-radius: 20px; margin-bottom: 8px; }
.ai-section__title { font-size: 1.4em !important; font-weight: 900 !important; color: #2C3A47 !important; margin: 0 !important; border: none !important; padding: 0 !important; }
.ai-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.ai-tool-card, .ai-worry-card { display: block; background: #fff; border: 1px solid rgba(21,101,192,0.10); border-radius: 14px; padding: 20px; text-decoration: none !important; box-shadow: 0 2px 8px rgba(21,101,192,0.06); transition: transform 0.25s ease, box-shadow 0.25s ease; }
.ai-tool-card:hover, .ai-worry-card:hover { transform: translateY(-4px); box-shadow: 0 10px 24px rgba(21,101,192,0.15); }
.ai-tool-card__name { font-size: 1.05em; font-weight: 800; color: #1565C0 !important; margin-bottom: 6px; }
.ai-tool-card__desc, .ai-worry-card__desc { font-size: 0.85em; color: #546E7A !important; line-height: 1.6; margin-bottom: 10px; }
.ai-tool-card__link, .ai-worry-card__link { font-size: 0.82em; font-weight: 700; color: #E91E63 !important; }
.ai-worry-card__q { font-size: 0.95em; font-weight: 700; color: #2C3A47 !important; margin-bottom: 8px; }
.ai-worry-card__q::before { content: "🙋 "; }
.ai-cat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.ai-cat-card { display: block; padding: 18px 20px; border-radius: 12px; text-decoration: none !important; font-weight: 700; color: #1565C0 !important; background: linear-gradient(135deg, #E3F2FD, #ffffff); border: 1px solid rgba(21,101,192,0.15); transition: transform 0.2s ease; }
.ai-cat-card:hover { transform: translateY(-3px); }
.ai-cat-card__desc { display: block; font-size: 0.78em; font-weight: 400; color: #546E7A; margin-top: 4px; }
.ai-jissen-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.ai-jissen-card { display: block; background: #fff; border-radius: 14px; border: 1px solid rgba(230,81,0,0.15); padding: 20px; text-decoration: none !important; box-shadow: 0 2px 8px rgba(230,81,0,0.06); transition: transform 0.25s ease; }
.ai-jissen-card:hover { transform: translateY(-4px); }
.ai-jissen-card__badge { display: inline-block; font-size: 0.72em; font-weight: 700; color: #E65100 !important; background: #FFF3E0; padding: 3px 10px; border-radius: 20px; margin-bottom: 8px; }
.ai-jissen-card__title { font-size: 0.98em; font-weight: 700; color: #2C3A47 !important; line-height: 1.5; }
.ai-profile-box { display: flex; gap: 20px; align-items: flex-start; background: #fff; border-radius: 16px; padding: 28px; border: 1px solid rgba(21,101,192,0.10); flex-wrap: wrap; }
.ai-profile-box__body { flex: 1; min-width: 240px; }
.ai-profile-box__name { font-weight: 800; color: #1565C0 !important; margin-bottom: 8px; }
.ai-profile-box__desc { font-size: 0.9em; color: #45525C; line-height: 1.75; margin-bottom: 12px; }
.ai-profile-box__link { font-weight: 700; color: #E91E63 !important; font-size: 0.88em; }
@media screen and (max-width: 480px) { .ai-grid, .ai-cat-grid, .ai-jissen-grid { grid-template-columns: 1fr; } }


/* トップページ用ヒーローバナーは、フロントページ以外では非表示にする */
body:not(.front-top-page) .front-hero-banner {
  display: none !important;
}