﻿#topSlide {
	animation: 2s top_fadeIn forwards;
	opacity: 0;
}
#topImage {
	position: relative;
	
	& .bg1, & .bg2 {
		background-position: 50% 50%;
		background-size: cover;
		
		position: absolute;
		height: 100%;
		width: 100%;
	}
	& .bg1 {
		background-image: url("../img/top/top_image_san.jpg");
	}
	& .bg2 {
		background-image: url("../img/top/top_image_premium_sakura.jpg");
		animation: 20s top_fadeIn-Out linear infinite ;
	}
	& h1 {
		background-color: transparent;
		color: #fff;
		font-weight: bold;
		line-height: 1.4;
		padding: 0;
		opacity: 0;
		text-align:center;
		
		animation: 4s top_fadeIn_logo forwards;
		
		position: absolute;
		width: 100%;
	}
	& p {
		padding: 0;
		line-height: 1;
		opacity: 0;
		animation: 4s top_fadeIn_logo forwards;
		
		position: absolute;
		width: 100%;
	}
}

@keyframes top_fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}
@keyframes top_fadeIn-Out {
	0% {
		opacity: 1;
	}
	45% {
		opacity: 1;
	}
	50% {
		opacity: 0;
	}
	95% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
@keyframes top_fadeIn_logo {
	0% {
		opacity: 0;
	}
	50% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
@media print, (min-width : 768px) {
	#topImage {
		height: 794px;
		text-align: center;
		
		h1 {
			margin-top: 200px;
		}
		p {
			top: 550px;
		}
		p img {
			max-width: 160px;
		}
	}
}
@media only screen and (max-width : 767px) {
	#topImage {
		height: 360px;
		text-align: center;
		
		h1 {
			margin-top: 60px;
		}
		h1 img {
			max-width: 100px;
		}
		p {
			top: 280px;
		}
		p img {
			max-width: 120px;
		}	
	}
}


#top_info {
	background-color: #E10000;
	color: #fff;
}
#top_info a {
    background-color: #E10000;
	color: #fff;
	display: block;
	line-height: 1.4;
	text-decoration: none;
}
#top_info a:hover {
    background-color: #E10000;
	color: #fcc;
}
#top_info .top_infoarea {
	position: relative;
}
.bx-wrapper {
	margin-bottom: 0 !important;
	-moz-box-shadow: none !important;
	-webkit-box-shadow: none !important;
	box-shadow: none !important;
	border: none !important;
	background: transparent !important;
    color: #fff;
}
#top_info ul li a span.title span.new {
	padding-left: 4px;
	animation: top_new_flash 2.5s linear infinite;
	
}
@keyframes top_new_flash {
  25%,75% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }
}
@media print, (min-width : 768px) {
	#top_info h2 {
		float: left;
		font-weight: bold;
		font-size: 24px;
		padding: 6px 24px 4px;
		line-height: 1;
		font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
		border-right: 1px solid;
	}
	#top_info .top_infoarea {
		padding: 12px 0;
		max-width: calc(1024px);
		margin: 0 auto;
		overflow: hidden;
	}
	#top_info p {
		position: absolute;
		top: 18px;
		right: 12px;
	}
	#top_info .sliderarea {
		float: left;
		width: calc(100% - 270px);
	}
	#top_info ul li a {
		padding: 6px 24px 4px;
	}
	#top_info ul li a span.title {
		padding-left: 24px;
	}
}
@media only screen and (max-width : 767px) {
	#top_info {
		padding: 0 12px;
	}
	#top_info h2 {
		display: none;
	}
	#top_info p {
		display: none;
	}
    #top_info ul li a {
        padding: 12px 0 10px;
    }    
	#top_info ul li a span.title {
		display: block;
	}
}
.topContentArea {
	margin: 40px 0 80px;
}
#container h2 {
	font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
	font-size: 24px;
	line-height: 1.6;
	text-align: center;
}
#container a.moreinfo {
    background-color: #fff;
	border: 1px solid #333;
	color: #333;
	display: block;
	margin: 0 auto;
	padding: 16px 40px;
	text-align: center;
	text-decoration: none;
	width: 120px;
}
#container a.moreinfo:hover {
	background-color: #333;
	color: #fff;
}
@media print, (min-width : 768px) {
	#container h2 {
		font-size: 28px;
	}
}
@media only screen and (max-width : 767px) {
	#container h2 {
		font-size: 24px;
	}
}

#top_idea {
	text-align: center;
}
#top_idea p {
	line-height: 1.6;
	margin: 20px 0 40px;
}
@media print, (min-width : 768px) {
	#top_idea h2 br,
	#top_idea p br {
		display: none;
	}
}
@media only screen and (max-width : 767px) {
}

#top_hoshi {
    text-align: center;
}
#top_hoshi img {
    max-width: min(500px,100%);
}

@media print, (min-width : 768px) {
}
@media only screen and (max-width : 767px) {
}

