@charset "UTF-8";

/*!
Theme Name: Cocoon Child - Stand by me AI
Description: Stand by me AI専用のカスタマイズ済み子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3 - Stand by me AI Custom
*/

/************************************
** Stand by me AI カスタムスタイル
************************************/

/* === 基本設定・リセット === */
body {
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 16px;
    line-height: 1.6;
    color: #1A1A1A;
    background-color: #FFFFFF;
}

/* === ロゴ・ヘッダーカスタマイズ === */
.site-name,
.site-name a,
.logo-text {
    font-family: 'Arial Black', Arial, sans-serif !important;
    font-size: 32px !important;
    font-weight: 900 !important;
    letter-spacing: -1px !important;
    color: #000000 !important;
    text-decoration: none !important;
    text-transform: uppercase;
}

.site-name-text {
    font-family: 'Arial Black', Arial, sans-serif !important;
    font-weight: 900 !important;
    color: #000000 !important;
}

/* ヘッダー全体の調整 */
.header-container {
    background-color: #FFFFFF;
    border-bottom: 1px solid #E5E5E5;
    padding: 20px 0;
}

.header-container-in {
    max-width: 1200px;
    margin: 0 auto;
}

/* === ナビゲーションメニュー === */
.navi {
    background-color: #FAFAFA !important;
    border-bottom: 1px solid #E5E5E5;
    padding: 15px 0;
}

.navi-in {
    max-width: 1200px;
    margin: 0 auto;
}

.menu li a,
.navi-menu-item a {
    color: #333333 !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 8px 12px !important;
    border-radius: 4px !important;
    transition: all 0.2s ease !important;
}

.menu li a:hover,
.navi-menu-item a:hover,
.menu li.current-menu-item a {
    color: #0066CC !important;
    background-color: #FFFFFF !important;
}

/* === メインコンテンツエリア === */
.main {
    background-color: #FFFFFF;
    padding: 40px 0;
}

.main-in {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* === 記事一覧・カード === */
.entry-cards {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)) !important;
    gap: 40px !important;
    margin-bottom: 60px !important;
}

.entry-card-wrap,
.entry-card {
    background-color: #FFFFFF !important;
    border: 1px solid #E5E5E5 !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    transition: all 0.3s ease !important;
    box-shadow: none !important;
}

.entry-card-wrap:hover,
.entry-card:hover {
    border-color: #0066CC !important;
    box-shadow: 0 4px 12px rgba(0, 102, 204, 0.1) !important;
}

/* 記事カード画像 */
.entry-card-thumb img {
    width: 100% !important;
    height: 200px !important;
    object-fit: cover !important;
}

/* 記事カードコンテンツ */
.entry-card-content {
    padding: 24px !important;
}

.entry-card-title {
    font-size: 20px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    margin-bottom: 12px !important;
    color: #000000 !important;
}

.entry-card-title a {
    color: #000000 !important;
    text-decoration: none !important;
}

.entry-card-title a:hover {
    color: #0066CC !important;
}

.entry-card-snippet {
    color: #333333 !important;
    margin-bottom: 16px !important;
    line-height: 1.5 !important;
}

.entry-card-meta {
    font-size: 13px !important;
    color: #666666 !important;
    font-weight: 500 !important;
}

/* === 記事詳細ページ === */
.article {
    background-color: #FFFFFF;
    padding: 40px 0;
}

.entry-title {
    font-size: 36px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    margin-bottom: 20px !important;
    color: #000000 !important;
}

.entry-content {
    font-size: 18px !important;
    color: #333333 !important;
    line-height: 1.6 !important;
}

.entry-content h2 {
    font-size: 28px !important;
    font-weight: 700 !important;
    color: #000000 !important;
    border-bottom: 2px solid #0066CC !important;
    padding-bottom: 10px !important;
    margin-top: 40px !important;
    margin-bottom: 20px !important;
}

.entry-content h3 {
    font-size: 24px !important;
    font-weight: 600 !important;
    color: #000000 !important;
    margin-top: 30px !important;
    margin-bottom: 15px !important;
}

/* === ボタン・リンク === */
.btn,
.button {
    background-color: #0066CC !important;
    color: #FFFFFF !important;
    border: none !important;
    padding: 16px 32px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    transition: background-color 0.2s ease !important;
    text-decoration: none !important;
}

.btn:hover,
.button:hover {
    background-color: #0052A3 !important;
    color: #FFFFFF !important;
}

/* === サイドバー === */
.sidebar {
    background-color: #FAFAFA;
    padding: 20px;
    border-radius: 8px;
}

.widget {
    background-color: #FFFFFF;
    border: 1px solid #E5E5E5;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
}

.widget-title {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #000000 !important;
    margin-bottom: 15px !important;
    border-bottom: 1px solid #0066CC !important;
    padding-bottom: 8px !important;
}

/* === フッター === */
.footer {
    background-color: #1A1A1A !important;
    color: #FFFFFF !important;
    padding: 40px 0 !important;
    text-align: center !important;
    margin-top: 80px !important;
}

