@charset "UTF-8";

/*
*	Title: ZYYX - トップページ用CSS
*	URI: 
*	Last Modified: 2010-06-04
*	Description: トップページ用に各要素を定義します
*/

/*========================================
	1. メインビジュアル部
========================================*/
#visualWrap {
	position: relative;
	margin: 0 auto 0;
	width: 910px;
	height: 450px;
	background: url(../images/bg_visualLine.png) repeat-x left 228px;
	overflow: hidden;
	z-index: 2;
}

#visualWrap #btnPrev {
	position: absolute;
	left: 0;
	top: 181px;
	display: block;
	width: 20px;
	height: 97px;
	background: url(../../images/btn_prev.png) no-repeat right center;
	-webkit-transition: all 0.5s linear;
}

#visualWrap #btnNext {
	position: absolute;
	right: 0;
	top: 181px;
	display: block;
	width: 20px;
	height: 97px;
	background: url(../../images/btn_next.png) no-repeat left center;
	-webkit-transition: all 0.5s linear;
}

#visualWrap .hiddenBtn {
	opacity: 0;
	visibility: hidden;
}

#histroyWrap {
	position: relative;
	margin: 0 auto 0;
	width: 809px;
	height: 450px;
	overflow: hidden;
}

#canvasFrame {
	position: absolute;
	left: 0;
	top: 0;
	width: 3869px;
	height: 450px;
	-webkit-transition: 1.2s ease-in-out;
}

#canvasFrame #cvs_background {
	position: absolute;
	left: 0;
	top: 0;
}

#canvasFrame #cvs_nowSol01 {
	position: absolute;
	right: 151px;
	top: 82px;
	cursor: pointer;
}

#canvasFrame #cvs_nowSol02 {
	position: absolute;
	right: 151px;
	top: 164px;
	cursor: pointer;
}

#canvasFrame #cvs_nowSol03 {
	position: absolute;
	right: 151px;
	top: 246px;
	cursor: pointer;
}

#canvasFrame #cvs_nowSol04 {
	position: absolute;
	right: 151px;
	top: 328px;
	cursor: pointer;
}

#canvasFrame .current {
	opacity: 0.5;
}

/*----- アニメーション（最新ソリューション） -----*/
@-webkit-keyframes anime_nowSol {
	0% { opacity: 1; }
	35% { opacity: 1; }
	42% { opacity: 0.5; }
	50% { opacity: 1; }
	100% { opacity: 1; }
}

#canvasFrame .setSolAnime {
	-webkit-animation-name: anime_nowSol;
	-webkit-animation-duration: 8s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;
}

#canvasFrame #cvs_ball01,
#canvasFrame #cvs_ball02,
#canvasFrame #cvs_ball03,
#canvasFrame #cvs_ball04,
#canvasFrame #cvs_ball05 {
	position: absolute;
	right: 726px;
	top: 219px;
}

/*----- アニメーション（ボール①） -----*/
@-webkit-keyframes anime_ball01 {
	0% {
		opacity: 0;
	}
	5% {
		opacity: 0;
	}
	15% {
		opacity: 1;
		-webkit-transform: translate3d(0, 0, 0);
		Xright: 726px;
		Xtop: 219px;
	}
	24.5% {
		-webkit-transform: translate3d(221px, 0, 0);
		Xright: 505px;
		Xtop: 219px;
	}
	29% {
		-webkit-transform: translate3d(330px, -124px, 0);
		Xright: 396px;
		Xtop: 95px;
	}
	35% {
		opacity: 1;
		-webkit-transform: translate3d(469px, -124px, 0);
		Xright: 257px;
		Xtop: 95px;
	}
	45% {
		opacity: 0;
		-webkit-transform: translate3d(469px, -124px, 0);
		Xright: 257px;
		Xtop: 95px;
	}
	100% {
		opacity: 0;
		-webkit-transform: translate3d(0, 0, 0);
		Xright: 726px;
		Xtop: 219px;
	}
}

#canvasFrame .setBallAnime01 {
	-webkit-animation-name: anime_ball01;
	-webkit-animation-duration: 8s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;
 }

/*----- アニメーション（ボール②） -----*/
@-webkit-keyframes anime_ball02 {
	0% {
		opacity: 0;
	}
	5% {
		opacity: 0;
	}
	15% {
		opacity: 1;
		-webkit-transform: translate3d(0, 0, 0);
		Xright: 726px;
		Xtop: 219px;
	}
	24.5% {
		-webkit-transform: translate3d(221px, 0, 0);
		Xright: 505px;
		Xtop: 219px;
	}
	26% {
		-webkit-transform: translate3d(259px, -43px, 0);
		Xright: 467px;
		Xtop: 176px;
	}
	35% {
		opacity: 1;
		-webkit-transform: translate3d(469px, -43px, 0);
		Xright: 257px;
		Xtop: 176px;
	}
	45% {
		opacity: 0;
		-webkit-transform: translate3d(469px, -43px, 0);
		Xright: 257px;
		Xtop: 176px;
	}
	100% {
		opacity: 0;
		-webkit-transform: translate3d(0, 0, 0);
		Xright: 726px;
		Xtop: 219px;
	}
}

