/* =============================================
 * 「旅好き.net」専用カスタムCSS（Cocoon用）
 * テーマ：熱海モダンリゾート・ブルー
 * ============================================= */

/* 1. 全体の背景とベースのフォント設定 */
body {
    background-color: #f4f7f9; /* ほんのり青みのある爽やかなグレー */
    color: #333333;
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}

/* 2. ヘッダーエリア（サイトの顔） */
.header {
    background: #ffffff;
    border-bottom: 4px solid #007bbb; /* 熱海の澄んだ海をイメージしたブルー */
    padding: 20px 0;
}

/* サイト名「旅好き.net」の装飾 */
.site-name-text a {
    color: #007bbb !important;
    font-weight: 800;
    letter-spacing: 0.08em;
    font-size: 28px;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.05);
}

/* 3. グローバルナビ（メニューバー） */
.navi-in a {
    color: #444444;
    font-weight: bold;
    font-size: 16px;
}

.navi-in li a:hover {
    background: #007bbb !important; /* ホバー時に熱海ブルーに */
    color: #ffffff !important;
    transition: background-color 0.3s ease;
}

/* 4. 記事内の見出し（専門性と読みやすさの向上） */
.article h2 {
    position: relative;
    padding: 1rem 1rem 1rem 2.5rem;
    color: #ffffff;
    background: linear-gradient(135deg, #007bbb 0%, #0056b3 100%); /* 深みのあるグラデーション */
    border-radius: 6px;
    margin-top: 3em;
    font-size: 22px;
    box-shadow: 0 3px 6px rgba(0,79,187,0.16);
}

/* 見出しの左側に旅を連想させるアイコン（羅針盤・アンカーのイメージ） */
.article h2::before {
    position: absolute;
    top: 50%;
    left: 0.8rem;
    transform: translateY(-50%);
    content: "🧭"; 
    font-size: 1.4rem;
}

.article h3 {
    padding: 0.6rem 0;
    border-bottom: 3px solid #f5b090; /* 熱海プリンや夕日をイメージしたコーラルオレンジ */
    color: #007bbb;
    margin-top: 2.2em;
    font-size: 19px;
}

/* 5. 記事一覧カード（トップページやカテゴリー用） */
.entry-card-wrap {
    background-color: #ffffff;
    border-radius: 12px; /* 少し角を丸くして今っぽく */
    box-shadow: 0 4px 15px rgba(0,0,0,0.04);
    transition: all 0.3s ease;
    border: 1px solid #eef2f5;
    padding: 12px;
    overflow: hidden;
}

/* マウスを乗せたときにフワッと浮き上がる演出 */
.entry-card-wrap:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 20px rgba(0,123,187,0.1);
    border-color: #007bbb;
}

/* 6. サイドバー */
.sidebar h3 {
    background: #ffffff;
    border-left: 6px solid #007bbb; /* 左側にブルーのアクセントライン */
    padding: 12px;
    font-size: 17px;
    font-weight: bold;
    box-shadow: 0 2px 5px rgba(0,0,0,0.02);
}

/* 7. お問い合わせや予約を促すボタン */
.btn-wrap a {
    background-color: #f5b090 !important; /* コーラルオレンジ */
    color: #ffffff !important;
    border-radius: 50px !important;
    font-weight: bold;
    box-shadow: 0 4px 0 #d98a6a;
    transition: all 0.2s;
}

.btn-wrap a:hover {
    transform: translateY(2px);
    box-shadow: 0 2px 0 #d98a6a;
}

/* 8. フッターエリア */
.footer {
    background-color: #223a4d; /* 落ち着いたネイビーグレー */
    color: #ffffff;
    padding: 50px 0 20px;
}

.footer a {
    color: #cbd5e1;
    text-decoration: none;
}

.footer a:hover {
    color: #ffffff;
    text-decoration: underline;
}

.source-link {
    display: none; /* デフォルトのソース表示を整える（必要に応じて） */
}