@charset "utf-8";
/* CSS Document */


/*-----------------------------
  ラベル選択エリア　1010追加
-----------------------------*/

.selectbox {
  grid-template-columns: 1fr 1fr; /* 2列のグリッド */
}

.selectbox label {
  border: 1px solid #696969; /* 初期状態の枠線 */
  padding: 20px;
  display: flex; /* ラジオボタンとテキストを横並びに */
  align-items: center; /* ラジオボタンを垂直方向に中央揃え */
  cursor: pointer;
  width: 70%; /* グリッド内でフル幅に */
    border-radius: 20px;
    margin:20px;
}

.selectbox label input[type="radio"] {
  margin-right: 10px; /* ラジオボタンとテキストの間に余白 */
}

.selectbox label.active {
  border-color: red; /* チェックされたときの枠線の色 */
}

/* チェック時のラジオボタンの色を変えたい場合 */
.selectbox input[type="radio"] {
  accent-color: red; /* チェック時の色を赤に変更 */
}

@media screen and (max-width: 600px),print {
    .selectbox {
        grid-template-columns: 1fr; /* 1列のグリッド */
    }
    .selectbox label {
        width: 90%; /* グリッド内でフル幅に */
}