/*
 Theme Name: OnePress Child
 Theme URI: https://example.com/
 Description: OnePress テーマの子テーマ
 Author: Kawai Jichiren
 Author URI: https://example.com/
 Template: onepress
 Version: 1.0.0
*/

/* 子テーマ用のカスタマイズCSSはここに書く */
/* Hero以外のセクションを全部非表示 */
.section {
    display: none !important;
}
/* ==========================================================
 * 自治会フォーム (original-contact-form) のカスタムスタイル
 * (OnePressのデフォルトスタイルを上書きするため詳細度を調整)
 * ========================================================== */
/* ==========================================================
 * フォーム幅の調整と中央寄せCSS (詳細度を上げて親テーマを上書き)
 * ========================================================== */

/* フォーム全体の外観、幅、青枠 */
/* .site-main または .entry-content 内にあるフォームとして指定 */
.site-main #original-contact-form {
    /* フォーム全体の幅を調整 */
    max-width: 500px !important; /* 最大幅を強制的に適用 */
    width: 90% !important; /* 小さい画面での幅を強制的に適用 */
    
    /* 中央寄せ */
    margin: 20px auto !important; 
    
    /* 以前設定した青枠・パディング */
    display: block;
    padding: 20px;
    border: 3px solid #1e90ff; 
    border-radius: 10px;
    box-sizing: border-box;
}

/* ラベル (縦並び) */
.site-main #original-contact-form label {
    display: block !important;
    margin-top: 15px;
    margin-bottom: 5px;
    font-weight: 600;
    color: #333333; 
    font-size: 16px; 
}

/* 入力フィールド、セレクトボックス、テキストエリア */
.site-main #original-contact-form input[type="text"],
.site-main #original-contact-form input[type="email"],
.site-main #original-contact-form input[type="tel"],
.site-main #original-contact-form select,
.site-main #original-contact-form textarea {
    width: 100% !important; /* 幅100%を強制的に適用 */
    padding: 12px;
    margin-bottom: 20px;
    
    /* OnePressのデフォルトスタイルを上書き */
    background-color: #ffffff !important; 
    box-shadow: none !important; 
    border: 1px solid #1e90ff !important; /* 青い細枠線を強制的に適用 */
    border-radius: 4px;
    box-sizing: border-box; 
    line-height: 1.5;
    font-size: 16px; 
    color: #000000;
}

/* 送信ボタンのスタイル調整 */
.site-main #original-contact-form button[type="submit"] {
    display: block;
    width: 100% !important;
    margin-top: 30px;
    padding: 18px 23px; 
    font-size: 15px;
    background: #03c4eb;
    color: #FFFFFF;
    text-transform: uppercase;
    font-weight: 600;
}
/* フォーム全体を囲む青い枠線と影 */
#ask {
    max-width: 600px;
    margin: 30px auto;
    padding: 30px;
    border: 1px solid #1e90ff; /* 青色 */
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    background-color: #ffffff;
}

/* タイトルとサブタイトルのスタイル */
#ask h1, #ask h2, #ask h3 {
    text-align: center;
    color: #333;
    border-bottom: 2px solid #eee;
    padding-bottom: 10px;
    margin-bottom: 25px;
}

/* ラベルのスタイル調整 */
#ask label {
    display: block;
    font-weight: bold;
    margin-top: 20px;
    margin-bottom: 5px;
    color: #1e90ff; /* 青色で強調 */
}

/* 入力フィールド (input/select) の共通スタイル */
#ask input[type="text"], 
#ask input[type="number"], 
#ask select {
    width: 100%;
    padding: 10px 12px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box; /* paddingを含めて幅100%にする */
    font-size: 16px;
}

/* 数量テーブルのスタイル */
.item-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    background-color: #f9f9f9;
}

.item-table th, .item-table td {
    border: 1px solid #ddd;
    padding: 10px;
    text-align: center;
}

.item-table thead th {
    background-color: #1e90ff;
    color: white;
    font-weight: bold;
}

.item-table tfoot td {
    background-color: #e0f7fa; /* 合計行を水色で強調 */
    font-size: 1.1em;
}

/* 数量入力欄の調整 */
.qty-field {
    width: 60px; /* 数量入力欄の幅を狭くする */
    text-align: center;
    padding: 5px;
}

/* ボタンエリア */
.btn_area {
    text-align: center;
    margin-top: 30px;
}

.btn_confirm, .btn_submit, .btn_back {
    padding: 12px 25px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    margin: 5px;
    transition: background-color 0.3s;
}

.btn_confirm, .btn_submit {
    background-color: #1e90ff; /* 青色 */
    color: white;
}

.btn_confirm:hover, .btn_submit:hover {
    background-color: #0066cc;
}

.btn_back {
    background-color: #ccc;
    color: #333;
}

.btn_back:hover {
    background-color: #999;
}

/* 確認画面のテーブル */
.form-confirmation-table {
    width: 100%;
    margin-bottom: 30px;
    border: 1px solid #ddd;
}
.form-confirmation-table th {
    background-color: #f0f0f0;
    width: 30%;
    text-align: left;
    padding: 10px;
    border: 1px solid #ddd;
}
.form-confirmation-table td {
    text-align: left;
    padding: 10px;
    border: 1px solid #ddd;
}

/* エラーメッセージ */
.list_error {
    background-color: #fdd;
    border: 1px solid red;
    padding: 15px;
    margin-bottom: 20px;
    color: #333;
    border-radius: 4px;
}
.list_error li {
    list-style-type: none;
    margin-left: -20px;
}