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

/* お問い合わせフォームのラジオボタンを縦並びにする */
.wpcf7-form .wpcf7-radio .wpcf7-list-item {
    display: block;
    margin: 0 0 10px 0; /* 選択肢ごとの上下の間隔 */
}

/* アピールエリアの文字枠を濃くし、文字色を完全に白にする */
.appeal-content {
    background-color: rgba(0, 0, 0, 0.85) !important; /* 枠を濃い黒にする */
    color: #ffffff !important; /* 枠の中の文字をすべて白にする */
}

/* アピールエリアの文字枠を濃くし、全体を白文字ベースにする */
.appeal-content {
    background-color: rgba(0, 0, 0, 0.85) !important;
    color: #ffffff !important;
}

/* ★タイトルだけを大きく、さらに力強く強調する★ */
.appeal-title {
    font-size: 28px !important; /* 文字の大きさをデフォルトより大きくします */
    font-weight: 900 !important; /* 文字の太さを極太にします */
    color: #fff200 !important; /* ★タイトルだけをパッと目を引く「明るい黄色」にします（白に戻したい場合は #ffffff に変更） */
    margin-bottom: 15px !important; /* メッセージとの間に少し隙間を作って見やすくします */
}

/* メッセージ（説明文）の文字設定 */
.appeal-message {
    font-size: 16px !important; /* メッセージはあえて標準的な大きさに抑えます */
    color: #ffffff !important;
    line-height: 1.6 !important;
}

/* スマホ画面用の微調整（画面が小さくても綺麗に収まるようにします） */
@media screen and (max-width: 480px) {
    .appeal-title {
        font-size: 20px !important; /* スマホではタイトルを適切な大きさに自動縮小 */
    }
    .appeal-message {
        font-size: 14px !important;
    }
}

/* 外側より少しだけ明るい「目に優しい白」にしてメリハリを出す */
#main {
    background-color: #fafbfa !important; /* 真っ白ではない、目に優しい白です */
    padding: 30px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); /* ★境界線に「ごく薄い影」をつけ、上品にエリアを際立たせます */
}

/* ==========================================================
   特車申請サイト専用：誠実＆目に優しい統一デザインCSS
   ========================================================== */

/* 1. 全体の文字設定（読みやすさの基本） */
body {
    color: #2b3a32 !important; /* 真っ黒ではなく、ごく深い緑を帯びた黒で目の負担を軽減 */
    line-height: 1.8 !important; /* 行間を広げて長文でも読みやすく */
}

/* 2. 大見出し（H2）のデザイン：目に優しい緑の背景ベタ塗りスタイル */
#main h2 {
    background-color: #e8f5e9 !important; /* 料金表のヘッダーと統一した、非常に淡く上品な緑 */
    color: #1a3024 !important; /* 深いトーンの緑文字 */
    border-left: 6px solid #2e7d32 !important; /* 安全を象徴する濃い緑の左縦線は残して引き締める */
    padding: 12px 15px 12px 15px !important; /* 上下に少しゆとりを持たせる内側の余白 */
    font-size: 20px !important;
    font-weight: 700 !important;
    margin-top: 45px !important; /* 前の文章との間隔をしっかり空けてメリハリを出す */
    margin-bottom: 22px !important;
    border-radius: 0 4px 4px 0; /* 右側の角だけを少し丸くして、堅苦しさを和らげる隠し味 */
}

/* 3. 中見出し（H3）のデザイン：すっきりとした下線スタイル */
#main h3 {
    color: #2e7d32 !important;
    border-bottom: 2px solid #a4c2ad !important; /* 淡い緑の下線 */
    padding-bottom: 8px !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    margin-top: 30px !important;
    margin-bottom: 15px !important;
}

/* 4. 「お悩み（箇条書きリサーチ）」のチェックリスト化 */
#main ul {
    list-style: none !important; /* 既存の無骨な黒丸を消去 */
    padding-left: 5px !important;
}
#main ul li {
    position: relative !important;
    padding-left: 25px !important;
    margin-bottom: 12px !important;
}
#main ul li::before {
    content: "✓" !important; /* 誠実なチェックマークに変更 */
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    color: #c62828 !important; /* チェックマークだけ優しい赤にして視線を誘導 */
    font-weight: bold !important;
}

/* 6. ボタンの形状を「誠実な角丸」にする微調整 */
.tmp-btn, .wp-block-button__link {
    border-radius: 6px !important; /* 四隅を少し丸くして、堅すぎず誠実な印象に */
    font-weight: 700 !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important; /* 軽い影をつけて押しやすく */
    transition: all 0.3s !important;
}
.tmp-btn:hover, .wp-block-button__link:hover {
    transform: translateY(-2px) !important; /* マウスを乗せたときにふわっと浮く高級感 */
    box-shadow: 0 6px 16px rgba(0,0,0,0.12) !important;
}

/* ==========================================================
   本文・料金表エリアだけに左右の余白を持たせるCSS
   ========================================================== */

/* ① 普通の文章（段落）の左右に余白を作る */
#main p {
    padding-left: 20px !important;
    padding-right: 20px !important;
    margin-bottom: 1.5em !important; /* 行の下にも適度な隙間を空ける */
}

/* ② お悩みリスト（赤のチェックマーク部分）の左右に余白を作る */
#main ul {
    padding-left: 25px !important;
    padding-right: 20px !important;
}

/* ③ 新しく導入した高機能料金表（テーブル）の左右に余白を作る */
#main table,
#main .wp-block-table {
    margin-left: auto !important;
    margin-right: auto !important;
    width: calc(100% - 40px) !important; /* 左右に20pxずつの余白を持たせる計算 */
}

/* ④ スマホなどの小さな画面では余白を少し狭めて文字の詰まりを防ぐ */
@media screen and (max-width: 480px) {
    #main p {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
    #main ul {
        padding-left: 15px !important;
        padding-right: 10px !important;
    }
    #main table,
    #main .wp-block-table {
        width: calc(100% - 20px) !important; /* スマホでは左右10pxの余白に自動調整 */
    }
}

/* ==========================================================
   【完全解決】全固定ページのシステム大見出し（H1）を強制非表示にする
   ========================================================== */
h1.entry-title,
.type-page h1.entry-title,
main h1,
.entry-header h1 {
    display: none !important; /* ★システムが自動表示するページタイトルを完全に消し去ります */
}

* ==========================================================
   【完全上書き】ヘッダーを画面最上部に強制固定して追従させる
   ========================================================== */
header.header,
.header {
    position: -webkit-sticky !important; /* Safari対応 */
    position: sticky !important; /* ★画面の最上部にカチッと張り付く設定 */
    top: 0 !important;
    z-index: 9999 !important; /* 他の画像や文字の下に隠れてしまわないよう、最前面に表示 */
    background-color: #f3f7f4 !important; /* 先ほど統一した淡いミントグレーの色をしっかりキープ */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05) !important; /* ★スクロールしたときに、下に「ごく薄い影」を出して境界線を分かりやすくします */
}

/* 管理画面の上部バーが出ている時、ヘッダーがズレるのを防ぐ微調整 */
.admin-bar header.header,
.admin-bar .header {
    top: 32px !important;
}