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

/*======================================

1: #page-index

=======================================*/

/* pc */
@media only screen and (min-width:768px) {

	/* #page-index */
	/*--------------------------------------------------------------------------------*/
	body.fixed {
		position: fixed;
	}
	#page-index {
		min-width: 1172px;
	}
	#page-index #wrapper { background-color: #fff;}
	#page-index #breadcrumb {
		border-bottom: 120px solid #fff;
		margin-bottom: 334px;
	}
	#page-index h1 {
		position: absolute;
		width: 694px;
		top: 220px;
		left: 50%;
		padding-bottom: 41px;
		margin-left: -347px;
		opacity: 0;
	}
	#page-index .eng-ttl {
		position: absolute;
		top: 313px;
	}
	#page-index .lead {
		position: absolute;
		top: 364px;
		left: 50%;
		width: 970px;
		text-align: center;
		line-height: 2;
		margin-left: -485px;
		opacity: 0;
	}
	#page-index .txt1 {		
		position: relative;
		width: 971px;
		font-size: 20px;
		color: #d00235;
		line-height: 1;
		text-align: center;
		margin: 0 auto 23px;
	}
	#page-index .txt1 .big {
		font-size: 30px;
	}
	#page-index .nav-main {
		width: 971px;
		height: 80px;
		margin: 0 auto 80px;
	}
	#page-index .nav-main a {		
		display: block;
		width: 323px;
		height: 80px;
		font-size: 19px;
		color: #fff;
		line-height: 1.3;
		text-align: center;
		background: url(../../spirit/img/icon_nav_tri_white.png) no-repeat 313px 70px;
		background-size: 6px auto;
		background-color: #d00235;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		padding-top: 30px;
	}
	#page-index .nav-main a:hover {
		background-color: #9e9e9e;

	}
	#page-index .nav-main > div { position: relative;}
	#page-index .nav-main .nav1,
	#page-index .nav-main .nav2 { margin-right: 1px;}
	#page-index .nav-main .nav1,
	#page-index .nav-main .nav2,
	#page-index .nav-main .nav3 { float: left;}
	#page-index #main {
		position: fixed;
		top: 0;
		left: 50%;
		width: 100%;
		min-width: 1172px;
		margin-left: -50%;
		z-index: -1;
	}
	#page-index #main .pre {
		position: absolute;
		width: 100%;
	}
	#page-index #main img {	width: 100%; height: auto; opacity: 0;}
	#page-index article {
		min-width: 1111px;
		background-color: #fff;
		margin: 0 auto;
		padding: 80px 0 0;
	}
	#page-index article section {
		position: relative;
	}
	#page-index article section .inner {
		position: relative;
		width: 971px;
		margin: 0 auto;
	}
	#page-index article section p {
		width: 422px;
		font-size: 16px;
		line-height: 1.6;
		padding: 29px 0 31px;
	}	
	#page-index .slide-block {
		position: absolute;
		width: 1172px;
		top: 0;
		left: 50%;
		margin-left: -586px;
	}
	#page-index .slide-block .slide {
		padding-right: 32px;
		margin-left: -32px;
	}
	#page-index .slide-block .btn-next {
		position: absolute;
		bottom: 13px;
		left: 1089px;
		z-index: 2;
		cursor: pointer;
	}
	#page-index .slide-block .btn-prev {
		position: absolute;
		bottom: 13px;
		left: 1037px;
		z-index: 2;
		cursor: pointer;
	}
	#page-index article .approach {
		float: left;
		width: 470px;
		padding-top: 60px;
		margin-right: 30px;
	}
	#page-index article .approach h3 {
		font-size: 18px;
		color: #d00235;
		border-bottom: 1px solid #d00235;
		margin-bottom: 25px;
	}
	#page-index article .approach li {		
		list-style: none;
		font-size: 16px;
		line-height: 1.6;
		text-indent: -16px;
		padding-left: 16px;
		margin-bottom: 12px;
	}
	#page-index article span.bold { font-weight: bold;}
	#page-index .logo-box {
		padding-top: 20px;
	}
	#page-index .logo-box img { margin-right: 5px;}
	#page-index .pic-box {
		line-height: 1;
		padding-top: 20px;
	}
	#page-index .pic-box p {
		font-size: 14px;
		line-height: 1.5;
		width: auto !important;
		padding: 60px 0 0;
	}
	#page-index .pic-box img {
		float: left;
		margin-right: 17px;
	}
	#page-index article .box {
		float: left;
		width: 470px;
		border: 2px solid #d00235;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		padding: 0 15px 23px;
		margin: 60px 0 0;
	}
	#page-index article .box h3 {
		font-size: 18px;
		color: #d00235;
		line-height: 1;
		text-align: center;
		padding: 19px 0 10px;
		border-bottom: 1px solid #d00235;
		margin-bottom: 17px;
	}
	#page-index article .box li {
		
		list-style: none;
		font-size: 16px;
		line-height: 1.6;
		text-indent: -16px;
		padding-left: 16px;
		margin-bottom: 12px;
	}
	#page-index article .link-modal a {
		font-size: 16px;
		color: #d00235;
		text-decoration: underline;
	}
	#page-index #labo,
	#page-index #sales,
	#page-index #solution {
		position: relative;
		padding: 0 0 80px;
		margin-bottom: 80px;
		border-bottom: 1px solid #d7d7d7;
	}
	#page-index #solution {
		margin: 0;
		border: none;
	}
	#page-index #labo h2,
	#page-index #sales h2,
	#page-index #solution h2 {
		position: relative;
		width: 460px;
		height: 330px;
		font-size: 26px;
		line-height: 1.7;
		letter-spacing: 0;
		background-color: #fff;
		margin-left: -40px;
		z-index: 2;
		padding: 73px 42px 0;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}
	#page-index #solution h2 { padding-top: 63px;}
	#page-index .red { color: #d00235;}	
	#page-index #sales .btn-office {
		float: left;
	}
	#page-index #sales .btn-office a {	
		display: block;
		width: 310px;
		height: 50px;
		font-size: 13px;
		line-height: 1.4;
		color: #fff;
		background: url(../../spirit/img/icon_arrow_white.png) no-repeat 291px center;
		background-size: 6px auto;
		background-color: #d00235;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		padding: 7px 25px 0 15px;
		margin: 30px 0 0 80px;
	}
	#page-index #sales .btn-office a:hover {
		background-color: #9e9e9e;
	}
	#page-index #slogan {
		padding: 73px 0 84px;
	}
	#page-index #slogan h2 {
		position: relative;
		padding-left: 104px;
		z-index: 2;
	}
	#page-index #slogan .pic {
		margin: -61px 0 0;
	}
	#page-index #slogan .txt {
		
		font-size: 18px;
		line-height: 1.7;
		text-align: center;
		padding: 43px 0 0 14px;
	}
}

