@charset "Shift_JIS";

/*グラデーション*/
.grade {
	background: #FFFFFF;
	background: -webkit-gradient(linear, 0 0, 0 bottom, from(#FFFFFF), to(#FAFAFA));
	background: -webkit-linear-gradient(#FFFFFF, #FAFAFA);
	background: -moz-linear-gradient(#FFFFFF, #FAFAFA);
	background: -ms-linear-gradient(#FFFFFF, #FAFAFA);
	background: -o-linear-gradient(#FFFFFF, #FAFAFA);
	background: linear-gradient(#FFFFFF, #FAFAFA);
	-pie-background: linear-gradient(#FFFFFF, #FAFAFA);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0000', endColorstr='#ff6600'); /* IE6,7用 */
-ms-filter: "progid:DXImageTransform.Microsoft.Gradient(StartColorStr=#ff0000, EndColorStr=#ff6600)"; /* IE8,9用 */
}
/*複数グラデーション*/
.grade2{
	background: #FFFFFF;
	background: -moz-linear-gradient(center top, #ffffff 4%,#e6e6e6 18%,#ffffff 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0.04, #ffffff),color-stop(0.18, #e6e6e6),color-stop(1, #ffffff));
	background: -webkit-linear-gradient(linear, left top, left bottom, color-stop(0.04, #ffffff),color-stop(0.18, #e6e6e6),color-stop(1, #ffffff));
	background: -ms-linear-gradient(linear, left top, left bottom, color-stop(0.04, #ffffff),color-stop(0.18, #e6e6e6),color-stop(1, #ffffff));
	background: -o-linear-gradient(linear, left top, left bottom, color-stop(0.04, #ffffff),color-stop(0.18, #e6e6e6),color-stop(1, #ffffff));
	background: linear-gradient(linear, left top, left bottom, color-stop(0.04, #ffffff),color-stop(0.18, #e6e6e6),color-stop(1, #ffffff));
	-pie-background: linear-gradient(linear, left top, left bottom, color-stop(0.04, #ffffff),color-stop(0.18, #e6e6e6),color-stop(1, #ffffff));
}


/*角丸*/
.radius {
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
#F0F0F0
}
/*ボックスシャドウ*/
.boxshadow {
	-moz-box-shadow: 0 0 2px #999, 0 0 5px #999, 2px 2px 6px #999;
	-webkit-box-shadow: 0 0 2px #999, 0 0 5px #999, 2px 2px 6px #999;
	box-shadow:  0 0 2px #999, 0 0 5px #999, 2px 2px 6px #999;
	filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696', Direction=145, Strength=3);
}
/*テキストシャドウ*/
.textshadow{
	text-shadow:2px 2px 2px #666;
}
/*透明*/
.alpha{
	filter:alpha(opacity=50);
	-moz-opacity: 0.5;
	opacity: 0.5;
	filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
/* 背景を透過 */
.backColor {
	background:transparent;
}
/*点滅*/
#blight {
	animation: trans 0.5s;
	animation-iteration-count:infinite;
	animation-timing-function:ease-in-out;
	animation-direction:alternate;
	animation-delay:0s;
	-webkit-animation:trans 0.5s;
	-webkit-animation-iteration-count:infinite;
	-webkit-animation-timing-function:ease-in-out;
	-webkit-animation-direction:alternate;
	-webkit-animation-delay:0s;
}
trans{
	from{
		opacity:1.0;
	}
	to{
		opacity:0.1;
	}
}
@-webkit-keyframes trans{
	from{
		opacity:1.0;
	}
	to{
		opacity:0.1;
	}
}


/*色点滅*/
.colorB {
	animation: trans 0.3s;
	animation-iteration-count:infinite;
	animation-timing-function:ease-in-out;
	animation-direction:alternate;
	animation-delay:0s;
	-webkit-animation:trans 0.3s;
	-webkit-animation-iteration-count:infinite;
	-webkit-animation-timing-function:ease-in-out;
	-webkit-animation-direction:alternate;
	-webkit-animation-delay:0s;
}
trans{
	from{
		opacity:1.0;
		color:#F6090D;
	}
	to{
		opacity:1.0;
		color:#F57274;
	}
}
@-webkit-keyframes trans{
	from{
		opacity:1.0;
		color:#F6090D;
	}
	to{
		opacity:1.0;
		color:#F57274;
	}
}
/*上下*/
.updown {
	animation: arrowmove 2s;
	animation-iteration-count: infinite;
	-webkit-animation: arrowmove 2s; /* Safari & Chrome */
	-webkit-animation-iteration-count: infinite;
}
arrowmove { 
   0%   { -webkit-transform:  translate(0px, 0px);   }
   50%   { -webkit-transform:  translate(0px, 10px);   } 
  100%  { -webkit-transform:  translate(0px, 0px);   } 
} 
@-webkit-keyframes arrowmove { 
  0%   { -webkit-transform:  translate(0px, 0px);   }
   50%   { -webkit-transform:  translate(0px, 10px);   } 
  100%  { -webkit-transform:  translate(0px, 0px);   } 
} 

/*マウスオーバーフェードイン*/
.fade {
opacity:0.5;
transition:all 0.5s;
}
.fade:hover
{
opacity:1;
}

/*カラーチェンジ*/
.color:hover {
background:#eb8f52;
transition:all 0.5s;
}

/*拡大*/
.grow:hover {
-webkit-transform: scale(1.3);
-ms-transform: scale(1.3);
transform: scale(1.3);
transition:all 0.5s;
}

/*縮小*/
.shrink:hover {
-webkit-transform: scale(0.8);
-ms-transform: scale(0.8);
transform: scale(0.8);
transition:all 0.5s;
}

/*伸縮*/
.wide {
width: 600px;
margin-left: -450px;
text-align: right;
padding-right: 20px;
transition:all 0.5s;
}
.wide:hover {
margin-left: -100px;　
}

/* 傾き */
.rotate:hover {
-webkit-transform: rotate(-30deg);
-ms-transform: rotate(-30deg);
transform: rotate(-30deg);
transition:all 0.5s;
}

/* フリップ */
.flip:hover {
-moz-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
transition:all 0.5s;
}

/* 四角から丸へ */
.circle:hover {
border-radius:50%;
transition:all 0.5s;
}

/* 3Dシャドウ */
.shadow:hover {
box-shadow:1px 1px #eb9552,
           2px 2px #eb9552,
           3px 3px #eb9552;
-webkit-transform: translateX(-3px);
transform: translateX(-3px);
transition:all 0.5s;
}

/* スウィング */
@-webkit-keyframes swing
{
    15%
    {
        -webkit-transform: translateX(5px);
        transform: translateX(5px);
    }
    30%
    {
        -webkit-transform: translateX(-5px);
       transform: translateX(-5px);
    } 
    50%
    {
        -webkit-transform: translateX(3px);
        transform: translateX(3px);
    }
    65%
    {
        -webkit-transform: translateX(-3px);
        transform: translateX(-3px);
    }
    80%
    {
        -webkit-transform: translateX(2px);
        transform: translateX(2px);
    }
    100%
    {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}
@keyframes swing
{
    15%
    {
        -webkit-transform: translateX(5px);
        transform: translateX(5px);
    }
    30%
    {
        -webkit-transform: translateX(-5px);
        transform: translateX(-5px);
    }
    50%
    {
        -webkit-transform: translateX(3px);
        transform: translateX(3px);
    }
    65%
    {
        -webkit-transform: translateX(-3px);
        transform: translateX(-3px);
    }
    80%
    {
        -webkit-transform: translateX(2px);
        transform: translateX(2px);
    }
    100%
    {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}
 
.swing:hover {
-webkit-animation: swing 1s ease; /* easeは最初と最後を滑らかに再生する補完方法 */
animation: swing 1s ease;
-webkit-animation-iteration-count: 1;/*  アニメーションの繰り返し回数を指定 */
animation-iteration-count: 1;
}


/* インセットボーダー */
.border:hover {
box-shadow: inset 0 0 0 25px #eb9552;
transition:all 0.5s;
}
.TableSTL {
	display: table;
	position: relative;
}
.TableSTL > * {
	display: table-cell;
}
.ValignM {
	vertical-align: middle;
}
.ValignT {
	vertical-align: top;
}
.W100 {
	width: 100%;
}