@charset "UTF-8";
/* イメージ画像 */
.main-img { background: url("../images/contact_img.webp") no-repeat top center;}

@media screen and (max-width:1199px){
    .main-img { 
        background: url("../images/contact_img.webp") no-repeat top left -400px;
        background-size: auto 100%;}
}

@media screen and (max-width:899px){
    .main-img { 
        background: url("../images/contact_img.webp") no-repeat top left -300px;
        background-size: auto 100%;}
}

@media screen and (max-width:699px){
    .main-img { 
        background: url("../images/contact_img.webp") no-repeat top left -250px;
        background-size: auto 100%;}
}

@media screen and (max-width:599px){
    .main-img { 
        background: url("../images/contact_img.webp") no-repeat top left -350px;
        background-size: auto 100%;}
}

@media screen and (max-width:499px){
    .main-img { 
        background: url("../images/contact_img.webp") no-repeat top left -300px;
        background-size: auto 100%;}
}

@media screen and (max-width:399px){
    .main-img { 
        background: url("../images/contact_img.webp") no-repeat top left -320px;
        background-size: auto 100%;}
}

/**============================================================================================**/

/**============================================================================================**/
/* お問い合わせ */

/* 必須 */
#contact .reqmk {
	display: inline-block; position: absolute; top: 4px; right: 35px;
	margin: 0 0 0 10px; padding: 2px;
	border: solid 1px #C74A4C;
	color: #C74A4C; font-weight: bold;}

/* 入力欄 */
#contact input,
#contact textarea,
#contact select {
	box-sizing: border-box; padding: 3px 8px;
	border: solid 1px #CCC; border-radius: 3px;
	color: #000; font-size: 16px;}

#contact input::placeholder,
#contact textarea::placeholder,
#contact select::placeholder { color: #888;}

#contact input[type="text"],
#contact input[type="email"],
#contact select {height: 34px;}

select[size="5"] {height: auto; margin: 0 0 10px;}

#contact input[type="submit"] { width: 120px; height: auto; padding:10px; font-weight:bold;}
#contact input[type="submit"]:hover,
#contact input[type="button"]:hover {
	background: -webkit-gradient(linear, center top, center bottom, from(#FFF), to(#CCC));
	cursor: pointer;}

#contact input[type="button"] {max-width: 200px; height: auto; padding: 10px;}


#contact select {width: auto;}

*[required],
.required {background: rgba(255, 221, 221, 0.7);}
*[required].dealed,
.required.dealed/*,
.caution*/ {
	background: rgba(223, 240, 216, 1);}

/*--オートコンプリート用--*/
input:-webkit-autofill {box-shadow: 0 0 0px 1000px rgba(223, 240, 216, 1) inset;}

*[readonly] {
	cursor: not-allowed;
	background-color: #eee;
}

/**========================================**/
#contact .dis-tbl_tab { width: 100%; margin: 0 0 40px;}
#contact .dis-tbl_tab > * { display: table-cell; vertical-align: top;}

#contact .dis-tbl_tab p { 
    position: relative; 
    box-sizing: border-box; width: 215px; padding: 8px 75px 0 0; 
    font-weight: bold; line-height: 1.3em;}

/* メールアドレス・お問い合わせ内容 */
#mail,
#other { width: 100%;}

@media screen and (max-width:599px){
    #contact .dis-tbl_tab,
    #contact .dis-tbl_tab > * { display: block;}

    #contact .dis-tbl_tab p { margin: 0 0 10px;}
}

/**============================================================================================**/

/**============================================================================================**/
/* 送信完了 */
#completion { max-width: 600px;}

#completion .dis-tbl_tab { 
    width: 100%; margin: 0 0 30px; padding: 0 0 30px; 
    border-bottom: dotted 1px #333;
    font-size: 1.1em; font-weight: 600;}

#completion .dis-tbl_tab > * { display: table-cell; vertical-align: middle;}
#completion .dis-tbl_tab h1 { width: 150px; padding: 0 30px 0 0;}

@media screen and (max-width:599px){
	#completion .dis-tbl_tab,
	#completion .dis-tbl_tab > * {display: block;}
	
	#completion .dis-tbl_tab h1  {padding: 0 0 10px;}
}

#completion strong {
    display: block; position: relative;
    margin: 0 0 10px; padding: 0 0 0 25px;
    font-size: 18px;}
    
#completion strong::before {
	content: ''; display: inline-block;
	position: absolute; top: 50%; left: 0;
	width: 22px; height: 17px;
	background: url(../images/icon-warning.gif);
    transform: translateY(-50%);}

#completion strong + p { 
    padding: 0 0 30px; 
    border-bottom: dotted 1px #333;
    font-size: 14px;}

#completion a { display: block; width: 200px; height: 40px; margin: 30px auto 0;}
#completion a:hover { opacity: 0.5;}

/* LastUp2025.07.04_kimata */