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

/* Cocoonの標準タイトルやパンくずを消す */
.page-template-front-page .entry-title,
.page-template-front-page .breadcrumb,
.page-template-front-page .post-meta {
    display: none !important;
}

/* 法律Info 理想デザイン版 CSS */
:root {
    --li-primary: 
#1a2a44; /* 濃いネイビー */
    --li-accent: 
#c0392b;  /* アクセント赤 */
    --li-blue: 
#0056b3;    /* カテゴリ見出し用青 */
    --li-gold: 
#b7950b;
    --li-bg: 
#ffffff;
    --li-bg-gray: 
#f9f9f9;
    --li-text: #333;
    --li-gray: #666;
    --li-border: 
#e0e0e0;
}

.linfo-wrapper.centered-design {
    font-family: 'Noto Sans JP', sans-serif;
    color: var(--li-text);
    background: var(--li-bg);
    line-height: 1.8;
}
.linfo-wrapper a { text-decoration: none; color: inherit; transition: all 0.3s; }
.linfo-wrapper a:hover { opacity: 0.8; }
.linfo-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 40px 20px;
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 40px;
}
.linfo-main-content { flex: 1; }
.linfo-sidebar { width: 320px; }

/* ヘッダー (画像1) */
.linfo-header { background: #fff; border-bottom: 1px solid var(--li-border); padding: 30px 20px; text-align: center; }
.linfo-header-inner { max-width: 1000px; margin: 0 auto; }
.linfo-site-meta { font-size: 12px; color: var(--li-gray); margin-bottom: 10px; }
.linfo-date-badge { display: inline-block; margin-right: 10px; }
.linfo-site-logo { font-size: 36px; margin: 0 0 5px; font-weight: 900; letter-spacing: 1px; }
.linfo-site-logo a { color: var(--li-primary); } .linfo-site-logo span { color: var(--li-accent); }
.linfo-site-desc { font-size: 14px; color: var(--li-gray); margin-bottom: 25px; }
.linfo-main-nav ul {
    margin: 0; padding: 0; list-style: none;
    display: flex; justify-content: center; flex-wrap: wrap; gap: 15px;
}
.linfo-main-nav li a {
    display: flex; align-items: center;
    padding: 8px 16px; background: var(--li-bg-gray); border-radius: 20px;
    font-size: 13px; font-weight: bold; color: var(--li-primary);
}
.linfo-main-nav .icon { margin-right: 6px; font-size: 16px; }

/* ヒーローエリア */
.linfo-hero {
    background: #fdf2f2;
    padding: 40px 20px;
    border-radius: 10px;
    margin-bottom: 30px;
    text-align: center;
}
.linfo-hero-label-accent {
    background: #c62828;
    color: #fff;
    padding: 4px 15px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: bold;
}
.linfo-hero-title { font-size: 24px; margin-top: 15px; line-height: 1.5; }
.marker { background: linear-gradient(transparent 60%, #ffc107 60%); }

/* 共通見出しスタイル (画像2, その他要望: 三角アイコン) */
.section-header-with-icon h3, .panel-header-styled {
    position: relative; padding-left: 20px; font-size: 18px; font-weight: bold;
    color: var(--li-primary); margin-bottom: 15px;
}
.section-header-with-icon h3::before, .panel-header-styled::before {
    content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    width: 0; height: 0;
    border-style: solid; border-width: 6px 0 6px 8px;
    border-color: transparent transparent transparent var(--li-accent); /* 三角の色 */
}

/* サイドバー (画像2) */
.panel-header-styled {
    border-bottom: 2px solid var(--li-border); padding-bottom: 10px; margin-bottom: 20px;
}
.ranking-list.simple .ranking-item {
    display: flex; align-items: baseline; padding: 12px 0;
    border-bottom: 1px solid var(--li-border); font-weight: bold;
}
.rank-num {
    font-size: 20px; color: var(--li-accent); font-weight: 900;
    margin-right: 12px; width: 20px; text-align: center;
}
.rank-title { margin: 0; font-size: 14px; line-height: 1.5; }
/* プロフィール (簡易版) */
.linfo-profile-box.simple { background: var(--li-bg-gray); padding: 20px; border-radius: 8px; margin-top: 30px; }
.profile-header { display: flex; align-items: center; gap: 15px; margin-bottom: 15px; }
.profile-avatar img { width: 60px; height: 60px; border-radius: 50%; border: 2px solid var(--li-gold); }
.profile-meta .name { font-size: 16px; margin: 0; } .profile-meta .role { font-size: 11px; color: var(--li-gray); }
.profile-content p { font-size: 12px; margin: 0; line-height: 1.6; }

/* 判定カード (シンプル版) */
.verdict-card.simple { background: #fff; border: 1px solid var(--li-border); border-radius: 8px; padding: 20px; margin-bottom: 40px; box-shadow: 0 2px 5px rgba(0,0,0,0.05); }
.verdict-question h4 { margin: 0 0 15px; font-size: 16px; }
.result-badge { display: inline-block; padding: 4px 12px; border-radius: 4px; font-size: 12px; font-weight: bold; color: #fff; margin-bottom: 10px; }
.badge-safe { background: 
#27ae60; } .badge-out { background: var(--li-accent); } .badge-gray { background: 
#7f8c8d; }
.result-desc { font-size: 13px; margin: 0 0 10px; }
.read-more-container { text-align: right; }
.read-more-arrow::after { content: '→'; font-weight: bold; color: var(--li-primary); }

/* 新着記事リスト (画像3) */
.section-header-simple h2 { font-size: 20px; color: var(--li-primary); border-bottom: 2px solid var(--li-border); padding-bottom: 10px; margin-bottom: 20px; }
.new-post-list-item {
    display: grid; grid-template-columns: 100px 1fr auto; align-items: center; gap: 15px;
    padding: 15px 0; border-bottom: 1px solid var(--li-border);
}
.cat-label { font-size: 11px; padding: 3px 8px; border-radius: 4px; background: var(--li-bg-gray); color: var(--li-gray); text-align: center; }
/* カテゴリごとの色分け例（必要に応じて追加） */
.cat-sns-rules { background: 
#e3f2fd; color: 
#1565c0; } .cat-labor-law { background: 
#fff3e0; color: 
#ef6c00; }
.post-title { margin: 0; font-size: 15px; font-weight: bold; line-height: 1.4; }
.post-date { font-size: 12px; color: var(--li-gray); }
.linfo-more-btn-simple { text-align: right; margin-top: 20px; }
.linfo-more-btn-simple a { font-size: 13px; font-weight: bold; color: var(--li-primary); }

/* カテゴリグリッド (画像4, その他要望: 青背景見出し) */
.full-width-bg { background: var(--li-bg-gray); padding: 40px 20px; margin-top: 40px; }
.section-title-accent.blue-bg {
    background: var(--li-blue); color: #fff; text-align: center; padding: 15px;
    margin: -40px -20px 30px; /* 親のpaddingを相殺して全幅にする */
}
.section-title-accent h2 { margin: 0; font-size: 20px; }
.linfo-cat-grid.simple { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 20px; }
.cat-card.simple {
    background: #fff; border: 1px solid var(--li-border); border-radius: 8px;
    text-align: center; padding: 25px 15px; transition: transform 0.3s, box-shadow 0.3s;
}
.cat-card.simple:hover { transform: translateY(-3px); box-shadow: 0 4px 10px rgba(0,0,0,0.1); }
.big-icon { font-size: 40px; margin-bottom: 15px; display: block; }
.cat-info.simple h3 { margin: 0 0 10px; font-size: 16px; color: var(--li-primary); }
.cat-info.simple p { margin: 0; font-size: 12px; color: var(--li-gray); line-height: 1.4; }

/* 免責事項 (画像5) */
.linfo-disclaimer-section { background: 
#f0f0f0; padding: 30px 20px; border-top: 3px solid #ccc; font-size: 12px; color: #555; text-align: center; }
.disclaimer-inner { max-width: 1000px; margin: 0 auto; }
.linfo-disclaimer-section p { margin: 0; line-height: 1.6; }

/* レスポンシブ */
@media (max-width: 768px) {
    .linfo-container { grid-template-columns: 1fr; padding: 30px 15px; }
    .linfo-sidebar { width: 100%; margin-top: 40px; }
    .linfo-header { padding: 20px 15px; }
    .linfo-site-logo { font-size: 28px; }
    .linfo-main-nav ul { gap: 10px; } .linfo-main-nav li a { padding: 6px 12px; font-size: 12px; }
    .new-post-list-item { grid-template-columns: 1fr; gap: 5px; }
    .post-meta { order: 2; } .post-title { order: 1; } .post-date { order: 3; text-align: right; }
    .linfo-cat-grid.simple { grid-template-columns: repeat(2, 1fr); }
}