@import url("common.css");

#contact{
	padding: 0 20px;
	width: 100%;
	max-width: 800px;
	margin: 0px auto 200px;
}
.contact-contents{
	margin: 80px 0 0;
}
.contact p{
	margin: 0 0 10px;
	line-height: 2;
}
.red{
	color: red;
}
.contact-form{

margin: 0px 0 0;

line-height: 1.4;
}
.contact-form dl{
	font-size: 16px;
align-items: center;
display: flex;
flex-wrap: wrap;
}
.contact-form dt,.contact-form dd{
	padding: 20px 0;
}
.contact-form dt{
width: 30%;
}
.contact-form dd{
width: 70%;
}
input[type="text"] {
    width: 100%;
    padding: 14px;
}
.radio-with-input {
    position: relative;
    margin: 0 0 0 30%;
    line-height: 2;
}

/* 2番目のラベル（有り）の横に入力欄を配置するための調整 */
.radio-with-input .pickup-text-field {
    margin-left: 5em;
    margin-top: -3.5em;
}

.pickup-text-field input {
    width: auto;
    display: inline-block;
}
form p{
	margin: 20px 0;
}
form .sub,form .sub-comment{
	margin: 0 0 0 30%;
}
form .sub-comment textarea{
	padding: 14px;
	width: 100%;
	line-height: 1.4;
}
.form-memo{
	margin: 30px 0 0 0;
    font-size: 14px;
    line-height: 1.8;
}
/* 送信・確認ボタンのカスタマイズ */
input[name="submitConfirm"],input[name="confirm"] {
    /* デフォルトスタイルの解除 */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: none;
    outline: none;
    cursor: pointer;

    /* デザイン：ベタ塗りの四角 */
    display: block;          /* 中央寄せのためにブロック化 */
    width: 360px;           /* ボタンの横幅（お好みで） */
    margin: 0 auto;         /* 中央寄せ */
    padding: 35px 0;        /* 上下の余白（ボタンの高さ） */
    background-color: #333; /* ボタンの色（黒系の例） */
    color: #fff;            /* 文字の色（白） */
    
    /* 文字の調整 */
    font-size: 16px;
    text-align: center;
    line-height: 1;
    text-decoration: none;
    
    /* 角を丸くしたくない場合は 0 */
    border-radius: 0;
    
    /* アニメーション（ふわっと色を変える） */
    transition: background-color 0.3s ease;
}

/* ホバー時（マウスを乗せた時）の反応 */
input[name="submitConfirm"]:hover {
    background-color: #555; /* 少し明るくする */
    opacity: 0.8;
}
input[name="confirm"] {
    background-color: #ff8c00; /* 送信ボタンだけオレンジにする場合 */
}
.mw_wp_form .error{
	position: absolute;
}
.mw_wp_form_complete h3{
font-size: 24px;
    margin: 30px 0 30px 0;
}
.mw_wp_form_complete p{
    margin: 0 0 20px 0;
	line-height: 2;
}
.form-text{
    text-align: center;
}
.form-text hr{
    border-bottom: solid #ccc 1px;
}
select[name="kazu"]{
    width: 100px;
}
@media screen and (max-width: 469px){
	.contact-form dl{
		display: block;
	}
	.contact-form dt {
    width: 100%;
    padding: 10px 0 0;
}
.contact-form dd {
    width: 100%;
    padding: 5px 0 20px 0;
}
form p {
    margin: 20px 0 5px;
}
.radio-with-input,form .sub, form .sub-comment{
	margin: 0;
}
.pickup-text-field input,input[name="submitConfirm"],input[name="confirm"] {
    width: 100%;
}
}