/*
Theme Name: Twenty Twenty-Four Child
Template: twentytwentyfour
*/


/***************************************
【Arkhe】Contact form7のカスタマイズ（ここから↓）
***************************************/
/* 送信ボタンのスタイル */
.wpcf7-submit {
    margin-top: 30px; /* ボタンの上の余白 */
    background-color: #ff8000; /* ボタンの背景色 */
    color: #fff; /* ボタンの文字色 */
    padding: 15px; /* ボタンの内側の余白 */
    width: 40%; /* ボタンの幅 */
    display: block; /* ブロック要素として配置 */
    margin-left: auto; /* 左右中央寄せ */
    margin-right: auto;
	font-size: 1.8rem;
}

/* テキストフィールドとテキストエリアのスタイル */
.wpcf7-text, .wpcf7-textarea {
    width: 90% !important; /* フィールドの幅 */
}

/* チェックボックスのリストアイテム */
span.wpcf7-list-item {
    margin-top: 5px; /* アイテム間の余白 */
    display: block; /* アイテムをブロック表示 */
}

/* フォームのテーブルスタイル */
.form-table {
    border-collapse: collapse; /* テーブルの枠線を結合 */
}

/* 各セルのスタイル */
.form-table tr th,
.form-table tr td {
    padding: 20px !important; /* セル内の余白 */
    border-left: none; /* 左の境界線なし */
    border-right: none; /* 右の境界線なし */
}

/* テーブル全体の境界線 */
.form-table, .wp-block-flexible-table-block-table table {
    border-right: 0;
}

/* 最初の行に境界線を追加 */
.form-table tr:first-child th,
.form-table tr:first-child td {
    border-top: 1px solid #ccc;
}

/* 最後の行に境界線を追加 */
.form-table tr:last-child th,
.form-table tr:last-child td {
    border-bottom: 1px solid #ccc;
}

/* それ以外の行にダッシュ線 */
.form-table tr td {
    border-top: 1px dashed #ccc;
}

/* ヘッダーセルの背景色 */
.form-table tr th {
    background-color: #F8F7F3;
}

/* 必須項目のスタイル */
.required {
    color: #FF3333; /* 必須項目の色を赤に */
}

/* スマホ表示では縦に並べる */
@media screen and (max-width: 1000px){
    .form-table, 
    .form-table tr, 
    .form-table th, 
    .form-table td {
        display: block;
        width: 100%;
    }

    .form-table tr td {
        border-top: none;
    }

    .form-table tr th {
        border-top: 1px solid #ccc;
        border-bottom: 1px solid #ccc;
    }
}
/***************************************
【Arkhe】Contact form7のカスタマイズ（ここまで↑）
***************************************/