@charset "utf-8";
/***********************
  YSKフェア2018用CSS
  YSKフェア概要ページ
  auther: smiyata
***********************/

div#opening_slide{
	position: absolute;
	overflow: hidden;
	width: 747px;
	height: 320px;
	top: 10;
	left: 50;
	animation:
		op_0 10s linear 0s 1 normal both;
	z-index: 0;
	cursor: default;
}


/***********************
  下線・文字�@
***********************/

div#img_inner_wrap{
	position: relative;
	width: 700px;
	height: 100px;
	margin: 0 auto;
}

div#op_ul{
	display: inline-block;
	position: relative;
	margin-top: 200px;
	margin-left: 0px;
	width: 80%;
	border-top: 2px solid #555555;
	opacity:0.0;
	animation:
		op_1 3.5s linear 1s 1 normal both;
}

div#op_msg_wrap{
	display: inline-block;
	position: absolute;
	top: 100px;
	left: 100px;
	width: 80%;
	color: #555555;
	opacity:0.0;
	animation:
		op_2 3.5s linear 1s 1 normal both;
}

div#op_msg_1{
	display: inline-block;
	position: absolute;
	top: 35px;
	left: 26px;
	font-size: 40pt;
	opacity:0.0;
	animation:
		op_3 3.5s ease-in 1s 1 normal both;
}


@keyframes op_0 {
	0% {z-index: 1;}
	100% {z-index: 1;}
}

@keyframes op_1 {
	0% {max-width: 0px; opacity:1.0;}
	7% {max-width: 1000px; opacity:1.0;}
	85% {max-width: 1000px; opacity:1.0;}
	90% {max-width: 1000px; opacity:0.0;}
	100% {max-width: 1000px; opacity:0.0;}
}

@keyframes op_2 {
	0% {opacity:1.0;}
	85% {opacity:1.0;}
	90% {opacity:0.0;}
	100% {opacity:0.0;}
}

@keyframes op_3 {
	0% {opacity:0.0;}
	15% {opacity:0.0;}
	30% {opacity:1.0;}
	100% {opacity:1.0;}
}


/***********************
  文字�A
***********************/

div#op_msg_wrap2{
	display: inline-block;
	position: absolute;
	top: 100px;
	left: 100px;
	width: 80%;
	color: #555555;
	opacity:0.0;
	animation:
		op_4 7s linear 2s 1 normal both;
}

div#op_msg_3{
	display: inline-block;
	position: absolute;
	top: 50px;
	left: -6px;
	font-size: 20pt;
	opacity:0.0;
	animation:
		op_5 7s ease-in 2s 1 normal both;
}

@keyframes op_4 {
	0% {opacity:1.0;}
	85% {opacity:1.0;}
	90% {opacity:0.0;}
	100% {opacity:0.0;}
}

@keyframes op_5 {
	0% {opacity:0.0; transform: scale(0);}
	33% {opacity:0.0;}
	66% {opacity:1.0;}
	100% {opacity:1.0; transform: scale(1.75);}
}


/***********************
  バナー画像
***********************/

img#top_img_bg{
	position: absolute;
	bottom: 0;
	width: 747px;
	height: 250px;
	top: 0px;
	left: -22px;
	animation-name: delete_img;
	animation-duration: 0s;
	animation-timing-function: linear;
	animation-iteration-count: 1;
	animation-fill-mode: both;
	animation-direction: normal;
	animation-delay: 5s;
}

@keyframes delete_img {
	0% {opacity:1.0;}
	100% {opacity:0.0;}
}

img#top_img_main{

position: absolute;
	bottom: 0;
	width: 745px;
	height: 315px;
	top: 2.5px;
	left: -22.5px;
	animation-name: fade_in;
	animation-duration: 3s;
	animation-timing-function: linear;
	animation-iteration-count: 1;
	animation-fill-mode: both;
	animation-direction: normal;
	animation-delay: 8.5s;
}

@keyframes fade_in {
	0% { opacity:0.0;}
	100% { opacity:1.0;}
}

img#top_img_main2{

position: absolute;
	bottom: 0;
	width: 745px;
	height: 315px;
	top: 2.5px;
	left: -22.5px;
	animation-name: fade_in2;
	animation-duration: 2s;
	animation-timing-function: linear;
	animation-iteration-count: 1;
	animation-fill-mode: both;
	animation-direction: normal;
	animation-delay: 9s;
}

@keyframes fade_in2 {
	0% { opacity:0.0;}
	100% { opacity:1.0;}
}


img#top_img_main3{

position: absolute;
	bottom: 0;
	width: 745px;
	height: 315px;
	top: 2.5px;
	left: -22.5px;
	animation-name: fade_in3;
	animation-duration: 2s;
	animation-timing-function: linear;
	animation-iteration-count: 1;
	animation-fill-mode: both;
	animation-direction: normal;
	animation-delay: 10s;
}

@keyframes fade_in3 {
	0% { opacity:0.0;}
	100% { opacity:1.0;}
}


/***********************
  タブ
***********************/

div#solu_wrap{
	position: relative;
	margin: 0px 0px 40px;
	padding: 90px 0 0;
	text-align: center;
	width: 100%;
	height: 190px;
	background: #f3f3f3;
	overflow: hidden;
}