@charset "utf-8";
/* //////////////////////////////////////////////////

━━━━━━━━━━━━━━━━━━━━━━━
バナー広告css
━━━━━━━━━━━━━━━━━━━━━━━

////////////////////////////////////////////////// */

#rn_scrollBanner_inner {
	width: auto;
	height: auto;
	margin: 0;
	padding: 0;
}
#rn_scrollBanner_inner .rn_scrollBanner_slide {
	width: auto;
	height: 245px;
	background-color: #ffd907;
}
#rn_scrollBanner_inner .rn_scrollBanner_slide ul {
	width: 232px;
	margin: 8px;
	float: left;
	left: 250px;
}
#rn_scrollBanner_inner .rn_scrollBanner_slide ul li:nth-child(2) {
	margin: 5px 0;
}
#rn_scrollBanner_inner .rn_scrollBanner_slide ul li div {
	height: 73px;
	padding: 5px 7px;
	background-color: #fff;
	border-radius: 5px;
}
#rn_scrollBanner_inner .rn_scrollBanner_slide ul li div a {
	display: block;
	text-decoration: none;
}
#rn_scrollBanner_inner .rn_scrollBanner_slide ul li div dl {
	width: 100%;
	border-bottom: 1px dotted #444;
	display: flex;
	align-items: center;
	flex-direction: column;
}
#rn_scrollBanner_inner .rn_scrollBanner_slide ul li div dl dt {
	width: 100%;
	font-size: 14px;
	font-weight: bold;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: #444;
}
#rn_scrollBanner_inner .rn_scrollBanner_slide ul li div dl dd {
	width: 100%;
	padding:1px 0 3px 0;
	text-align: right;
	font-size: 12px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
#rn_scrollBanner_inner .rn_scrollBanner_slide ul li div p {
	width: 100%;
	padding-top:3px;
	text-align: justify;
	font-size: 12px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
#rn_scrollBanner_inner #logo {
	width: auto;
	height: 23px;
	margin: 0;
	padding: 4px 0 0 0;
	text-align: center;
}

/* スライド範囲hoverでanimation一時停止 */
#rn_scrollBanner_inner .rn_scrollBanner_slide:hover ul,
#rn_scrollBanner_inner .rn_scrollBanner_slide:hover ul li div,
#rn_scrollBanner_inner .rn_scrollBanner_slide:hover ul li div dl,
#rn_scrollBanner_inner .rn_scrollBanner_slide:hover ul li div dt,
#rn_scrollBanner_inner .rn_scrollBanner_slide:hover ul li div dd,
#rn_scrollBanner_inner .rn_scrollBanner_slide:hover ul li div p {
	animation-play-state: paused;
}

/* //////////////////////////////////////////////////

━━━━━━━━━━━━━━━━━━━━━━━
背景色変更アニメーション
━━━━━━━━━━━━━━━━━━━━━━━

////////////////////////////////////////////////// */


/* **************************************************

【！】設定MEMO
-----------------------------------------------------

10秒ごとに無限ループの場合

① 1秒後に開始 3秒間
② 4秒後に開始 3秒間
③ 7秒後に開始 3秒間

10秒後にスライド 3秒間（slide.css）

************************************************** */

