@charset "utf-8";

/*　--------------------------------------------------　共通項目　*/

.fColumn{display:none}

#content .security{ margin: 30px 0px 50px 70px; }
#content .security a img{ float: left; margin: 0px 20px 0px 0px; vertical-align: middle; }
#content .security p{ padding: 18px 0px 0px; }

@media only screen and (max-width: 640px) {
	#content .security{ margin: 20px 5px; }
	#content .security a img{ float: none; display: block; margin: 0px auto; text-align: center; }
	#content .security p{ float: none; padding: 5px 30px; font-size: 0.9em; }
}

input[type=radio]{ width: 18px; height: 18px; vertical-align: middle; }
input[type=radio] { -moz-transform-origin: right bottom; -moz-transform: scale( 1.2 , 1.2 ); }

/*　--------------------------------------------------　共通 - table　*/

#content table{ width: 700px; margin: 40px 0px 20px 10px; padding: 20px 10px 0px; border-top: 7px #efefef solid; }
#content table td{ border-bottom: 1px #afafaf dotted; }
#content table td.last{ border-bottom: none; }

/* テーブル内左メニュー用 */
#content table tr td { padding: 15px 0px; color: #191919; text-align: left; }
#content table tr td:first-child{ width: 150px; margin: 0px; padding: 15px 25px 15px 0px; font-weight: bold; text-align: right; }

body#naire #content table tr td { font-weight: bold; }
body#naire #content table tr td:first-child{ width: 200px; }
body#naire #content #imgupload table tr td:first-child{ width: 200px; }


@media only screen and (max-width: 640px) {
	#content table{ width: 100%; margin: 20px 0px; padding: 15px 0px 0px; border-top: 5px #efefef solid; }

	/* テーブル内左メニュー用 */
	#content table tr td{ display: block; width: auto; margin: 0px 10px 10px; padding: 10px 0px; color: #191919; font-size: 0.8em!important; text-align: left; }
	#content table tr td:first-child{ display: block; width: auto; margin: 0px 10px; padding: 10px 0px 0px; font-weight: bold; text-align: left; border: none; }

	body#naire #content table tr td { font-weight: bold; }
	body#naire #content table tr td:first-child{ width: auto; }
	body#naire #content #imgupload table tr td:first-child{ width: auto; }
}



/* 必須・任意のアイコン用 */
#content table tr td span{ padding: 0px 35px 0px 0px; }
#content table tr td span.must,#content table tr td span.must2{ background: url(../img/icon-must.gif) right top no-repeat; }
#content table tr td span.arbitrary{ background: url(../img/icon-arbitrary.gif) right top no-repeat; }

/* 入力フォーム系の装飾 */
#content table tr td input{ padding: 7px; font-size: 1.2em; border: 3px #ccc solid; border-radius: 7px; -webkit-border-radius: 4px; -moz-border-radius: 4px; }
#content table tr td textarea{ width: 400px; height: 300px; margin: 0px; padding: 7px; font-size: 1.2em; border: 3px #ccc solid; border-radius: 7px; -webkit-border-radius: 4px; -moz-border-radius: 4px; }
body#naire #content table tr td textarea{ width: 600px; height: 80px; font-weight: bold; }

#content table tr td input[type="text"]:hover,
#content table tr td select:hover,
#content table tr td textarea:hover{ border: 3px #403d44 solid; background-color: #fffcce; border-radius: 5px;  }

#content table tr td input[type="text"]:focus,
#content table tr td select:focus,
#content table tr td texxtarea:focus{ border: 3px #ed9c3c solid; background-color: #ffffdd; border-radius: 5px; }

body#naire #content table tr td input[type="text"]{ width: 600px; font-weight: bold; margin-right: 10px; }
body#naire #content table tr td label{ margin: 0px 15px 0px 0px; }

/*梵字用*/
body#naire #content table tr td ul.bonji li{ float: left; width: 100px; margin: 0px 20px 10px 0px; text-align: center; font-size: 0.9em; }
body#naire #content table tr td ul.bonji li label{ width: 100px; line-height: 24px; text-align: center; }
body#naire #content table tr td ul.bonji li label input{ margin: 0px 0px 0px 18px; }

