@charset "UTF-8";
/* CSS Document */

/* -------------------------- */
/* 緊急速報
/* -------------------------- */
.urgency_report {
	position: relative;
	display: block;
	width: 100%;
	margin: 10px 0;
	padding: 10px 15px;
	font-size: 1.2em;
	font-weight: bold;
	border: 3px solid #f00;
	background-color: #fff;
}

.urgency_report .ledText {
	position: relative;
	font-size: 24px;
	font-weight: bold;
	line-height: 28px;
	overflow: hidden;
}

.urgency_report a:hover {
	text-decoration: underline;
}

.urgency_report .ledText span,
.urgency_report .ledText a.line {
	display: inline-block;
	white-space: nowrap;
	padding-left: 100%;
	color: #f00;
	text-decoration: none;
	-webkit-animation-name: marquee;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-duration: 30s;
	-moz-animation-name: marquee;
	-moz-animation-timing-function: linear;
	-moz-animation-iteration-count: infinite;
	-moz-animation-duration: 30s;
	animation-name: marquee;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-duration: 30s;
}

.urgency_report .ledText span a.lines {
	padding-right: 256px;
	color: #f00;
	text-decoration: none;
}

.urgency_report .ledText span a.lines:last-of-type {
	padding-right: 0;
}

@-webkit-keyframes marquee {
  from   { -webkit-transform: translate(0%);}
  99%,to { -webkit-transform: translate(-100%);}
}
@-moz-keyframes marquee {
  from   { -moz-transform: translate(0%);}
  99%,to { -moz-transform: translate(-100%);}
}
@keyframes marquee {
  from   { transform: translate(0%);}
  99%,to { transform: translate(-100%);}
}

/* -------------------------- */
/* ピックアップ速報
/* -------------------------- */

.flash_report {
	width: 100%;
	max-width: 960px;
	margin: 0 auto 10px;
	overflow: hidden;
}

.flash_report img {
	float: left;
	width: auto;
	height: 60px;
}

.flash_report .flash_border {
	float: right;
	position: relative;
	display: block;
	width: calc(100% - 55px);
	height: 46px;
	margin: 10px 0;
	padding: 0;
	font-size: 1.2em;
	font-weight: bold;
	border: 3px solid #000;
	background-color: #fff;
	border-radius: 5px;
}

.flash_report .flash_border:before {
	position: absolute;
	display: block;
	content: "";
	top: 6px;
	left: -10px;
	width: 0;
	border: 13px solid transparent;
	border-right-color: #fff;
	border-left-width: 0;
	z-index: 1;
}
 
.flash_report .flash_border:after {
	position: absolute;
	display: block;
	content: "";
	top: 9px;
	left: -13px;
	width: 0;
	border: 10px solid transparent;
	border-right-color: #000;
	border-left-width: 0;
}

.flash_report .flash_border .flash_frame {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.flash_report .flash_border .flash_frame p {
	position: absolute;
	top: -100%;
	left: 0;
	display: inline-block;
	white-space: nowrap;
	padding: 13px 15px;
}

.flash_report .flash_border .flash_frame p a {
	font-size: 1.0em;
	font-weight: bold;
	text-decoration: none;
	color: #000;
}

.flash_report .flash_border .flash_frame p a:hover {
	text-decoration: underline;
}
.flash_report .flash_border.line1 p:nth-of-type(1) {
	animation-name: flashnews01_1s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-duration: 3s;
}

.flash_report .flash_border.line2 p:nth-of-type(1) {
	animation-name: flashnews01_2s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-duration: 6s;
}

.flash_report .flash_border.line3 p:nth-of-type(1) {
	animation-name: flashnews01_3s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-duration: 9s;
}

.flash_report .flash_border.line2 p:nth-of-type(2) {
	animation-name: flashnews02_2s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-duration: 6s;
}

.flash_report .flash_border.line3 p:nth-of-type(2) {
	animation-name: flashnews02_3s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-duration: 9s;
}

.flash_report .flash_border.line3 p:nth-of-type(3) {
	animation-name: flashnews03_3s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-duration: 9s;
}

/* ---------------------- */
/* アニメーション動作
/* ---------------------- */
/* 縦スクロール -------------------------------------------------------------------- */
/* 3s スクロール0.25秒、停止2.5秒、スクロール0.25秒 */
@keyframes flashnews01_1s {
  0%     { transform: translate(0%, 0%);}
  8.33%  { transform: translate(0%, 100%);}
  91.67% { transform: translate(0%, 100%);}
  100%   { transform: translate(0%, 200%);}
}

/* 6s スクロール0.25秒、停止2.5秒、スクロール0.25秒、停止3秒 */
@keyframes flashnews01_2s {
  0%     { transform: translate(0%, 0%);}
  4.167% { transform: translate(0%, 100%);}
  45.83% { transform: translate(0%, 100%);}
  50%    { transform: translate(0%, 200%);}
  100%   { transform: translate(0%, 200%);}
}

/* 9s スクロール0.25秒、停止2.5秒、スクロール0.25秒、停止6秒 */
@keyframes flashnews01_3s {
  0%     { transform: translate(0%, 0%);}
  2.78%  { transform: translate(0%, 100%);}
  30.56% { transform: translate(0%, 100%);}
  33.33% { transform: translate(0%, 200%);}
  100%   { transform: translate(0%, 200%);}
}

/* 6s 停止3秒、スクロール0.25秒、停止2.5秒、スクロール0.25秒 */
@keyframes flashnews02_2s {
  0%     { transform: translate(0%, 0%);}
  50%    { transform: translate(0%, 0%);}
  54.17% { transform: translate(0%, 100%);}
  95.83% { transform: translate(0%, 100%);}
  100%   { transform: translate(0%, 200%);}
}

/* 9s 停止3秒、スクロール0.25秒、停止2.5秒、スクロール0.25秒、停止3秒 */
@keyframes flashnews02_3s {
  0%     { transform: translate(0%, 0%);}
  33.33% { transform: translate(0%, 0%);}
  36.11% { transform: translate(0%, 100%);}
  63.89% { transform: translate(0%, 100%);}
  66.67% { transform: translate(0%, 200%);}
  100%   { transform: translate(0%, 200%);}
}

/* 9s 停止6秒、スクロール0.25秒、停止2.5秒、スクロール0.25秒 */
@keyframes flashnews03_3s {
  0%     { transform: translate(0%, 0%);}
  66.67% { transform: translate(0%, 0%);}
  69.44% { transform: translate(0%, 100%);}
  97.22% { transform: translate(0%, 100%);}
  100%   { transform: translate(0%, 200%);}
}


/*===========================================
	SP
============================================*/

@media screen and (max-width: 767px){		
	.flash_report img {
		float: left;
		width: auto;
		height: 60px;
	}

	.flash_report .flash_border {
		height: 72px;
		margin: 0 0 10px;
		padding: 0;
	}

	.flash_report .flash_border .flash_frame p {
		height: 66px;
		line-height: 1.4em;
		white-space: normal;
	}


}

@media screen and (max-width: 350px){
	.flash_report .flash_border .flash_frame p {
		height: 66px;
		padding: 6px 10px;
		font-size: 0.9em;
	}
}