/* --------------------------------------
 * 1. ベースレイアウト
 * -------------------------------------- */
 #formWrap {
    width: 700px;
    margin: 30px auto; /* 上下の余白を増やし、より中央感と余裕を持たせる */
    padding: 30px;
    background-color: #ffffff; /* 白い背景 */
    border-radius: 10px; /* 角を丸く */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* 影をつけて浮き立たせる */
    color: #333333; /* 文字色を濃いグレーに */
    line-height: 150%;
    font-size: 85%; /* ベースフォントサイズを調整 */
    font-family: 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', sans-serif;
}

/* フォームのタイトル画像 */
.bath-copy img.bcopy {
    margin-bottom: 20px;
}

/* フォーム全体の説明テキスト */
.business-info-text {
    text-align: center;
    margin-top: 20px;
    margin-bottom: 30px;
    font-size: 1.1em;
}

/* --------------------------------------
 * 2. フォームグループとラベル
 * -------------------------------------- */
.groupDiv {
    margin-bottom: 25px; /* グループ間の余白を調整 */
    padding-bottom: 15px;
    border-bottom: 1px solid #eeeeee; /* グループを薄い線で区切る */
}

.groupDiv:last-of-type {
    border-bottom: none;
}

/* フォーム項目名のスタイル */
.box_contact1 p {
    font-weight: bold;
    color: #004c99; /* 項目名を濃い青に */
    margin-bottom: 8px;
    font-size: 1.1em;
}

/* 必須マークのスタイル */
.required-star {
    color: #e30000; /* 強い赤 */
    font-size: 1.2em; /* サイズを調整 */
    margin-left: 5px;
    vertical-align: middle;
}

/* コメント/補足テキストのスタイル */
.comment {
    color: #666666;
    font-size: 0.9em;
    margin-top: 8px;
    padding-left: 5px; /* 入力フィールドとの位置を揃える */
}

/* --------------------------------------
 * 3. 入力フィールド (Input/Select/Textarea)
 * -------------------------------------- */
input[type="text"],
select,
textarea.text_area {
    width: 100%; /* 親要素(groupDiv)のpadding内で100%に */
    max-width: 500px; /* PCでの最大幅を設定 */
    padding: 10px 12px;
    font-size: 1.0em;
    border: 1px solid #cccccc;
    border-radius: 5px; /* 角を丸く */
    transition: border-color 0.3s, box-shadow 0.3s;
    box-sizing: border-box;
    -webkit-appearance: none; /* iOSでのデフォルトスタイルを無効化 */
}

input[type="text"]:focus,
select:focus,
textarea.text_area:focus {
    border-color: #007bff; /* フォーカス時に青い枠線 */
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.2);
    outline: none;
}

textarea.text_area {
    height: 120px;
    resize: vertical; /* 縦方向のみリサイズ可能 */
}

/* Selectのスタイル調整 */
select {
    background-color: #f9f9f9;
}


/* --------------------------------------
 * 4. チェックボックス (連絡可能時間帯)
 * -------------------------------------- */
fieldset[data-role="controlgroup"] {
    border: none;
    padding: 0;
    margin: 0;
    display: flex; /* チェックボックスを横並びにする */
    flex-wrap: wrap; /* 必要に応じて折り返す */
    gap: 15px; /* チェックボックス間のスペース */
}

fieldset[data-role="controlgroup"] label {
    font-size: 1.0em;
    cursor: pointer;
    background: #f4f4f4;
    padding: 8px 15px;
    border-radius: 5px;
    border: 1px solid #e0e0e0;
    transition: background-color 0.2s;
}

fieldset[data-role="controlgroup"] input[type="checkbox"] {
    /* チェックボックス本体を非表示にし、ラベルで操作させる */
    display: none;
}

fieldset[data-role="controlgroup"] input[type="checkbox"]:checked + label {
    background-color: #d1e7ff; /* 選択時の背景色 */
    border-color: #007bff;
    color: #004c99;
    font-weight: bold;
}

/* --------------------------------------
 * 6. 送信ボタン
 * -------------------------------------- */
input[type="submit"].btn-square- {
    display: block; /* ブロック要素にして中央寄せを維持 */
    width: 300px; /* ボタンの幅を調整 */
    margin: 40px auto 10px auto; /* 上下の余白を増やす */
    padding: 12px 25px;
    text-decoration: none;
    background: #007bff; /* プロフェッショナルな青 */
    color: #FFF;
    border-bottom: solid 4px #0056b3; /* 影を濃い青に */
    border-radius: 5px;
    cursor: pointer;
    font-size: 1.2em; /* ボタンの文字を大きく */
    font-weight: bold;
    transition: background 0.3s, transform 0.1s;
}

input[type="submit"].btn-square-:hover {
    background: #0056b3; /* ホバーで色を濃く */
}

input[type="submit"].btn-square-:active {
    -webkit-transform: translateY(3px);
    transform: translateY(3px);
    border-bottom: solid 1px #0056b3; /* クリック時の影を浅く */
}

/* --------------------------------------
 * 7. レスポンシブ対応 (Media Queries)
 * -------------------------------------- */
.pc-hidden {
    display: none;
}