@media only screen and (max-width: 640px) {
	/* 必須・任意のアイコン用 */
	#content table tr td span{ padding: 3px 0px 10px 35px; }
	#content table tr td span.must,#content table tr td span.must2{ background: url(../img/icon-must.gif) left top no-repeat; }
	#content table tr td span.arbitrary{ background: url(../img/icon-arbitrary.gif) left top no-repeat; }

	#content table tr td input{ width: 90%; font-size: 1.0em; }
	#content table tr td textarea{ width: 90%; height: 200px; }

	body#contact #content .submitBtnBox{ text-align: center !important; }
	body#contact #content .submitBtnBox input[type="button"]{ display: inline; width: 35% !important; height: auto !important; margin: 15px 1px 0px !important; padding: 10px 0px !important; cursor: pointer; }
	body#contact #content .submitBtnBox input[type="submit"]{ display: inline; width: 55% !important; height: auto !important; margin: 15px 1px 0px !important; padding: 10px 0px !important; cursor: pointer; }


	body#naire #content table tr td textarea{ width: 90%; height: auto; font-weight: bold; }
	body#naire #content table tr td input[type="text"]{ width: auto; font-weight: bold; margin-right: 10px; }
	body#naire #content table tr td label{ margin: 0px 15px 0px 0px; }

	/*梵字用*/
	body#naire #content table tr td ul.bonji li{ float: left; width: 25%; margin: 0px 0px 10px 0px; text-align: center; font-size: 0.9em; }
	body#naire #content table tr td ul.bonji li label{ width: 100px; line-height: 18px; text-align: center; }
	body#naire #content table tr td ul.bonji li label input{ margin: 0px 0px 0px 10px; }
}



/*　--------------------------------------------------　名入れフォーム　*/

/* 名入れ用・再設定 */
body#naire #content{ float: none; width: 980px; margin-bottom: 50px; }
body#naire #content h3{ margin: 50px 20px 0px; }
body#naire #content table{ width: 920px; margin: 25px 0px 0px 30px; border: 5px #efefef solid; border-radius: 7px; }

@media only screen and (max-width: 640px) {
	body#naire #content{ float: none; width: auto; margin-bottom: 0px; }
	body#naire #content h3{ margin: 30px 0px 0px; }
	body#naire #content table{ width: 96%; margin: 25px 2% 0px; border: 5px #efefef solid; border-radius: 7px; }

	body#naire #content table tr:nth-child(3) td label{ display: inline-block; margin: 5px 3px 0px; padding: 0px; text-align: center; }
	body#naire #content table tr:nth-child(4) td label{ display: inline-block; margin: 5px 3px 0px; padding: 0px; text-align: center; }

	body#naire #content .submitBtnBox{ text-align: center !important; }
	body#naire #content .submitBtnBox input[type="button"]{ display: inline; width: 35% !important; height: auto !important; margin: 15px -2px 0px !important; padding: 10px 0px !important; cursor: pointer; }
	body#naire #content .submitBtnBox input[type="submit"]{ display: inline; width: 55% !important; height: auto !important; margin: 15px -2px 0px !important; padding: 10px 0px !important; cursor: pointer; }


	body#naire #content input[type="file"] { width: 90% !important; }

}

