body {
    font-family: Arial, sans-serif;
    background-color: #f7f7f7;
    width: 800px;
    margin: 0 auto;
    padding: 0;
}

.container {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
    background-color: #fff;
}

header {
    text-align: center;
    margin-bottom: 20px;
}

#main_title {
    text-align: center;
    margin: 20px 0;
    font-size: 3em;
    color: #333;
  }
  
  .circle {
    display: inline-block;
    background-color: #b5d5f9; 
    border-radius: 50%;
    padding: 10px 20px;
  }
  
  .circle .small {
    font-size: 0.5em;
    top: 2px;
    position: relative;
  }
  
  .circle .title {
    display: inline;
    font-size: 1.5em; /* Adjust based on overall balance */
    color: #000; /* Ensure it stands out */
  }
  

/* h2 {
    font-size: 2em;
    margin: 0;
} */

h3 {
    font-size: 1.25em;
    margin: 0;
    color: #333;
}


p {
    margin: 5px 0 20px;
    color: #666;
}

.form-group {
    margin-bottom: 15px;
}

.form-group .index{
    font-weight: bold;
    font-size: 1.2em;
    color: #3b3b3b;
    margin: 0;
}

label {
    display: block;
    margin-bottom: 5px;
}

input[type="text"],
input[type="tel"],
select {
    width: calc(100% - 22px);
    padding: 10px;
    margin: 5px 0;
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.name-input {
    display: flex;
    justify-content: space-between;
}

.name-input input {
    width: 48%;
}

button {
    display: block;
    width: 30%;
    margin: 0 auto;
    padding: 10px;
    background-color: #009688;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

button:hover {
    background-color: #00796b;
}

/* 送信ボタンのデフォルトスタイル */
#submit-form {
    background-color:  #009688;
    color: #ffffff;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

#submit-form:hover {
    background-color: #00796b;
}

/* 無効化された送信ボタンのスタイル */
#submit-form.disabled {
    background-color: #cccccc;
    color: #ffffff;
    cursor: not-allowed;
}

/* 確認画面のボタン */
.button-group {
    display: flex;
}


/* 戻るボタン */
#back-button {
    background-color: #c62828; /* 赤系の背景色 */
    color: #fff; /* 白系の文字色 */
    border: none;
    border-radius: 4px;
    padding: 10px 20px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

#back-button:hover {
    background-color: #922323; /* ホバー時の背景色 */
}

.admin-img{
    border: #666 2px solid;
    border-radius: 5px;
    opacity: 0.05;
}
.admin-img:hover{
    opacity: 1;
    transition: 0.3s;
}


.required {
    background-color: red;
    color: white;
    padding: 2px 5px;
    border-radius: 4px;
    font-size: 12px;
}

.zipcode-container {
    display: flex;
    align-items: center;
}

.zipcode-container input {
    width: 48%;
}

.zipcode-container button {
    width: 40%;
    padding: 10px;
    margin: 5px;
    background-color: #009688;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin-left: 25px;
}

.zipcode-container button:hover {
    background-color: #00796b;
}

.caution {
    margin-top: 20px;
    text-align: center;
    color: #e53935;
    border: none;
    font-size: 1em;
    font-weight: 600;
}





/* メディアクエリを使ってスマホ用のスタイルを追加 */
@media (max-width: 600px) {
    .container {
        padding: 5px;
    }

    .name-input {
        flex-direction: column;
    }

    .name-input input {
        width: 50%;
        margin-bottom: 5px;
    }
    
    /* スクロールバーが出ないように微調整 */
    input[type="text"],
    input[type="tel"],
    select {
        width: calc(100% - 20px); 
    }

    .zipcode-container {
        flex-direction: column;
        align-items: flex-start;
    }

    .zipcode-container button {
        width: 50%;
        margin: 10px auto;
    }

    table {
        width: 100%;
        border-collapse: collapse;
        margin: 0;
    }
}