@charset "utf-8";

.errMsg {
	margin-left: 1em;
	padding-bottom: 1px;
	display: block;
	line-height: 1.4;
	text-indent: -.9em;
	text-align:left;
}

.formError {
    position: relative;   /* JSによる絶対配置(浮遊)を無効化 */
    display: block;       /* ブロック要素として改行させる */
    top: auto;            /* 上位置のズレをリセット */
    left: auto;           /* 左位置のズレをリセット */
    margin-top: 0;        /* 入力欄との隙間をなくす */
    margin-bottom: 10px;  /* 次の要素との余白 */
    width: auto;          /* 幅なりゆき */
    padding-bottom: 0;    /* 余計な余白を削除 */
    z-index: 99;
}
.fixed {
	padding-bottom: 0;
}

/*div.userformError + span {
   display:table-cell;
   padding-left:5px;
   vertical-align:bottom;
}*/

.fixed .formErrorClose {
		display: none;
}

.formErrorContent {
	position: relative;
	background: #FFF;
	border: 1px solid #E50000;
	width: 180px;
	padding: 6px 10px;
	font-size: 11px;
	margin-top: -3px;     /* 矢印(約10px)の分だけ下げる */
    box-shadow: 0px 2px 4px rgba(0,0,0,0.2); /* 視認性を上げる影（任意） */

}

.fadeOut {
	opacity: .2;
	filter: alpha(opacity=20);
}
/* ▼▼▼ 三角形の描画修正（box-shadow版） ▼▼▼ */

/* 1. 古い設定（:after）は使わないので消す */
.formErrorContent:after {
    display: none;
}

/* 2. 正方形を回転させて三角形（ツノ）を作る */
.formErrorContent:before {
    content: "";
    position: absolute;
    bottom: 100%;            /* 吹き出しの上に配置 */
    left: 20px;              /* 左からの位置（お好みで調整可） */
    width: 10px;             /* 三角形のサイズ */
    height: 10px;
    background: #FFF;        /* 背景色 */
    
    /* borderではなくbox-shadowで線を描く（拡大縮小に強い） */
    border: none !important;
    box-shadow: -0.75px -0.75px 0 #E50000; /* 左と上に1pxの赤い影 */
    
    /* 45度回転させてひし形にする */
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    
    /* 本体との隙間を埋める微調整 */
    margin-bottom: -5px; 
    
    /* 描画を安定させるおまじない */
    z-index: 2;
    pointer-events: none;
}

/* スマホ表示時の位置微調整 */
@media only screen and (max-width: 768px) {
    .formErrorContent:before {
        left: 15px !important;
    }
}
/* ▲▲▲ 修正ここまで ▲▲▲ */


/* textareaの直後に来るエラーメッセージだけ、位置を上に引き上げる */
textarea + .formError {
    margin-top: 3px; /* 隙間を埋めるためにマイナス指定（ズレ具合に合わせて数値を調整してください） */
}

/* ========================================================
   1カラムページ（#column1）専用のエラーチップ位置調整
   テキストボックスに被らないように全体的に下げる
   ======================================================== */
#column1 .formErrorContent {
    margin-top: 7px;       /* 1カラムの時は10px下げる */
}
#column1 #err_memo .formErrorContent {
	margin-top: -3px;
}


/* ========================================================
   同意チェックボックス（#err_privacycheck）のエラー位置調整
   ======================================================== */
#err_privacycheck .formErrorContent {
    margin-top: 7px;  /* 数値を増やすほど下に移動します */
}
@media only screen and (max-width: 768px) {
#err_privacycheck .formErrorContent {
    margin-top: -3px;  /* 数値を増やすほど下に移動します */
}
}