/*
Theme Name: Cocoon Child
Template: cocoon-master
Version: 1.2.0 (Genspark Optimized)
*/

/************************************
** 1. 定数定義（サイトのカラーとルール）
************************************/
:root {
    --color-main: #0073aa;          /* 信頼のブルー */
    --color-accent: #ff934f;        /* 親しみのオレンジ */
    --color-accent-hover: #e58447;  /* ホバー時の濃いオレンジ */
    --color-bg-light: #fdfdfd;      /* 優しい白背景 */
    --color-text: #333333;          /* 読みやすい黒 */
    --color-text-sub: #666666;      /* 補足のグレー */
    --gap: 32px;
    --gap-sm: 16px;
    --shadow-soft: 0 10px 25px rgba(0, 0, 0, 0.05);
    --shadow-accent: 0 8px 20px rgba(255, 147, 79, 0.25);
    --radius-lg: 16px;
}

/************************************
** 2. 全体レイアウト & セクション見出し
************************************/
.top-compact-design {
    max-width: 1100px;
    margin: var(--gap) auto;
    padding: 0 var(--gap-sm);
}

.section-title {
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 24px;
    padding: 10px 16px;
    border-left: 6px solid var(--color-accent); /* オレンジの縦線 */
    background: #fff;
    box-shadow: var(--shadow-soft);
    display: flex;
    align-items: center;
}

.mb-compact { margin-bottom: var(--gap); }

/* グリッド共通設定 */
.grid-2-col, .grid-2-col-content, .grid-3-col, .base-grid-2 {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-sm);
    list-style: none;
    padding: 0;
}

/************************************
** 3. ボタン & CTA（クリック率向上）
************************************/
.card-cta, .profile-cta, .trip-read-btn, .theme-button, .cta-button {
    display: inline-block;
    background-color: var(--color-accent) !important;
    color: #fff !important;
    font-weight: 700;
    padding: 12px 28px;
    border-radius: 50px;
    text-decoration: none !important;
    box-shadow: var(--shadow-accent);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    text-align: center;
    border: none !important;
}

.card-cta:hover, .profile-cta:hover, .trip-read-btn:hover {
    transform: translateY(-3px);
    background-color: var(--color-accent-hover) !important;
    box-shadow: 0 12px 24px rgba(255, 147, 79, 0.35);
}

/************************************
** 4. カードデザイン（ツール・記事・キャンプ）
************************************/
.list-wrap, .custom-card, .base-card, .trip-card, .profile-box {
    background-color: #fff;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
    border: 1px solid rgba(0, 0, 0, 0.03);
    padding: 20px;
    transition: transform 0.3s ease;
}

.custom-card {
    flex: 1 1 calc(50% - var(--gap-sm));
    min-width: 300px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.card-primary { border-top: 5px solid var(--color-main); }
.card-accent { border-top: 5px solid var(--color-accent); }

/************************************
** 5. プロフィール（信頼性）
************************************/
.profile-box {
    display: flex;
    align-items: center;
    gap: var(--gap);
    margin: 40px 0;
}

.profile-box img {
    border-radius: 50%;
    width: 90px;
    height: 90px;
    border: 3px solid #fff;
    box-shadow: var(--shadow-soft);
}

/************************************
** 6. 記事本文（可読性重視）
************************************/
.entry-content {
    line-height: 1.9 !important;
    font-size: 17px;
}

.entry-content h2 {
    border-left: 6px solid var(--color-accent) !important;
    padding: 12px 20px !important;
    background: #fff9f5 !important;
    border-bottom: none !important;
    margin-top: 3em !important;
}

/************************************
** 7. レスポンシブ
************************************/
@media screen and (max-width: 768px) {
    .grid-2-col, .grid-2-col-content { flex-direction: column; }
    
    .card-cta, .profile-cta, .theme-button {
        display: block;
        width: 100%;
    }

    .profile-box {
        flex-direction: column;
        text-align: center;
    }
}