@charset "UTF-8";

/**
 * -------------------------------------------------------------------------------------------------------------------
 * 共通バリデーションチェック START
 * common.jsのflexCommon.setValidationで設定すること
 * 参考：kantan-inquiry.html
 * -------------------------------------------------------------------------------------------------------------------
 */

/**
 * 入力欄、セレクトボックス(プレースホルダー含む)の設定
 *  position: relative;はマークの位置をabsoluteで指定するために基点として設定
 */
.common-validation .input, 
.common-validation .select {
    display: flex;
    flex-direction: column;
    width: 310px;
    height: 60px;
    background: #FFFFFF 0% 0% no-repeat padding-box;
    border: 1px solid #CCCCCC;
    border-radius: 10px;
    position: relative;
}

/**
 * 入力欄、セレクトボックス(プレースホルダー除く)の共通設定
 * ここで枠線を消して要素を1つに見せる
 */
.common-validation .input input,
.common-validation .select select {
    width: 90%;
    height: 40px;
    font-size: 14px;
    line-height: 21px;
    border: none;
    border-radius: 10px;
    outline: none;
    padding-left: 10px;
}

/**
 * セレクトボックス(プレースホルダー除く)の設定
 * 枠線を消して要素を1つに見せる
 * デフォルトの矢印を消す
 */
.common-validation .select select {
    background: #FFFFFF 0% 0% no-repeat padding-box;
    -webkit-appearance: none;
    appearance: none;
}

/**
 * プレースホルダーの設定
 */
.common-validation .input .placeholder, 
.common-validation .select .placeholder {
    margin-left: 10px;
    margin-top: 5px;
    font-size: 12px;
    color: #888888;
    display: flex;
    align-items: center;
}

/**
 * 必須マーク、任意マーク共通設定
 */
.common-validation .input .required::after, 
.common-validation .select .required::after,
.common-validation .input .optional::after,
.common-validation .select .optional::after {
    margin-left: 6px;
    margin-bottom: 2px;
    padding: 0 3px  0 3px;
    font-size: 8px;
    color: #FFFFFF;
    border-radius: 3px;
}


/**
 * 必須マーク
 */
.common-validation .input .required::after, 
.common-validation .select .required::after {
    content: "必須";
    background: #EE3440 0% 0% no-repeat padding-box;
}

/**
 * 任意マーク
 */
.common-validation .input .optional::after,
.common-validation .select .optional::after {
    content: "任意";
    background: #888888 0% 0% no-repeat padding-box;
}

/**
 * 入力バリデーションOK時の枠線色
 * jsから設定される
 */
.common-validation .is-ok {
    border:1px solid #008000;
}

/**
 * 入力バリデーションOK時のマーク
 */
.common-validation .is-ok::after {
    align-self: center;
    border-left: 4px solid #008000;
    border-bottom: 4px solid #008000;
    content: '';
    width: 10px;
    height: 5px;
    position: absolute;
    right: 13px;
    top: 32px;
    transform: rotate(-45deg);
}

/**
 * 入力バリデーションNG時の枠線
 * jsから設定される
 */
.common-validation .is-error {
    border: 1px solid #EE3440;
}

/**
 * 入力バリデーションNG時のマーク
 */
.common-validation .is-error::before {
    align-self: center;
    border-left: 4px solid #EE3440;
    border-bottom: 4px solid #EE3440;
    content: '';
    width: 7px;
    height: 7px;
    position: absolute;
    right: 13px;
    top: 40px;
    transform: rotate(135deg);
}

/**
 * 入力バリデーションNG時のマーク
 */
.common-validation .is-error::after {
    align-self: center;
    border-left: 4px solid red;
    border-bottom: 4px solid red;
    content: '';
    width: 7px;
    height: 7px;
    position: absolute;
    right: 13px;
    top: 30px;
    transform: rotate(-45deg);
}

/**
 * バリデーションエラーメッセージ
 * 文字色：赤
 * 初期表示：非表示
 */
.common-validation .input ~ .error-msg {
    display: block;
    width: 310px;
    font-size: 12px;
    line-height: 18px;
    color: #EE3440;
    visibility: hidden;
}

/**
 * バリデーションエラーメッセージ
 * バリデーションチェックでNGの場合、errorクラスが追加されるため
 * errorクラスを検出したときにvisibility: hiddenを解除する
 */
.common-validation .is-error ~ .error-msg {
    visibility: visible;
}


/**
 * -------------------------------------------------------------------------------------------------------------------
 *  共通バリデーションチェック END
 * -------------------------------------------------------------------------------------------------------------------
 */