#rn_scrollBanner_inner .rn_scrollBanner_slide ul li div {
	-webkit-animation: bg_color 7s 0s infinite;
	-moz-animation: bg_color 7s 0s infinite;
	animation: bg_color 7s 0s infinite;
}
#rn_scrollBanner_inner .rn_scrollBanner_slide ul li div dl,
#rn_scrollBanner_inner .rn_scrollBanner_slide ul li div dt,
#rn_scrollBanner_inner .rn_scrollBanner_slide ul li div dd,
#rn_scrollBanner_inner .rn_scrollBanner_slide ul li div p {
	-webkit-animation: border-p_color 7s 0s infinite;
	-moz-animation: border-p_color 7s 0s infinite;
	animation: border-p_color 7s 0s infinite;
}
#rn_scrollBanner_inner .rn_scrollBanner_slide ul li:nth-child(1) div,
#rn_scrollBanner_inner .rn_scrollBanner_slide ul li:nth-child(1) div dl,
#rn_scrollBanner_inner .rn_scrollBanner_slide ul li:nth-child(1) div dt,
#rn_scrollBanner_inner .rn_scrollBanner_slide ul li:nth-child(1) div dd,
#rn_scrollBanner_inner .rn_scrollBanner_slide ul li:nth-child(1) div p {
	-webkit-animation-delay: 1s;
	-moz-animation-delay: 1s;
	animation-delay: 1s;
}
#rn_scrollBanner_inner .rn_scrollBanner_slide ul li:nth-child(2) div,
#rn_scrollBanner_inner .rn_scrollBanner_slide ul li:nth-child(2) div dl,
#rn_scrollBanner_inner .rn_scrollBanner_slide ul li:nth-child(2) div dt,
#rn_scrollBanner_inner .rn_scrollBanner_slide ul li:nth-child(2) div dd,
#rn_scrollBanner_inner .rn_scrollBanner_slide ul li:nth-child(2) div p {
	-webkit-animation-delay: 3s;
	-moz-animation-delay: 3s;
	animation-delay: 3s;
}
#rn_scrollBanner_inner .rn_scrollBanner_slide ul li:nth-child(3) div,
#rn_scrollBanner_inner .rn_scrollBanner_slide ul li:nth-child(3) div dl,
#rn_scrollBanner_inner .rn_scrollBanner_slide ul li:nth-child(3) div dt,
#rn_scrollBanner_inner .rn_scrollBanner_slide ul li:nth-child(3) div dd,
#rn_scrollBanner_inner .rn_scrollBanner_slide ul li:nth-child(3) div p {
	-webkit-animation-delay: 5s;
	-moz-animation-delay: 5s;
	animation-delay: 5s;
}
 @-webkit-keyframes bg_color {
 0% {
 background-color: #fff;
}
 1% {
 background-color: #EB5000;
}
 29% {
 background-color: #EB5000;
}
 30% {
 background-color: #fff;
}
 100% {
 background-color: #fff;
}
}
@-moz-keyframes bg_color {
 0% {
 background-color: #fff;
}
 1% {
 background-color: #EB5000;
}
 29% {
 background-color: #EB5000;
}
 30% {
 background-color: #fff;
}
 100% {
 background-color: #fff;
}
}
@keyframes bg_color {
 0% {
 background-color: #fff;
}
 1% {
 background-color: #EB5000;
}
 29% {
 background-color: #EB5000;
}
 30% {
 background-color: #fff;
}
 100% {
 background-color: #fff;
}
}
/* 上記で指定できない会社説明文と点線のスタイル
-------------------------------------------------- */
 @-webkit-keyframes border-p_color {
 0% {
 color:#444;
 border-color: #444;
}
 1% {
 color:#fff;
 border-color: #fff;
}
 29% {
 color:#fff;
 border-color: #fff;
}
 30% {
 color:#444;
 border-color: #444;
}
 100% {
 color:#444;
 border-color: #444;
}
}
@-moz-keyframes border-p_color {
 0% {
 color:#444;
 border-color: #444;
}
 1% {
 color:#fff;
 border-color: #fff;
}
 29% {
 color:#fff;
 border-color: #fff;
}
 30% {
 color:#444;
 border-color: #444;
}
 100% {
 color:#444;
 border-color: #444;
}
}
@keyframes border-p_color {
 0% {
 color:#444;
 border-color: #444;
}
 1% {
 color:#fff;
 border-color: #fff;
}
 29% {
 color:#fff;
 border-color: #fff;
}
 30% {
 color:#444;
 border-color: #444;
}
 100% {
 color:#444;
 border-color: #444;
}
}