/*
Theme Name: Creemm
Author: Creemm
Description: Original Theme with Tailwind CSS
Version: 1.0
*/

/* WordPress管理バーによる上部余白を強制削除 */
html {
    margin-top: 0 !important;
}

/* 基本フォント設定 */
body {
    font-family: 'Noto Sans JP', sans-serif;
    color: #1a1a1a;
    line-height: 1.8;
    letter-spacing: 0.05em;
}

/* 英語フォント用 */
.font-eng {
    font-family: 'Manrope', sans-serif;
}

/* ロゴ画像のサイズ調整（アップロードされた画像用） */
.custom-logo {
    height: auto;
    max-height: 40px; /* ロゴの高さ制限 */
    width: auto;
}


/* =========================================
   Contact Form 7 スタイル調整（強力版）
   Tailwindのリセットを !important で強制上書きします
========================================= */

/* 入力フィールド（テキスト、メール、テキストエリア等） */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="url"],
.wpcf7 textarea {
    border: 1px solid #d1d5db !important; /* 強制的に1pxの線をつける */
    background-color: #ffffff !important; /* 背景を白に指定 */
    color: #1a1a1a !important;            /* 文字色を黒っぽく */
    padding: 12px 16px !important;        /* 余白を確保 */
    width: 100% !important;               /* 横幅いっぱい */
    border-radius: 0 !important;          /* 角丸なし */
    outline: none !important;
    appearance: none !important;          /* ブラウザ標準の装飾を消す */
}

/* 入力しようとした時（フォーカス時）のデザイン */
.wpcf7 input:focus,
.wpcf7 textarea:focus {
    border-color: #000000 !important;     /* 枠線を黒に */
    background-color: #f9fafb !important; /* 背景をほんのりグレーに */
}

/* 送信ボタンのデザイン */
.wpcf7 input[type="submit"] {
    background-color: #000000 !important;
    color: #ffffff !important;
    border: 1px solid #000000 !important;
    padding: 16px 60px !important;
    font-size: 14px !important;
    letter-spacing: 0.2em !important;
    cursor: pointer !important;
    margin-top: 24px !important;
    width: auto !important;
    display: inline-block !important;
}

/* 送信ボタンのマウスオーバー時 */
.wpcf7 input[type="submit"]:hover {
    background-color: #ffffff !important;
    color: #000000 !important;
}

/* =========================================
   Contact Form 7 余白のデザイン調整
   (項目ごとの間隔を広げて見やすくする)
========================================= */

/* 各入力項目のまとまり（段落）の下に大きな余白を入れる */
.wpcf7 p {
    margin-bottom: 3rem !important; /* ここの数字で間隔を調整（3rem = 48px程度） */
}

/* ラベル（「氏名」「会社名」などの文字）のデザイン */
.wpcf7 label {
    display: block;             /* ブロック要素にして改行させる */
    margin-bottom: 0.8rem;      /* 入力欄との間に少し隙間を作る */
    font-size: 0.95rem;         /* 文字サイズを微調整 */
    letter-spacing: 0.1em;      /* 文字間隔を広げて読みやすく */
    font-weight: 500;           /* 少しだけ太くして視認性アップ */
}

/* 必須マーク（*）の色調整（お好みで） */
.wpcf7 .wpcf7-validates-as-required {
    color: #ef4444; /* 赤色 */
    margin-left: 0.25em;
}

/* チェックボックス（ご希望の連絡方法）周りの調整 */
.wpcf7-checkbox label {
    display: inline-block !important; /* 横並びにする */
    margin-right: 1.5rem !important;  /* 選択肢ごとの間隔 */
    margin-bottom: 0 !important;
    font-weight: normal !important;
}