/* エラーメッセージ用 */
tr td span.errorMsg,tr th span.errorMsg { display: none; }
tr.error td span.errorMsg,tr.error th span.errorMsg{ clear: both; display: block; padding: 5px 0px; color: #cc1111; font-weight: bold; }
input.error { background-color: #fcc; }
tr.error th, tr.error td{ background-color : #ffcccc; }
tr.error td input, tr.error td textarea, tr.error td select{ background-color : #ffdddd; border-color : #cc1111; }

/*#imgupload, #imgupload_self { display : none; }*/
.bottomError{ display : block; color: #c11; font-weight: bold; }


/*　--------------------------------------------------　微設定　*/

.in_margin { margin: 0px 0px 5px; }
.in_margin2 { margin: 5px 0px 0px; }
.txt_10red { font-size: 10px; color: #F00; }
.txt_red { color: #F00; }
.txt_info { padding: 10px 0; }
.txt_10 { font-size: 10px; }
a.wl { color:#FFFFFF; font-style:normal; text-decoration:underline; }
a:link .wl { color:#FFFFFF; font-style:normal; text-decoration:underline; }
a:visited .wl { color:#FFFFFF; text-decoration:underline; }
a:hover .wl { color:#FFFFFF; font-style:normal; text-decoration:underline; }
a:active .wl { text-decoration:none; }

input.w50{ width: 50px !important; }
input.w100{ width: 100px !important; }
input.w150{ width: 150px !important; }
input.w200{ width: 200px !important; }
input.w250{ width: 250px !important; }
input.w300{ width: 300px !important; }
input.w350{ width: 350px !important; }
input.w400{ width: 400px !important; }
input.w600{ width: 600px !important; }

@media only screen and (max-width: 640px) {
	input.w50{ width: 90% !important; }
	input.w100{ width: 90% !important; }
	input.w150{ width: 90% !important; }
	input.w200{ width: 90% !important; }
	input.w250{ width: 90% !important; }
	input.w300{ width: 90% !important; }
	input.w350{ width: 90% !important; }
	input.w400{ width: 90% !important; }
	input.w600{ width: 90% !important; }
}



/*　--------------------------------------------------　新しいフォームの仕組み用（contact_new から追加）　*/

/* ボット対策のダミー欄（人には見せない） */
.hp-field { position: absolute; left: -9999px; height: 0; overflow: hidden; }

/* 入力チェック（validationEngine）の吹き出し */
/* Z-INDEX */
.formError { z-index: 990; }
.formError .formErrorContent { z-index: 991; }
.formError .formErrorArrow { z-index: 996; }
.ui-dialog .formError { z-index: 5000; }
.ui-dialog .formError .formErrorContent { z-index: 5001; }
.ui-dialog .formError .formErrorArrow { z-index: 5006; }
.inputContainer { position: relative; float: left; }
.formError { position: absolute; top: 300px; left: 300px; display: block; cursor: pointer; text-align: left; }
.formError.inline { position: relative; top: 0; left: 0; display: inline-block; }
.ajaxSubmit { padding: 20px; background: #55ea55; border: 1px solid #999; display: none; }
.formError .formErrorContent { width: 100%; background: #ee0101; position:relative; color: #fff; min-width: 100px; font-size: 11px; border: 2px solid #ddd; box-shadow: 0 0 6px #000;
  -moz-box-shadow: 0 0 6px #000;  -webkit-box-shadow: 0 0 6px #000; -o-box-shadow: 0 0 6px #000;padding: 4px 10px 4px 10px; border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; -o-border-radius: 6px; }
.formError.inline .formErrorContent { box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none; -o-box-shadow: none; border: none; border-radius: 0; -moz-border-radius: 0; -webkit-border-radius: 0; -o-border-radius: 0; }
.greenPopup .formErrorContent { background: #33be40; }
.blackPopup .formErrorContent { background: #393939; color: #FFF; }
.formError .formErrorArrow { width: 15px; margin: -2px 0 0 20px; position:relative; }
body[dir='rtl'] .formError .formErrorArrow, body.rtl .formError .formErrorArrow { margin: -2px 13px 0 0; }
.formError .formErrorArrowBottom { box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none; -o-box-shadow: none; margin: 0px 0 0 12px; top:2px; }
.formError .formErrorArrow div { border-left: 2px solid #ddd; border-right: 2px solid #ddd; box-shadow: 0 2px 3px #444; -moz-box-shadow: 0 2px 3px #444; -webkit-box-shadow: 0 2px 3px #444; -o-box-shadow: 0 2px 3px #444; font-size: 0px; height: 1px; background: #ee0101; margin: 0 auto; line-height: 0; font-size: 0; display: block; }
.formError .formErrorArrowBottom div { box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none; -o-box-shadow: none; }
.greenPopup .formErrorArrow div { background: #33be40; }
.blackPopup .formErrorArrow div { background: #393939; color: #FFF; }
.formError .formErrorArrow .line10 { width: 13px; border: none; }
.formError .formErrorArrow .line9 { width: 11px; border: none; }
.formError .formErrorArrow .line8 { width: 11px; }
.formError .formErrorArrow .line7 { width: 9px; }
.formError .formErrorArrow .line6 { width: 7px; }
.formError .formErrorArrow .line5 { width: 5px; }
.formError .formErrorArrow .line4 { width: 3px; }
.formError .formErrorArrow .line3 { width: 1px; border-left: 2px solid #ddd; border-right: 2px solid #ddd; border-bottom: 0 solid #ddd; }
.formError .formErrorArrow .line2 { width: 3px; border: none; background: #ddd; }
.formError .formErrorArrow .line1 { width: 1px; border: none; background: #ddd; }
form .formError + input, form .formError + select, form .formError + textarea{ border-color: #c8151e; background-color: #fff4f4; }
form .formError + input::placeholder, form .formError + textarea::placeholder{ color: #c8151e; }

/* 写真で送る名入れ：写真の見本（スマホの写真をそのまま出すと、横長の写真で表の枠が広がってはみ出すため、大きさの上限を付ける） */
#content table tr td img.photo-preview{ display: block; width: auto; height: auto; max-width: 480px; max-height: 200px; }
#content table tr td img.photo-thumb{ display: block; width: auto; height: auto; max-width: 240px; max-height: 100px; margin: 5px 0px 0px; }

@media only screen and (max-width: 640px) {
	#content table tr td img.photo-preview{ max-width: 100%; }
	#content table tr td img.photo-thumb{ max-width: 100%; }
}
#content table tr td .photo-pick-error{ display: block; margin: 5px 0px 0px; color: #dd0000; }

/* 入力画面（スマホ）：今の /contact/・/contact/naire.php などと同じ行の間隔にする
   今のフォームは form.js が各行の入力欄の下に空の span（errorMsg）を足していて、スマホでは上の「td span」の余白（上3px・下10px）の分だけ行が広い */
@media only screen and (max-width: 640px) {
	body#contact #form table tr td + td::after,
	body#naire #form table tr td + td::after{ content: ""; display: block; padding: 3px 0px 10px 35px; }
}