@charset "utf-8";

/* ===================================================================
テナント出店依頼フォーム 追加スタイル

既存フォーム(/contact/)の common.css / style.css / tablet.css / phone.css は
1文字も変更していない。このフォームで増えた要素だけをここに足している。
　・フォーム切替タブ（/contact/ とを行き来するボタン）
　・セクション見出し（h2）
　・必須未入力のエラー表示
　・補足テキスト
　・テストモードのバナー
=================================================================== */

/*	フォーム切替タブ（お問い合わせ ⇔ テナント出店依頼）
	入力画面だけに置いている。確認画面に置くと入力途中で相手側へ移動でき、
	入力内容が消えて事故になるため。
----------------------------------------------------*/
#main .formSwitch {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
display: -webkit-flex;
display: flex;
max-width: 740px;
margin: 20px auto 0 auto;
}

#main .formSwitch span,
#main .formSwitch a {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-flex: 1 1 50%;
flex: 1 1 50%;
width: 50%;
padding: 12px 5px;
font-size: 15px;
font-weight: bold;
line-height: 1.4;
text-align: center;
text-decoration: none;
border: 1px solid #c5c5d8;
}

/*	角丸は「左右どちらに置かれたか」で決める。
	左=お問い合わせ／右=テナント出店依頼 の並びは固定で、
	今いるフォームがどちら側にも来るため、.current で指定してはいけない */
#main .formSwitch > *:first-child {
border-radius: 4px 0 0 4px;
}

#main .formSwitch > *:last-child {
border-radius: 0 4px 4px 0;
}

/*	隣り合うborderが重なって2pxになるので1px分ぶつける。
	flex: 1 1 50% なので削った1pxは自動で埋まり、外形は740pxのまま */
#main .formSwitch > * + * {
margin-left: -1px;
}

/*	今いるフォーム（リンクではない）
	z-indexで紺のborderを隣の灰色borderより前に出す */
#main .formSwitch .current {
position: relative;
z-index: 1;
color: #FFF;
background: #191978;
border-color: #191978;
}

/*	相手のフォームへのリンク */
#main .formSwitch a {
color: #191978;
background: #f2f2f7;
}

#main .formSwitch a:hover {
background: #e3e3ef;
}


/*	セクション見出し
	既存のh1と同じ色（#191978のライン）で揃え、色味の統一を崩さない

	box-sizing: border-box は必須。
	既存の h1・ステップ・リード文・table・注意事項はいずれも外形740pxで
	左端が揃っている。h2 は左右padding 15px と border-left 5px を持つため、
	content-box のままだと 740+15+15+5 = 775px になって左に18pxはみ出す。
----------------------------------------------------*/
#main h2 {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
max-width: 740px;
margin: 25px auto 10px auto;
padding: 8px 15px;
font-size: 18px;
font-weight: bold;
color: #191978;
background: #FFF;
border-left: 5px solid #191978;
border-bottom: 1px solid #e2e2e2;
}

#main h2:first-of-type {
margin-top: 10px;
}

/*	必須未入力のエラー表示
	.formRequired は既存フォームで定義だけされて使われていなかったクラス名を踏襲
----------------------------------------------------*/
#main .formRequired {
border: 1px solid #D02B2E;
background-color: #FFEEEF;
}

#main .errMsg {
max-width: 740px;
margin: 0 auto 15px auto;
padding: 10px 15px;
font-size: 15px;
font-weight: bold;
color: #D02B2E;
background: #FFEEEF;
border: 1px solid #D02B2E;
}

#main .errText {
display: block;
margin-top: 5px;
font-size: 13px;
color: #D02B2E;
}

/*	補足テキスト
----------------------------------------------------*/
#main td .note {
margin-top: 5px;
font-size: 13px;
color: #666;
}

/*	入力欄
	既存の size 属性ベースの見た目を保ちつつ、はみ出しだけ防ぐ
----------------------------------------------------*/
#main input,
#main select,
#main textarea {
max-width: 100%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

#main .prefSelect {
min-width: 160px;
}

/*	戻るボタン（既存フォームは .backBt に指定が無く素のボタンなので合わせる）
----------------------------------------------------*/
#main .b_btn {
width: auto;
text-align: center;
}

/*	テストモードのバナー
----------------------------------------------------*/
.testBar {
padding: 10px 14px;
font-size: 13px;
line-height: 1.7;
font-weight: bold;
color: #fff;
text-align: center;
background: #D02B2E;
}

.testBar span {
display: inline-block;
margin: 0 .6em;
font-weight: normal;
}


/* ===================================================================
タブレット・スマホ
ウィンドウ幅[0～1023px]
=================================================================== */
@media screen and (max-width: 1023px) {

#main .formSwitch {
margin-top: 0;
}

#main .formSwitch span,
#main .formSwitch a {
padding: 10px 4px;
font-size: 14px;
}

#main h2 {
margin: 20px 0 10px 0;
font-size: 17px;
}

#main h2:first-of-type {
margin-top: 0;
}

/*	既存 tablet.css は input[name=tel] という「名前指定」で幅100%にしているため
	このフォームの i_tel は対象外になる。type で指定して拾う              */
#main input[type=tel],
#main input[type=email],
#main input.wide {
width: 100%;
font-size: 16px;
}

#main .prefSelect {
width: 100%;
font-size: 16px;
}

#main textarea {
width: 100%;
font-size: 16px;
}

#main td .note {
margin-top: 8px;
}

}