@charset "utf-8";

/*************************************************
 * Description: common
 * Package: base
 * Author: Japan Electronic Industrial Arts Co.Ltd.
 * Update: 2014/12/
 * Notes: 
*************************************************/

/* ==============================================
 * layout
=============================================== */

html {
}
body {
}
.frame_outer {
	width: 100%;
}


/* ==============================================
 * Clearfix
=============================================== */
/*
.clearfix:before,
.clearfix:after {
	content:"";
	display:table;
}
.clearfix:after {
	clear:both;
}
*/
.clearfix:after {
	content: "";
	clear: both;
	display: block;
}


/* ==============================================
 * 行揃えOOCSS
=============================================== */
.align-c {
	text-align: center;
}
.align-r {
	text-align: right;
}
.align-l {
	text-align: left;
}


/* ==============================================
 * マージン調整OOOCSS
=============================================== */
.mb-5   { margin-bottom:   5px !important; }
.mb-10  { margin-bottom:  10px !important; }
.mb-15  { margin-bottom:  15px !important; }
.mb-20  { margin-bottom:  20px !important; }
.mb-25  { margin-bottom:  25px !important; }
.mb-30  { margin-bottom:  30px !important; }
.mb-35  { margin-bottom:  35px !important; }
.mb-40  { margin-bottom:  40px !important; }
.mb-45  { margin-bottom:  45px !important; }
.mb-50  { margin-bottom:  50px !important; }
.mb-55  { margin-bottom:  55px !important; }
.mb-60  { margin-bottom:  60px !important; }
.mb-65  { margin-bottom:  65px !important; }
.mb-70  { margin-bottom:  70px !important; }
.mb-75  { margin-bottom:  75px !important; }
.mb-80  { margin-bottom:  80px !important; }
.mb-85  { margin-bottom:  85px !important; }
.mb-90  { margin-bottom:  90px !important; }
.mb-95  { margin-bottom:  95px !important; }
.mb-100 { margin-bottom: 100px !important; }
.mb-110 { margin-bottom: 110px !important; }
.mb-120 { margin-bottom: 120px !important; }
.mb-130 { margin-bottom: 130px !important; }
.mb-140 { margin-bottom: 140px !important; }
.mb-150 { margin-bottom: 150px !important; }
.mb-160 { margin-bottom: 160px !important; }
.mb-170 { margin-bottom: 170px !important; }
.mb-180 { margin-bottom: 180px !important; }
.mb-190 { margin-bottom: 190px !important; }
.mb-200 { margin-bottom: 200px !important; }

.mt-0  { margin-top: 0 !important; }
.mt-5  { margin-top: 5px !important; }
.mt-10 { margin-top: 10px !important; }
.mt-20 { margin-top: 20px !important; }
.mt-30 { margin-top: 30px !important; }
.mt-40 { margin-top: 40px !important; }
.mt-50 { margin-top: 50px !important; }
.mt-60 { margin-top: 60px !important; }

.ml-10 { margin-left: 10px !important; }
.ml-20 { margin-left: 20px !important; }
.ml-30 { margin-left: 30px !important; }
.ml-1em { margin-left: 1em !important; }


/* ==============================================
 * フォーム等幅調整OOCSS
=============================================== */
.box-30 { width: 30px; }
.box-40 { width: 40px; }
.box-60 { width: 60px; }
.box-100 { width: 100px; }
.box-120 { width: 120px; }
.box-150 { width: 150px; }
.box-200 { width: 200px; }
.box-250 { width: 250px; }
.box-300 { width: 300px; }
.box-320 { width: 320px; }
.box-350 { width: 350px; }
.box-380 { width: 380px; }
.box-450 { width: 450px; }
.box-3em { width: 3em; }


/* ==============================================
 * icon回転用OOCSS
=============================================== */
.rotate-90 {
	-webkit-transform: rotate(90deg);
	transform: rotate(90deg);
}
.rotate-180 {
	-webkit-transform: rotate(180deg);
	transform: rotate(180deg);
}
.rotate-270 {
	-webkit-transform: rotate(270deg);
	transform: rotate(270deg);
}


/* ==============================================
 * Tipsy
=============================================== */
.tipsy {
	padding: 5px;
	font-size: 10px;
	position: absolute;
	z-index: 100000;
}
.tipsy-inner {
	padding: 5px 8px 4px 8px;
	background-color: black;
	color: white;
	max-width: 200px;
	text-align: center;
}
.tipsy-inner {
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
}
.tipsy-arrow {
	position: absolute;
	background: url('../img/ajax/tipsy.gif') no-repeat top left;
	width: 9px;
	height: 5px;
}
.tipsy-n .tipsy-arrow {
	top: 0;
	left: 50%;
	margin-left: -4px;
}
.tipsy-nw .tipsy-arrow {
	top: 0;
	left: 10px;
}
.tipsy-ne .tipsy-arrow {
	top: 0;
	right: 10px;
}
.tipsy-s .tipsy-arrow {
	bottom: 0;
	left: 50%;
	margin-left: -4px;
	background-position: bottom left;
}
.tipsy-sw .tipsy-arrow {
	bottom: 0;
	left: 10px;
	background-position: bottom left;
}
.tipsy-se .tipsy-arrow {
	bottom: 0;
	right: 10px;
	background-position: bottom left;
}
.tipsy-e .tipsy-arrow {
	top: 50%;
	margin-top: -4px;
	right: 0;
	width: 5px;
	height: 9px;
	background-position: top right;
}
.tipsy-w .tipsy-arrow {
	top: 50%;
	margin-top: -4px;
	left: 0;
	width: 5px;
	height: 9px;
}