#canvasFrame .setBallAnime02 {
	-webkit-animation-name: anime_ball02;
	-webkit-animation-duration: 8s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;
 }

/*----- アニメーション（ボール③） -----*/
@-webkit-keyframes anime_ball03 {
	0% {
		opacity: 0;
	}
	5% {
		opacity: 0;
	}
	15% {
		opacity: 1;
		-webkit-transform: translate3d(0, 0, 0);
		Xright: 726px;
		Xtop: 219px;
	}
	16.3% {
		-webkit-transform: translate3d(30px, 0, 0);
		Xright: 696px;
		Xtop: 219px;
	}
	18% {
		-webkit-transform: translate3d(72px, 42px, 0);
		Xright: 654px;
		Xtop: 261px;
	}
	35% {
		opacity: 1;
		-webkit-transform: translate3d(469px, 42px, 0);
		Xright: 257px;
		Xtop: 261px;
	}
	45% {
		opacity: 0;
		-webkit-transform: translate3d(469px, 42px, 0);
		Xright: 257px;
		Xtop: 261px;
	}
	100% {
		opacity: 0;
		-webkit-transform: translate3d(0, 0, 0);
		Xright: 726px;
		Xtop: 219px;
	}
}

#canvasFrame .setBallAnime03 {
	-webkit-animation-name: anime_ball03;
	-webkit-animation-duration: 8s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;
 }

/*----- アニメーション（ボール④） -----*/
@-webkit-keyframes anime_ball04 {
	0% {
		opacity: 0;
	}
	5% {
		opacity: 0;
	}
	15% {
		opacity: 1;
		-webkit-transform: translate3d(0, 0, 0);
		Xright: 726px;
		Xtop: 219px;
	}
	16.3% {
		-webkit-transform: translate3d(30px, 0, 0);
		Xright: 696px;
		Xtop: 219px;
	}
	21.2% {
		-webkit-transform: translate3d(148px, 122px, 0);
		Xright: 578px;
		Xtop: 341px;
	}
	28.6% {
		-webkit-transform: translate3d(321px, 122px, 0);
		Xright: 405px;
		Xtop: 341px;
	}
	32% {
		-webkit-transform: translate3d(400px, 42px, 0);
		Xright: 326px;
		Xtop: 261px;
	}
	35% {
		opacity: 1;
		-webkit-transform: translate3d(469px, 42px, 0);
		Xright: 257px;
		Xtop: 261px;
	}
	45% {
		opacity: 0;
		-webkit-transform: translate3d(469px, 42px, 0);
		Xright: 257px;
		Xtop: 261px;
	}
	100% {
		opacity: 0;
		-webkit-transform: translate3d(0, 0, 0);
		Xright: 726px;
		Xtop: 219px;
	}
}

#canvasFrame .setBallAnime04 {
	-webkit-animation-name: anime_ball04;
	-webkit-animation-duration: 8s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;
 }

/*----- アニメーション（ボール⑤） -----*/
@-webkit-keyframes anime_ball05 {
	0% {
		opacity: 0;
	}
	5% {
		opacity: 0;
	}
	15% {
		opacity: 1;
		-webkit-transform: translate3d(0, 0, 0);
		Xright: 726px;
		Xtop: 219px;
	}
	16.3% {
		-webkit-transform: translate3d(30px, 0, 0);
		Xright: 696px;
		Xtop: 219px;
	}
	21.2% {
		-webkit-transform: translate3d(148px, 122px, 0);
		Xright: 578px;
		Xtop: 341px;
	}
	35% {
		opacity: 1;
		-webkit-transform: translate3d(469px, 122px, 0);
		Xright: 257px;
		Xtop: 341px;
	}
	45% {
		opacity: 0;
		-webkit-transform: translate3d(469px, 122px, 0);
		Xright: 257px;
		Xtop: 341px;
	}
	100% {
		opacity: 0;
		-webkit-transform: translate3d(0, 0, 0);
		Xright: 726px;
		Xtop: 219px;
	}
}

#canvasFrame .setBallAnime05 {
	-webkit-animation-name: anime_ball05;
	-webkit-animation-duration: 8s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;
 }

#canvasFrame #cvs_point01 {
	position: absolute;
	right: 298px;
	top: 28px;
}

#canvasFrame #cvs_point02 {
	position: absolute;
	right: 298px;
	top: 409px;
}

#canvasFrame #cvs_point03 {
	position: absolute;
	right: 103px;
	top: 409px;
}

#canvasFrame #cvs_point04 {
	position: absolute;
	right: 103px;
	top: 28px;
}

/*----- アニメーション（ポイント①） -----*/
@-webkit-keyframes anime_point01 {
	0% { opacity: 0; }
	35% { opacity: 0; }
	40% { opacity: 1; }
	45% { opacity: 0.3; }
	50% { opacity: 1; }
	55% { opacity: 0.3; }
	60% { opacity: 1; }
	65% { opacity: 0.3; }
	70% { opacity: 1; }
	75% { opacity: 0.3; }
	80% { opacity: 0; }
	100% { opacity: 0; }
}