@media all and (-ms-high-contrast:none){
  *::-ms-backdrop, #page-index .nav-main .nav4 {
	  padding-top: 2px;
  }
}


/* tablet */
@media only screen and (min-width:768px) and (max-width:959px){
}

/* sp */
@media only screen and (max-width:767px) {

	/* #page-index */
	/*--------------------------------------------------------------------------------*/
	#page-index h1 {
		position: relative;
		font-size: 2.6rem;
		padding: 20px 0;
		margin: 0 auto;
		opacity: 0;
		z-index: 2;
	}
	#page-index #main {
		position: relative;
		width: 100%;
		height: 134px;
		background: url(../../spirit/img/main_sp.jpg) no-repeat center;
		background-size: cover;
		border-bottom: 5px solid #fff;
		overflow: hidden;		
		margin-top: -98px;
	}
	#page-index #main .pre {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 134px;
		background: url(../../spirit/img/main_pre_sp.jpg) no-repeat center;
		background-size: cover;
	}
	#page-index #main img { width: 100%; height: auto; opacity: 0;}
	#page-index .lead {
		position: relative;
		max-width: 320px;
		width: 94%;
		height: 65px;
		margin: 0 auto;
		z-index: 2;
		opacity: 0;
	}
	#page-index .txt1 {		
		font-size: 1.4rem;
		text-align: center;
		line-height: 1.3;
		color: #d00235;
		padding: 30px 3% 12px;
	}
	#page-index .txt1 .big {
		font-size: 2rem;
	}
	#page-index .nav-main {
		width: 302px;
		margin: 0 auto;
	}	
	#page-index .nav-main a {		
		display: block;
		width: 100%;
		height: 70px;
		font-size: 1.3rem;
		letter-spacing: 0;
		color: #fff;
		line-height: 1.3;
		letter-spacing: 0;
		text-align: center;
		background: url(../spirit/img/icon_nav_tri_white.png) no-repeat 92px 62px;
		background-size: 6px auto;
		background-color: #d00235;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		padding: 19px 3px 0;
	}
	#page-index .nav-main > div { position: relative; float: left;}
	#page-index .nav-main .nav1,
	#page-index .nav-main .nav2 { margin-right: 1px;}
	#page-index .nav-main .nav1,
	#page-index .nav-main .nav2,
	#page-index .nav-main .nav3 {
		width: 100px;
	}

	#page-index article { width: 100%; border-top: 4px solid #d00235;}
	#page-index #wrapper { width: 100%;}
	#page-index article section {
		position: relative;
		padding: 40px 0;
		border-bottom: 1px solid #d7d7d7;
	}
	#page-index #col1 {
		overflow: hidden;
	}
	#page-index #labo h2,
	#page-index #sales h2,
	#page-index #solution h2 {
		font-size: 2rem;
		line-height: 1.4;
		letter-spacing: 0;
		padding: 0 3% 230px;
	}

	#page-index .slide-block {
		position: absolute;
		top: 160px;
		left: 0;
		width: 100%;
	}
	#page-index .slide-block .slide img {
		width: 100% !important; height: auto !important;
	}	
	#page-index .slide-block .slide {
		padding-left: 51px;
		margin-right: -51px;
	}
	#page-index .slide-block .btn-next {
		position: absolute;
		bottom: 3px;
		right: 25px;
		margin-top: -9px;
		z-index: 2;
		cursor: pointer;
	}
	#page-index .slide-block .btn-prev {
		position: absolute;
		bottom: 3px;
		left: 25px;
		margin-top: -9px;
		z-index: 2;
		cursor: pointer;
	}
	#page-index article section .inner {
		width: 96%;
		margin: 0 auto;
	}
	#page-index article section p {
		font-size: 1.4rem;
		line-height: 1.6;
		padding: 20px 0;
	}	
	#page-index article .approach {
		padding: 0 3%;
		margin-bottom: 20px;
	}
	#page-index article .approach h3 {
		font-size: 1.5rem;
		color: #d00235;
		border-bottom: 1px solid #d00235;
		margin-bottom: 6px;
	}
	#page-index article .approach li {
		
		list-style: none;
		font-size: 1.2rem;
		line-height: 1.6;
		text-indent: -12px;
		padding-left: 12px;
		margin-bottom: 2px;
	}
	
	#page-index article span.bold { font-weight: bold;}
	#page-index .logo-box {
		padding-top: 10px;
		margin-bottom: 20px;
	}
	#page-index .logo-box img { margin-right: 10px;}
	#page-index .pic-box {
		font-size: 14px;
		line-height: 1;
		padding-top: 20px;
		margin-bottom: 20px;
	}
	#page-index .pic-box p {
		padding-top: 0;
	}
	#page-index .pic-box img {
		display: block;
		vertical-align: bottom;
		margin-bottom: 10px;
	}
	#page-index article .box {
		width: 100%;
		border: 2px solid #d00235;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		padding: 0 15px 23px;
	}
	#page-index article .box h3 {
		color: #d00235;
		font-size: 1.5rem;
		line-height: 1;
		text-align: center;
		padding: 19px 0 10px;
		border-bottom: 1px solid #d00235;
		margin-bottom: 10px;
	}
	#page-index #solution .box h3 {
		line-height: 1.2;
	}
	#page-index article .box li {		
		list-style: none;
		font-size: 1.2rem;
		line-height: 1.6;
		text-indent: -12px;
		padding-left: 12px;
		margin-bottom: 10px;
	}
	#page-index article .link-modal a {
		font-size: 1.3rem;
		color: #d00235;
		text-decoration: underline;
	}
	#page-index .red { color: #d00235;}
	#page-index #solution .slide img {
		width: 100%; height: auto;
	}
	
	#page-index #sales .btn-office a {		
		display: block;
		width: 100%;
		height: 44px;
		font-size: 1.3rem;
		text-align: center;
		line-height: 1.3;
		color: #fff;
		background: url(../../spirit/img/icon_arrow_white.png) no-repeat 95% 17px;
		background-size: 6px auto;
		background-color: #d00235;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		padding: 6px 10% 0 5%;
		margin-top: 20px;
	}
}