@media screen and (max-width: 768px) {
    #formWrap {
        width: 100%;
        margin: 10px 0;
        padding: 15px;
        box-shadow: none; /* スマホでは影を削除 */
        border-radius: 0;
    }

    /* 全ての入力関連要素の幅を100%に */
    input[type="text"],
    select,
    textarea.text_area {
        max-width: 100%;
    }

    .box_contact1 p {
        font-size: 1.0em;
    }

    .urgent-notice-box {
        margin: 15px 0;
        padding: 10px;
        flex-direction: column; /* スマホではアイコンとテキストを縦並びに */
    }

    .urgent-notice-box::before {
        margin-right: 0;
        margin-bottom: 5px;
    }

    .urgent-notice-text {
        font-size: 0.95em;
        line-height: 1.5;
    }

    .pc-hidden {
        display: block; /* 改行を有効にする */
    }

    input[type="submit"].btn-square- {
        width: 90%;
        font-size: 1.1em;
        padding: 15px 10px;
    }
}

/* --------------------------------------
 * 5. 注意書き (Urgent Notice) - テキストのみ赤字
 * -------------------------------------- */
 .urgent-notice-box {
    /* ボックスの装飾（背景・枠線）を削除 */
    background-color: transparent; 
    border: none; 
    
    /* レイアウト調整 */
    margin: 20px auto; /* 上下の余白 */
    padding: 0;        /* 内部の余白をなくす */
    max-width: 650px;
    text-align: center; /* テキストを中央揃え */
}

/* アイコン（⚠️）を非表示にする */
.urgent-notice-box::before {
    display: none;
    content: none;
}

.urgent-notice-text {
    color: #cc0000; 
    font-size: 0.7rem; 
    line-height: 1.8;
    font-weight: normal; /* 太字にはせずフラットに */
}
/* --------------------------------------------------
  メタリックブルーボタン（送信ボタン用）
   -------------------------------------------------- */
   .btn-metallic-blue {
    display: inline-block;
    padding: 15px 60px;       /* 横幅を広めに調整 */
    font-size: 18px;
    font-weight: bold;
    color: #ffffff !important; /* 文字色：白（強制） */
    text-decoration: none;
    text-align: center;
    border: none;             /* 枠線を消す */
    border-radius: 5px;       /* 角丸 */
    
    /* メタリックなグラデーション背景 */
    background: linear-gradient(to bottom, #2980b9, #1c5a85);
    
    /* 金属的な光沢と立体的な影 */
    box-shadow: 
      inset 0 1px 0 rgba(255, 255, 255, 0.4), /* 上部のハイライト */
      0 2px 4px rgba(0, 0, 0, 0.3); /* 全体の影 */
    text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.5); /* 文字の影 */
    
    transition: all 0.3s ease;
    cursor: pointer;
    -webkit-appearance: none; /* スマホでのデフォルト装飾を解除 */
  }
  
  /* ホバー時の動作 */
  .btn-metallic-blue:hover {
    background: linear-gradient(to bottom, #3498db, #2980b9);
    box-shadow: 
      inset 0 1px 0 rgba(255, 255, 255, 0.5),
      0 4px 8px rgba(0, 0, 0, 0.4);
    transform: translateY(-2px); /* 少し浮き上がる */
  }
  .bcopy {
    /* width: 100%; から下記に変更 */
    width: 80%;        /* 横幅を画面（親要素）の80%にする */

    /* その他の設定はそのまま維持 */
    max-width: 1000px; /* 【任意】PCでこれ以上広げたくない上限値 */
    height: auto;      /* 高さは自動調整 */
    display: block;    /* ブロック要素化 */
    margin: 20px auto; /* 上下20pxの余白、左右は自動で中央寄せ */
}

/* --------------------------------------
 * 全体のボックスサイズ計算を統一（必須）
 * これがないとpadding分だけはみ出します
 * -------------------------------------- */
 #formWrap, #formWrap * {
    box-sizing: border-box;
}

/* --------------------------------------
 * 1. ベースレイアウト（PC・スマホ共通の基本設定）
 * -------------------------------------- */
#formWrap {
    /* PCでは最大700px、それ以下の画面では横幅95%～90%に可変させる */
    width: 95%; 
    max-width: 700px; 
    margin: 30px auto;
    padding: 30px; /* スマホでは少し広すぎるので下で調整します */
    
    background-color: #ffffff;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    color: #333333;
    line-height: 150%;
    font-size: 85%;
    font-family: 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', sans-serif;
}

/* --------------------------------------
 * fieldset（チェックボックスエリア）の修正
 * 元コードで width: 300px と固定されていたため修正
 * -------------------------------------- */
#formWrap fieldset {
    width: 100%; /* 親要素に合わせて広げる */
    margin: 0;
    padding: 0;
    border: none;
}

/* --------------------------------------
 * スマホ用レスポンシブ対応（上書き設定）
 * -------------------------------------- */
@media screen and (max-width: 768px) {
    #formWrap {
        /* スマホ表示での幅を90%～95%に設定 */
        width: 94%; 
        margin: 15px auto; /* 上下15px、左右自動（中央寄せ） */
        padding: 15px; /* 余白を少し狭くして入力エリアを確保 */
        
        box-shadow: none;
        border-radius: 5px;
    }

    /* 入力フィールドの文字サイズ調整（小さすぎるとズームされるため） */
    input[type="text"],
    select,
    textarea.text_area {
        width: 100%;
        max-width: 100%; /* 親要素からはみ出さない */
        font-size: 16px; /* スマホで入力しやすいサイズ */
        box-sizing: border-box;
    }

    /* 必須項目の「*」が改行されないように調整 */
    .box_contact1 p {
        font-size: 0.95rem;
        display: inline-block; /* 必要に応じて */
    }

    /* チェックボックスを縦並びにして押しやすくする（任意） */
    fieldset[data-role="controlgroup"] {
        gap: 10px;
    }
    fieldset[data-role="controlgroup"] label {
        width: 100%; /* ボタンを横幅いっぱいに */
        text-align: center;
        padding: 10px;
    }
}