#canvasFrame .setPointAnime01 {
	-webkit-animation-name: anime_point01;
	-webkit-animation-duration: 8s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;
}

/*----- アニメーション（ポイント②） -----*/
@-webkit-keyframes anime_point02 {
	0% { opacity: 0; }
	45% { opacity: 0; }
	50% { opacity: 1; }
	55% { opacity: 0.3; }
	60% { opacity: 1; }
	65% { opacity: 0.3; }
	70% { opacity: 1; }
	75% { opacity: 0.3; }
	80% { opacity: 1; }
	85% { opacity: 0.3; }
	90% { opacity: 0; }
	100% { opacity: 0; }
}

#canvasFrame .setPointAnime02 {
	-webkit-animation-name: anime_point02;
	-webkit-animation-duration: 8s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;
}

/*----- アニメーション（ポイント③） -----*/
@-webkit-keyframes anime_point03 {
	0% { opacity: 0; }
	50% { opacity: 0; }
	55% { opacity: 1; }
	60% { opacity: 0.3; }
	65% { opacity: 1; }
	70% { opacity: 0.3; }
	75% { opacity: 1; }
	80% { opacity: 0.3; }
	85% { opacity: 1; }
	90% { opacity: 0.3; }
	95% { opacity: 0; }
	100% { opacity: 0; }
}

#canvasFrame .setPointAnime03 {
	-webkit-animation-name: anime_point03;
	-webkit-animation-duration: 8s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;
}

/*----- アニメーション（ポイント④） -----*/
@-webkit-keyframes anime_point04 {
	0% { opacity: 0; }
	55% { opacity: 0; }
	60% { opacity: 1; }
	65% { opacity: 0.3; }
	70% { opacity: 1; }
	75% { opacity: 0.3; }
	80% { opacity: 1; }
	85% { opacity: 0.3; }
	90% { opacity: 1; }
	95% { opacity: 0.3; }
	100% { opacity: 0; }
}

#canvasFrame .setPointAnime04 {
	-webkit-animation-name: anime_point04;
	-webkit-animation-duration: 8s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;
}

/*========================================
	2. ニュース＆バナー表示枠
========================================*/
#informationWrap {
	display: -moz-box;
	display: -webkit-box;
	margin: 0 auto;
	width: 802px;
}

#informationWrap #news {
	margin-right: 1px;
	width: 592px;
	min-height: 221px;
	background: url(../images/bg_information.png) repeat-x 0 18px;
	text-align: left;
	font-size: 10px;
	color: #ffffff;
}

#informationWrap #news h1{
	font-size: 0;
}

#informationWrap #news h1 img {
	vertical-align: bottom;
}

#informationWrap #news .tblFrame {
	margin: 1px 0 0;
	width: 572px;
	Xheight: 143px;
	Xoverflow: hidden;
	Xoverflow-y: auto;
	padding: 9px 10px 5px;
}

#informationWrap #news table {
	Xmargin: 5px 10px;
}

#informationWrap #news table td {
	padding: 5px 0 5px 5px;
	line-height: 1.3;
}

#informationWrap #news table .date {
	white-space: nowrap;
}

#informationWrap #news table .category {
	white-space: nowrap;
}

#informationWrap #news a {
	color: #ffffff;
	text-decoration: none;
}

#informationWrap #bunnerPrimary {
	width: 209px;
	min-height: 221px;
	background: url(../images/bg_information.png) repeat-x 0 18px;
	text-align: center;
}

#informationWrap #bunnerPrimary ul {
	padding: 28px 0 0;
}

#informationWrap #bunnerPrimary ul li {
	margin: 4px auto;
	width: 162px;
	padding: 3px;
	background: url(../images/bg_primaryBanner.png) left top;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
}

#informationWrap #bunnerPrimary ul li span.greetingsMsg {
	display: block;
}

#informationWrap #bunnerPrimary ul li a {
	display: block;
	background: #ffffff;
}

#informationWrap #bunnerPrimary ul li a img {
	-webkit-transition: 0.25s linear;
	-moz-transition: 0.25s linear;
}

#informationWrap #bunnerPrimary ul li a:hover img {
	opacity: 0.7;
}

#bunnerSecondary {
	margin: 15px auto 0;
	width: 592px;
	height: 42px;
	padding: 0;
	text-align: center;
}

#bunnerSecondary ul {
	margin: 0 auto;
	width: 460px;
	display: -moz-box;
	display: -webkit-box;
	text-align: center;
}

#bunnerSecondary ul li {
	border-right: 1px solid #ffffff;
	border-left: 1px solid #ffffff;
	padding: 0 9px;
	-webkit-transition: 0.25s linear;
	-moz-transition: 0.25s linear;
}

#bunnerSecondary ul li:hover {
	background-color: rgba(255, 255, 255, 0.5);
}

#bunnerSecondary ul li:first-child {
	border: none;
}

#bunnerSecondary ul li:last-child {
	border: none;
}

.greetingsWrap {
	display: -moz-box;
	display: -webkit-box;
	margin: 0 auto;
	width: 802px;
	text-align: right;
}

.greetingsWrap p {
	width: 802px;
	text-align: right;
}