/* formの入力欄を持つエリアに付与する */
.input-group {
    margin : 10px;
    position : relative;
    padding-bottom : 10px;
}

/* 必須項目の入力欄のラベル */
.important-label {
    display : inline-block;
    color : white;
    background-color : #DB2700;
    padding : 1px 0 1px .6em;
    margin : 0 10px;
    border-radius : 5px;
    letter-spacing : .6em;
    font-size : 0.8rem;
}

.EN {
    padding : 1px .4em 1px .6em;
    letter-spacing : .2em;
}


/* 必須項目である入力欄の設定 */
.input-area {
    background : #FAFAFA;
    box-sizing : border-box;
    border : 1px solid #ccc;
    font-size : 14px;
    line-height : 20px;
    padding : 3px;
    width : 100%;
    margin-top : 4px;
}

/* 入力欄選択時のborder-colorの設定 */
.input-area:focus {
	box-shadow : 0 0 8px rgba(108, 196, 227, 0.5);
	-moz-box-shadow : 0 0 8px rgba(108, 196, 227, 0.5);
	-webkit-box-shadow : 0 0 8px rgba(108, 196, 227, 0.5);
	background : none repeat scroll 0 0 #e8f5fe;
	border-color : rgba(108, 196, 227, 0.75);
	outline : medium none;
}

/* 数値入力欄のスピンボタン非表示 */
.number::-webkit-inner-spin-button {
    -webkit-appearance : none;
}

/* submit時未入力の必須項目が存在した時に付与される */
.ng-background {
    background-color : #FECED6;
}

.link {
    cursor : pointer;
    display : inline-block;
    margin-left : 5px;
    padding : 0;
    font-size : .95rem;
    color : #0000ff;
}

@media ( mx-width : 389px ), ( max-device-width : 389px ) {
    .link {
        margin-left : 0;
        display : block;
    }
}

@media ( max-width : 409px ), ( max-device-width : 409px ) {
    .important-label { font-size : .75rem; }
    .link { font-size : .9rem; }
}
@media ( max-width : 375px ), ( max-device-width : 375px ) {
    .important-label { font-size : .7rem; }
    .link { font-size : .85rem; }
}
@media ( max-width : 343px ), ( max-device-width : 343px ) {
    .link { font-size : .8rem; }
    .important-label { font-size : .65rem; }
}