.footer-in {
    max-width: 1200px;
    margin: 0 auto;
}

/* === その他のCocoon要素 === */
/* パンくずリスト */
.breadcrumb {
    background-color: #F8F9FA;
    padding: 10px 0;
    font-size: 14px;
}

.breadcrumb a {
    color: #0066CC !important;
    text-decoration: none !important;
}

/* ページネーション */
.pagination .page-numbers {
    background-color: #FFFFFF !important;
    border: 1px solid #E5E5E5 !important;
    color: #333333 !important;
    padding: 10px 15px !important;
    margin: 0 5px !important;
    border-radius: 4px !important;
}

.pagination .page-numbers:hover,
.pagination .page-numbers.current {
    background-color: #0066CC !important;
    color: #FFFFFF !important;
    border-color: #0066CC !important;
}

/* 検索フォーム */
.search-box input[type="search"] {
    border: 1px solid #E5E5E5 !important;
    border-radius: 4px !important;
    padding: 10px 15px !important;
    font-size: 16px !important;
}

.search-box .search-submit {
    background-color: #0066CC !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: 4px !important;
    padding: 10px 20px !important;
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/

/*1023px以下 - タブレット*/
@media screen and (max-width: 1023px){
    .main-in {
        padding: 0 16px;
    }
    
    .site-name,
    .site-name a,
    .logo-text {
        font-size: 28px !important;
    }
    
    .entry-cards {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
        gap: 30px !important;
    }
    
    .entry-title {
        font-size: 32px !important;
    }
    
    .entry-content {
        font-size: 17px !important;
    }
}

/*834px以下 - 小さなタブレット*/
@media screen and (max-width: 834px){
    .site-name,
    .site-name a,
    .logo-text {
        font-size: 24px !important;
    }
    
    .menu li a,
    .navi-menu-item a {
        font-size: 13px !important;
        padding: 6px 10px !important;
    }
    
    .entry-cards {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }
    
    .entry-title {
        font-size: 28px !important;
    }
    
    .entry-content h2 {
        font-size: 24px !important;
    }
    
    .entry-card-content {
        padding: 20px !important;
    }
}

/*480px以下 - スマートフォン*/
@media screen and (max-width: 480px){
    .main-in {
        padding: 0 12px;
    }
    
    .site-name,
    .site-name a,
    .logo-text {
        font-size: 20px !important;
        letter-spacing: 0 !important;
    }
    
    .header-container {
        padding: 15px 0;
    }
    
    .menu li a,
    .navi-menu-item a {
        font-size: 12px !important;
        padding: 6px 8px !important;
    }
    
    .entry-title {
        font-size: 24px !important;
    }
    
    .entry-content {
        font-size: 16px !important;
    }
    
    .entry-content h2 {
        font-size: 22px !important;
    }
    
    .entry-content h3 {
        font-size: 20px !important;
    }
    
    .entry-card-title {
        font-size: 18px !important;
    }
    
    .entry-card-content {
        padding: 16px !important;
    }
    
    .btn,
    .button {
        padding: 12px 24px !important;
        font-size: 14px !important;
    }
}

/* === 追加のCocoon専用調整 === */

/* Cocoonのデフォルトスタイルをオーバーライド */
.entry-card-wrap .card-thumb img {
    height: 200px !important;
    object-fit: cover !important;
}

/* Cocoonの記事メタ情報 */
.entry-meta {
    color: #666666 !important;
    font-size: 13px !important;
}

.entry-meta a {
    color: #0066CC !important;
    text-decoration: none !important;
}

/* Cocoonのカテゴリーラベル */
.cat-label {
    background-color: #0066CC !important;
    color: #FFFFFF !important;
    font-size: 12px !important;
    padding: 4px 8px !important;
    border-radius: 4px !important;
}

/* Cocoonのコメント欄 */
.comment-form input,
.comment-form textarea {
    border: 1px solid #E5E5E5 !important;
    border-radius: 4px !important;
    padding: 10px !important;
}

.comment-form .submit {
    background-color: #0066CC !important;
    color: #FFFFFF !important;
    border: none !important;
    padding: 10px 20px !important;
    border-radius: 4px !important;
}

/* Cocoonの目次 */
.toc {
    background-color: #F8F9FA !important;
    border: 1px solid #E5E5E5 !important;
    border-radius: 8px !important;
    padding: 20px !important;
}

.toc-title {
    color: #000000 !important;
    font-weight: 700 !important;
    border-bottom: 1px solid #0066CC !important;
    padding-bottom: 8px !important;
}

/* 関連記事 */
.related-entries {
    background-color: #F8F9FA;
    padding: 30px 20px;
    border-radius: 8px;
    margin-top: 40px;
}

.related-entry-heading {
    color: #000000 !important;
    font-weight: 700 !important;
    font-size: 24px !important;
    border-bottom: 2px solid #0066CC !important;
    padding-bottom: 10px !important;
    margin-bottom: 20px !important;
}