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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
/* ドロップダウンの基本スタイル */
.wpcf7-select {
    width: 100%; /* 幅を最大に */
    max-width: 400px; /* 最大幅を制限 */
    padding: 12px;
    font-size: 20px; /* 文字サイズを大きく */
    font-family: 'Arial', sans-serif; /* 読みやすいフォント */
    font-weight: bold; /* 文字を太字に */
    color: #222; /* 文字色を濃く */
    background-color: #f9f9f9; /* 背景を薄いグレー */
    border: 2px solid #4CAF50; /* 緑のボーダー */
    border-radius: 8px; /* 角を丸く */
    text-align: center; /* 文字を中央揃え */
    appearance: none; /* デフォルトの矢印を非表示 */
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="gray"><path d="M7 10l5 5 5-5z"/></svg>'); /* カスタム矢印 */
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 20px;
    text-align-last: center; /* 選択された項目も中央揃え */
    transition: all 0.3s ease-in-out;
    cursor: pointer;
}

/* フォーカス時 */
.wpcf7-select:focus {
    outline: none;
    border-color: #ff4500; /* フォーカス時にオレンジで目立たせる */
    box-shadow: 0 0 6px rgba(255, 69, 0, 0.5);
}

/* ドロップダウンの選択肢 */
.wpcf7-select option {
    text-align: center; /* 選択肢の文字も中央揃え */
    font-size: 18px;
}

/* テキスト入力欄の基本スタイル */
.wpcf7-text, 
.wpcf7-email {
    width: 100%; /* 幅を最大に */
    max-width: 400px; /* 最大幅を制限 */
    padding: 12px;
    font-size: 20px; /* 文字サイズを大きく */
    font-family: 'Arial', sans-serif; /* 読みやすいフォント */
    font-weight: bold; /* 文字を太字に */
    color: #222; /* 文字色を濃く */
    background-color: #f9f9f9; /* 背景を薄いグレー */
    border: 2px solid #4CAF50; /* 緑のボーダー */
    border-radius: 8px; /* 角を丸く */
    text-align: center; /* 文字を中央揃え */
    transition: all 0.3s ease-in-out;
}

/* フォーカス時 */
.wpcf7-text:focus, 
.wpcf7-email:focus {
    outline: none;
    border-color: #ff4500; /* フォーカス時にオレンジで目立たせる */
    box-shadow: 0 0 6px rgba(255, 69, 0, 0.
	
/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

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

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