/***
リスト時に使える矢印
************************************/
/** 右に矢印 **/
.arrow {
	position: relative;
	padding-right: 15px;
}

.arrow::before,
.arrow::after {
	content: '';
	display: inline-block;
	position: absolute;
	top: 50%;
	right: 0;
	width: 0;
	height: 0;
	margin-top: -5px;
	border-top: 5px solid transparent;
	border-right: 6px solid transparent;
	border-bottom: 5px solid transparent;
	border-left: 6px solid #0E7AC4;
}

.arrow::after {
	z-index: 1;
	margin-right: 3px;
	border-left-color: #FFF;
}

/** 左に矢印 **/
.list_arrw li {
	position: relative;
	padding-left: 15px;
}

.list_arrw li::before,
.list_arrw li::after {
	content: '';
	display: inline-block;
	position: absolute;
	top: 50%;
	left: 0;
	width: 0;
	height: 0;
	margin-top: -5px;
	border-top: 5px solid transparent;
	border-right: 6px solid transparent;
	border-bottom: 5px solid transparent;
	border-left: 6px solid #0E7AC4;
}

.list_arrw li::after {
	z-index: 1;
	margin-left: -3px;
	border-left-color: #FFF;
}

/** 上に矢印 **/
.arrow_top {
	position: relative;
}

.arrow_top::before,
.arrow_top::after {
	content: '';
	display: inline-block;
	position: absolute;
	top: 50%;
	right: 0;
	width: 0;
	height: 0;
	margin-top: -11px;
    margin-right: -11px;
	border-top: 5px solid transparent;
	border-right: 10px solid transparent;
	border-bottom: 13px solid #FFF;
	border-left: 10px solid transparent;
}

.arrow_top::after {
	z-index: 1;
	margin-top: -5px;
	border-bottom-color: #1e9bcd;
}


/***
スクロールインのアニメーション
************************************/

/** フェードイン **/
.fadein {
  opacity: 0;
  transition: all 1s;
}
.fadein.scrollin {
  opacity: 1;
}

/** 右から左にフェードイン **/
.right-to-left {
  opacity: 0;
  transform: translateX(10px);
  transition: all 0.4s;
}
.right-to-left.scrollin {
  opacity: 1;
  transform: translate(0);
}

/** 左から右にフェードイン **/
.left-to-right {
  opacity: 0;
  transform: translateX(-10px);
  transition: all 0.4s;
}
.left-to-right.scrollin {
  opacity: 1;
  transform: translate(0);
}

/** 下から上にフェードイン* */
.down-to-top {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.4s;
}
.down-to-top.scrollin {
  opacity: 1;
  transform: translateY(0);
}


/***
ボタン・リンクのhoverアニメーション
************************************/

/** 共通設定 **/
.button {
	display: inline-block;
	text-align: center;
	text-decoration: none;
	outline: none;
}

.button::before,
.button::after {
	position: absolute;
	z-index: -1;
	display: block;
	content: '';
}

.button,
.button::before,
.button::after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: all .3s;
	transition: all .3s;
}

/** 上からスライドで背景色が変わる **/
.curtain {
	display: block;
	width: 100%;
	position: relative;
	z-index: 2;
	background-color: #FFF;
	border: 1px solid #333;
	color: #333;
	line-height: 50px;
	overflow: hidden;
}

.curtain:hover {
	color: #FFF !important;
}

.curtain::after {
	top: -100%;
	left: 0%;
	width: 100%;
	height: 100%;
}

.curtain:hover::after {
	top: 0;
	background-color: #333;
}

/** 左からスライドで背景色が変わる **/
.curtain_left {
	display: block;
	width: 100%;
	position: relative;
	z-index: 2;
	background-color: #0E7AC4;
	border: 1px solid #0E7AC4;
	color: #FFF;
	line-height: 50px;
	overflow: hidden;
}

.curtain_left:hover {
	color: #0E7AC4;
}

.curtain_left::after {
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
}

.curtain_left:hover::after {
	left: 0;
	background-color: #FFF;
}

/** 線が文字に被る **/
.over-border {
	position: relative;
	transition: .3s;
} 

.ob-inner {
	padding: 0;
} 

.ob-inner::before {
	position: absolute;
	top: 50%;
	left: 50%;
	content: "";
	width: 0px;
	height: 1px;
	background-color: #0E7AC4;
	transition: .3s;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
}

.ob-inner::before {
	bottom: 0;
}

.ob-inner:hover::before {
	width: 100%;
}

/** 文字の下に線が表示される 左から右 **/
.right-border {
	display: inline-block;
	position: relative;
	color: #333;
}

.right-border:hover {
	color: #0E7AC4;
}

.right-border::after {
    background-color: #3498db;
    content: '';
    display: block;
    position: absolute;
    z-index: 10;
    transition: all .3s ease;
    -webkit-transition: all .3s ease;
    height: 1px;
    left: 0;
	bottom: 0;
    width: 0px;
}

.right-border:hover::after {
    width: 100%;
    width: calc(100% + 1px);
}

/** 背景カラーが左右に分かれる **/
.open_bg {
	position: relative;
	z-index: 2;
	background-color:;
	border:;
	color:;
}
.open_bg:hover {
	background-color:;
	border-color:;
	color:;
}
.open_bg::before,
.open_bg::after {
	top: 0;
	width: 50%;
	height: 100%;
	background-color:;
}
.open_bg::before {
	right: 0;
}
.open_bg::after {
	left: 0;
}
.open_bg:hover::before,
.open_bg:hover::after {
	width: 0;
	background-color:;
}

.border-none {
	border: none !important;
}

/** 枠が四角から伸びて表示される **/
/** <a class="border-stretch"><span class="bs-inner"> 〜 </span></a>と使用 **/
.border-stretch {
	display: inline-block;
	position: relative;
}

.border-stretch::after,
.border-stretch::before,
.bs-inner::after,
.bs-inner::before {
    background-color: #3498db;
    content: '';
    display: block;
    position: absolute;
    z-index: 10;
    transition: all .3s ease;
    -webkit-transition: all .3s ease;
}

.border-stretch::after {
    height: 1px;
    left: -1px;
    top: -1px;
    width: 0px;
}

.border-stretch::before {
    bottom: -1px;
    height: 1px;
    right: -1px;
    width: 0px;
}

.bs-inner::after {
    bottom: -1px;
    height: 0px;
    left: -1px;
    width: 1px;
}

.bs-inner::before {
    height: 0px;
    right: -1px;
    top: -1px;
    width: 1px;
}

/* hover */
.border-stretch:hover::after,
.border-stretch:hover::before {
    width: 100%;
    width: calc(100% + 1px);
}

.border-stretch:hover .bs-inner::after,
.border-stretch:hover .bs-inner::before {
    height: 100%;
    height: calc(100% + 1px);
}