@charset "UTF-8";

/* ==========================================================================
// Google Fonts - Sawarabi Gothic の読み込み
// ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Sawarabi+Gothic&display=swap');

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

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

/* ==========================================================================
// サイト全体のフォント設定
// ========================================================================== */
body {
    font-family: "Sawarabi Gothic", sans-serif;
}
h1, h2, h3, h4, h5, h6 {
    font-family: "Sawarabi Gothic", sans-serif; /* 見出しも同じフォントにする場合 */
}

/* ==========================================================================
// その他のスタイリッシュ化のためのCSS（以前お伝えした余白や色、ボタンなどの調整）
// ========================================================================== */

/* 全体的な行間の調整 */
body {
    line-height: 1.8;
}

/* 段落の上下の余白 */
p {
    margin-bottom: 1em;
}

/* AIタロットフォームのボタンの色調整 (例: リンクカラーと同じ青系に) */
.tarot-button {
    background-color: #4A90E2;
}
.tarot-button:hover {
    background-color: #357ABD;
}

/* 主要コンテンツの背景色や影（必要であれば）*/
#main .content {
    background-color: #ffffff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
}


/* ==========================================================================
// ヘッダーエリア全体の背景と文字色の調整
// ========================================================================== */

/* ヘッダーコンテナ全体の背景色と画像 */
#header-container {
    background-color: #1A2B3C; /* 画像が読み込まれない場合の代替色（暗めの紺色） */
    background-image: url('http://fortunes-for-you.com/wp-content/uploads/2025/07/tarot9.png'); /* ★ここをあなたの画像のURLに置き換えてください！ */
    background-size: cover; /* 背景画像を要素全体に表示（引き伸ばす） */
    background-position: center center; /* 画像を中央に配置 */
    background-repeat: no-repeat; /* 画像を繰り返さない */
    /* background-attachment: fixed; */ /* スクロールしても背景画像を固定する場合（お好みで） */
}

/* サイトのタイトル（AIタロットとオカルトの現実解剖） */
.site-name-text-link .site-name-text {
    color: #E0E0E0; /* 明るいグレー、白すぎず目に優しい色 */
}
.site-name-text-link:hover .site-name-text {
    color: #FFFFFF; /* ホバー時は純粋な白で少し強調 */
}

/* キャッチフレーズ（占いやってるくせに現実的な話でオカルトを見極める人のブログ） */
.tagline {
    color: #B0C4DE; /* 少し明るめの青みがかったグレー */
    text-decoration: none !important; /* キャッチフレーズの斜線（打ち消し線）を消す */
}

/* ==========================================================================
// ナビゲーションメニューの背景色と文字色調整
// ========================================================================== */

/* ナビゲーションメニュー全体 */
#navi {
    background-color: transparent !important; /* ヘッダーの背景画像を見せるために透明にする */
}

/* メニュー項目のリンク文字色 */
/* .menu-top li a は、通常のメニュー項目へのリンク */
.menu-top li a {
    color: #E0E0E0; /* 明るいグレー */
}

/* メニュー項目のリンクのホバー時、アクティブ時の文字色 */
/* .menu-top li a:hover はホバー時 */
/* .menu-top li.current-menu-item a は現在開いているページのメニュー項目 */
.menu-top li a:hover .item-label,
.menu-top li.current-menu-item a .item-label {
    color: #ADD8E6; /* 薄い水色など、アクセントになる色 */
}

/* メニュー項目の背景色（もしデフォルトで白背景が残る場合） */
/* Cocoonのメニューは背景色が親要素から継承されることが多いですが、
   もし白い背景が残るようなら以下を追加してみてください */
.menu-top li {
    background-color: transparent; /* 透明にするか、ヘッダーと同じ色を指定 */
}

/* ==========================================================================
// 「もっと見る」ボタンの修正（PC・スマホ共通）
// ========================================================================== */

/* 黒くなっている「もっと見る」ボタンの修正 */
/* これは、Cocoonがボタンに適用しているデフォルトのスタイルを上書きします */
#menu-item-64.btn-primary a, /* スマホメニューの項目も対象にする */
.menu-top li.btn-primary a { /* PCメニューの項目 */
    background-color: #366799 !important; /* 例: 少し明るい青、サイトのテーマに合わせる */
    color: #FFFFFF !important; /* 文字色を白に */
    border: 1px solid #366799 !important; /* 枠線も同じ色に */
    padding: 8px 15px !important; /* ボタンのパディング調整 */
    border-radius: 5px !important; /* 角の丸み */
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

#menu-item-64.btn-primary a:hover,
.menu-top li.btn-primary a:hover {
    background-color: #4A90E2 !important; /* ホバー時の背景色 */
    color: #FFFFFF !important;
    border-color: #4A90E2 !important;
}

/* ボタン内部のテキスト（アイテムラベル）の背景を強制的に透明に */
/* これが黒い背景の原因になっている可能性が高い */
#menu-item-64.btn-primary a .caption-wrap,
#menu-item-64.btn-primary a .item-label,
.menu-top li.btn-primary a .caption-wrap,
.menu-top li.btn-primary a .item-label {
    background-color: transparent !important; /* 強制的に背景を透明に */
    color: inherit !important; /* 親要素（ボタン全体）の文字色を継承 */
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}