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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
/* 2026/02/19 サイドメニュー ブロック間隔 */
.sidebar .widget {
  margin-bottom: 20px;
}
/* 2026/02/19 固定ページのみ：日付・更新日・投稿者名を一括非表示 */
.page .post-date, 
.page .post-update, 
.page .author-info, 
.page .post-author {
    display: none !important;
}

/* フォーム全体の背景と枠線 */
div.wpcf7-ui-message,
.wpcf7 form {
    background-color: #f0f9f0 !important; /* 薄い緑 */
    max-width: 900px !important;        /* 幅もここで再指定 */
    margin: 30px auto !important;
    padding: 40px !important;
    border-radius: 12px !important;
    border: 2px solid #c2e0c2 !important;
    box-sizing: border-box !important;
}

/* フォーム全体の上下の余白（内側）を詰める */
div.wpcf7 {
    padding-top: 15px !important;    /* 「1. ご用件」の上の隙間を小さく */
    padding-bottom: 15px !important; /* 「送信ボタン」の下の隙間を小さく */
}


/* 入力欄の幅を100%に維持して、背景からはみ出さないようにする */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea {
    width: 100% !important;
    box-sizing: border-box !important;
}

/* 項目ごとの余白 */
.wpcf7 p {
    margin-bottom: 10px !important; /* 20pxから10pxに半減 */
}

/* ラベル（項目名）の文字を太く */
.wpcf7 label, .wpcf7 p {
    font-weight: bold;
    color: #333;
}

/* 入力欄のスタイル */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="url"],
.wpcf7 textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background: #fff;
    box-sizing: border-box; /* 幅突き出し防止 */
    font-weight: normal;
    margin-top: 5px;
}
/* 「(必須)」ラベルを赤文字にする */
.hissu {
    color: #ff0000 !important; /* 鮮やかな赤 */
    font-size: 0.9em;          /* 少し小さくするとバランスが良いです */
    margin-left: 5px;
    font-weight: bold;
}
/* 送信ボタンも緑系で合わせる場合 */
.wpcf7-submit {
    background-color: #4caf50 !important; /* 落ち着いた緑 */
    color: #fff !important;
    border: none;
    padding: 15px 50px;
    border-radius: 50px;
    font-size: 18px;
    cursor: pointer;
    display: block;
    margin: 0 auto;
    margin-top: 10px !important; /* ボタンの上の隙間も詰める */
}

.wpcf7-submit:hover {
    background-color: #45a049 !important; /* ホバー時に少し暗く */
}
/* ラジオボタンを縦並びにする */
.wpcf7-list-item {
    display: block; /* 横並びから縦並びに変更 */
    margin: 2px 0 !important; /* 5pxから2pxに */
}

/* ラジオボタンとラベルの間の余白を調整（お好みで） */
.wpcf7-list-item-label {
    margin-left: 5px;
    font-weight: normal; /* 項目名は細くすると見やすいです */
}

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

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

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