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

/*
index.html
#top
#service
#news
*/



/*================================================================================
	INDEX HOME
================================================================================*/
body { background:#fff url(../img/index/bg_home.jpg) no-repeat 50% 0; }

/* top
--------------------------------------------------------------------------------*/
#top { background-color:rgba(255,255,255,0.7); }
#top p {
	color:#0ca0d0;
	font-size:20px;
	font-weight:bold;
	line-height:200%;
}
#top p:nth-child(1) { margin-bottom:45px; }

/* service
--------------------------------------------------------------------------------*/
#service { background-color:#eef6f9; margin-bottom:40px; }
#service li { margin-bottom:20px; }

/* news
--------------------------------------------------------------------------------*/
#news { padding-bottom:0; }
#news ul { margin:0 auto 60px; }
#news li { margin-bottom:20px; }
#news li span {
	color:#0ca0d0;
	font-weight:bold;
}




/*================================================================================
	Animation keyframes
================================================================================*/
@keyframes text_01 {
	0% { transform:rotate(15deg); top:-200px; opacity:0.4; }
	100% { transform:rotate(0); top:0; opacity:1.0; }
}
@keyframes text_02 {
	0% { transform:rotate(-15deg); top:-200px; opacity:0.4; }
	100% { transform:rotate(0); top:0; opacity:1.0; }
}
@keyframes text_03 {
	0% { transform:rotate(0); top:-200px; opacity:0.4; }
	100% { transform:rotate(0); top:0; opacity:1.0; }
}
@keyframes text_04 {
	0% { transform:rotate(13deg); top:-200px; opacity:0.4; }
	100% { transform:rotate(0); top:0; opacity:1.0; }
}
@keyframes text_05 {
	0% { transform:rotate(-10deg); top:-200px; opacity:0.4; }
	100% { transform:rotate(0); top:0; opacity:1.0; }
}
@keyframes text_06 {
	0% { transform:rotate(8deg); top:-200px; opacity:0.4; }
	100% { transform:rotate(0); top:0; opacity:1.0; }
}
@keyframes text_07 {
	0% { transform:rotate(160deg); top:-200px; opacity:0.4; }
	80% { transform:rotate(-30deg); top:0; opacity:1.0; }
	100% { transform:rotate(0); top:0; opacity:1.0; }
}


/*================================================================================
	Media screen : PC 640px
================================================================================*/
@media screen and (min-width: 640px) {

/* header
--------------------------------------------------------------------------------*/
header { height:510px;/* 770px - 260px */ }
header p:nth-child(1) { margin-top:260px; }
header p:nth-child(3) { margin-top:20px; }

/* position */
header h1 {
	margin-top:20px;
	width:100%;
	height:120px;
	position:relative;
}
header h1 img { position:absolute; top:0; opacity:0; }
header h1 img:nth-child(1) { left:  0px; }
header h1 img:nth-child(2) { left:175px; }
header h1 img:nth-child(3) { left:290px; }
header h1 img:nth-child(4) { left:405px; }
header h1 img:nth-child(5) { left:530px; }
header h1 img:nth-child(6) { left:655px; }
header h1 img:nth-child(7) { left:780px; }
/* animation */
header h1 img:nth-child(1) {
	animation:text_01 0.5s forwards;
	animation-delay:0.4s;
}
header h1 img:nth-child(2) {
	animation:text_02 0.5s forwards;
	animation-delay:0.6s;
}
header h1 img:nth-child(3) {
	animation:text_03 0.5s forwards;
	animation-delay:0.8s;
}
header h1 img:nth-child(4) {
	animation:text_04 0.5s forwards;
	animation-delay:1.0s;
}
header h1 img:nth-child(5) {
	animation:text_05 0.5s forwards;
	animation-delay:1.2s;
}
header h1 img:nth-child(6) {
	animation:text_06 0.5s forwards;
	animation-delay:1.4s;
}
header h1 img:nth-child(7) {
	animation:text_07 0.5s forwards;
	animation-delay:1.6s;
}

/* nav
--------------------------------------------------------------------------------*/
nav {
	position:fixed;
	top:0;
	z-index:10;
}
nav img { display:none; }
#btn_menu { display:none; }

#sp_header { display:none; }

/* top
--------------------------------------------------------------------------------*/
#top p { text-align:center; }
#top p span { display:block; }
#top ol { margin-bottom:50px; }
#top ol li { float:left; }
#top ol li:nth-child(1) { margin-bottom:20px; }
#top ol li:nth-child(2) { margin-right:20px; }
#top ol li:nth-child(3) { margin-right:20px; }

/* service
--------------------------------------------------------------------------------*/
#service a:hover img { opacity:0.7; }

/* news
--------------------------------------------------------------------------------*/
#news ul { width:780px; }
#news li span { margin-right:50px; }

}

/*================================================================================
	Media screen : 横幅100%時の背景色ヌケ防止
================================================================================*/
@media screen and (min-width: 641px) and (max-width: 939px) {

#top,
#service { width:940px; }

}

/*================================================================================
	Media screen : SP 640px
================================================================================*/
@media screen and (max-width: 640px) {

body { background:#fff url(../img/index/bg_home_sp.jpg) no-repeat 50% 0; background-size:cover; }

/* header
--------------------------------------------------------------------------------*/
header { height:40px; }

/* nav
--------------------------------------------------------------------------------*/
nav {
	width:100%;
	position:fixed;
	top:0;
}
nav img {
	padding-top:15px;
	width:220px;
	height:auto;
}
#btn_menu { right:14px; }

/* sp_header
--------------------------------------------------------------------------------*/
#sp_header img {
	width:100%;
	height:auto;
}
#sp_header h1 { margin-bottom:45px; }
#sp_header p { margin-bottom:100px; }
#sp_header a {
	width:100%;
	height:0;
	padding-top:25px;
	display:block;
	overflow:hidden;
	background:url(../img/common/icon_arrow_down.png) no-repeat 50% 0;
	background-size:50px 25px;
}

/* top
--------------------------------------------------------------------------------*/
#top ol { margin-bottom:20px; }
#top ol li { margin-bottom:20px; }
#top ol li:nth-child(1) { margin-bottom:0; }
#top ol img { width:100%; height:auto; }

/* service
--------------------------------------------------------------------------------*/
#service img { width:100%; height:auto; }

/* news
--------------------------------------------------------------------------------*/
#news li {
	padding-bottom:20px;
	border-bottom:1px solid #f4f4f4;
}
#news li a {
	padding-right:40px;
	display:block;
	background:url(../img/common/icon_arrow_right_g.png) no-repeat 95% 75%;
	background-size:12px 24px;
}
#news li span { display:block; }

}


/*================================================================================
	clearfix
================================================================================*/
header h1:after,
#top ol:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}
/* clearfix for ie7 */
header h1,
#top ol {
	display: inline-block;
}
header h1,
#top ol {
	display: block;
}


@media screen and (min-width: 640px) {

#top ol:nth-child(3),
#service ul:nth-child(3) { display:none; }

}
@media screen and (max-width: 640px) {

header h1,
#top ol:nth-child(2),
#service ul:nth-child(2) { display:none; }

}