@charset "UTF-8";

/* フォーム全体のスタイル */
input,
select {
height: 1.4em;
padding: 5px;
font-size: 1.5em;
}
input[type="checkbox"],
input[type="radio"] {
	width: 20px;
	height: 20px;
}

.form-table {
    display: table;
    width: 100%;
    max-width: 1200px;
    margin: auto;
    background: #FFFFFF;
}

.form-row {
    display: block;
    margin-bottom: 15px;
}

.form-cell {
    display: inline-block;
    vertical-align: middle;
    margin-right: 10px; /* ラベルと入力欄の間隔 */
}

.form-cell label,
.colabel {
    display: inline-block;
    text-align: center;
    width: 120px; /* ラベルの固定幅 */
    font-weight: bold;
}

.form-cell input,
.form-cell textarea,
.form-cell select,
.coinput {
    display: inline-block;
    width: 680px; /* 入力欄の幅を固定 */
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box;
	text-align: left;
}
.form-cell textarea {
		height: 15em;
}

.form-label-cell {
    display: inline-block;
    font-weight: bold;
    vertical-align: middle;
}

.form-input-cell {
    display: inline-block;
	width: 680px;
	text-align: center;
}

.radio-inline {
    margin-right: 15px;
	text-align: center;
}

.form-radio-container {
	display: flex;
	width: 100%;
    white-space: nowrap;
}

.form-radio-container .radio-inline {
    display: inline-flex;
    margin-right: 10px;
}

/* ボタンスタイル */
input[type="submit"],
button {
    background: #000000; /* ボタンの背景 */
    color: #FFFFFF;
    padding: 10px 20px;
    font-size: 16px;
    font-weight: bold;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: block;
    margin: 20px auto 0;
}

input[type="submit"]:hover,
button:hover {
    background: #333; /* ホバー時 */
}

/* スマホ対応 */
@media screen and (max-width: 800px) {
    .form-table {
        display: block;
    }

    .form-row {
        display: block;
        margin-bottom: 15px;
    }

    .form-cell {
        display: block;
        width: 100%;
    }

    .form-cell label,
	.colabel {
        text-align: left;
        width: 100%;
        margin-bottom: 5px;
    }

.form-cell input,
.form-cell textarea,
.form-cell select,
.coinput {
        width: 100%;
        max-width: 100%; /* モバイルでは余白なし */
    }
	.form-input-cell {
		width: 100%;
	}
}

.select-box {
    position: relative;
    display: inline-block;
    width: 100%;
}

.select-box select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background: white;
    font-size: 16px;
    cursor: pointer;
}

/* 矢印のスタイル */
.select-box::after {
    content: "▼";
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    color: gray;
    pointer-events: none;
}
/* iPhoneのフォーム拡大防止 */
@supports (-webkit-touch-callout: none) {
    input, textarea, select {
        font-size: 18px;
    }
}