@charset "utf-8";
@import url(reset.css);
@import url(base.css);
@import url(common.css);

#wrap {
	padding:0;
}

#container {
	padding:70px 0 100px;
}

/*-------------------------------------------------------------------
	slider
-------------------------------------------------------------------*/

#slider {
	overflow:hidden;
	zoom:1;
}

#slider ul {
	width:100%;
}

#slider ul li {
	width:100%;
	height:650px;
}

@media screen and (min-width: 1500px){
	#slider ul li {
		height:800px;
	}

}

#slider ul li:nth-child(1) {
	background:url(../image/index/slide01.jpg) bottom center no-repeat;
	background-size:100% auto;
}

#slider ul li:nth-child(2) {
	background:url(../image/index/slide02.jpg) bottom center no-repeat;
	background-size:100% auto;
}

#slider ul li:nth-child(3) {
	background:url(../image/index/slide03.jpg) bottom center no-repeat;
	background-size:100% auto;
}

#slider ul li:nth-child(4) {
	background:url(../image/index/slide04.jpg) bottom center no-repeat;
	background-size:100% auto;
}

#slider ul li:nth-child(5) {
	background:url(../image/index/slide05.jpg) bottom center no-repeat;
	background-size:100% auto;
}

#slider ul li:nth-child(6) {
	background:url(../image/index/slide06.jpg) bottom center no-repeat;
	background-size:100% auto;
}

#slider .bx-wrapper {
	margin: 0 auto !important;
	padding:0 !important;
}

#slider .bx-wrapper .bx-viewport {
	border:none !important;
	left:0 !important;
	background:none !important;
}

#slider .bx-wrapper .bx-pager {
	bottom: 20px !important;
}

#slider .bx-wrapper {
	margin: 0 auto !important;
	padding:0 !important;
}

#slider .bx-wrapper .bx-pager.bx-default-pager a {
	background:#FFF;
}

#slider .bx-wrapper .bx-pager.bx-default-pager a:hover,
#slider .bx-wrapper .bx-pager.bx-default-pager a.active {
	background: #41a2d6 !important;
}

/*-------------------------------------------------------------------
	要素
-------------------------------------------------------------------*/

#index {
}


#index h2 {
	width:795px;
	margin:0 auto 90px;
	position:relative;
	text-align:center;
}

#index h2 span {
	display:inline-block;
	background:#FFF;
	position:relative;
	font-size:3.2em;
	line-height:1.0;
	font-weight:600;
	z-index:5;
	padding:0 20px;
}

#index h2:after {
	background:url(../image/common/title_line.png) left repeat-x;
	width:100%;
	height:8px;
	content:'';
	position:absolute;
	top:50%;
	left:0;
	transform:translateY(-50%);
}


#index .linkarea {
}

#index .linkarea li {
	margin:0 0 20px;
	position:relative;
}


#index .linkarea li a {
	display:block;
	position:relative;
	width:100%;
	height:100%;
	overflow:hidden;
}

#index .linkarea li .red {
	position: absolute;
  top: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  background: rgba(165,10,3,.9);
  -webkit-transition: .3s;
  transition: .3s;
  opacity: 1;
}

#index .linkarea li.move01 a .red {
	left: -100%;
}

#index .linkarea li.move02 a .red {
	right: -100%;
}


#index .linkarea li.move01 a:hover .red {
	left: 0;
}

#index .linkarea li.move02 a:hover .red {
	right:0;
}

#index .linkarea li a .same {
	background:#edece3;
	overflow:hidden;
	zoom:1;
	position:relative;
	color:#000;
}

#index .linkarea li:hover a .same {
	color:#fff;
}

#index .linkarea li.move01 a .same:before {
	position:absolute;
	bottom:20px;
	right:20px;
	background:#999999;
	width:1px;
	height:88%;
	content:'';
	z-index:98;
}

#index .linkarea li.move01 a .same:after {
	position:absolute;
	bottom:20px;
	right:20px;
	background:#999999;
	width:36%;
	height:1px;
	content:'';
	z-index:98;
}

#index .linkarea li.move01 a:hover .same:before,
#index .linkarea li.move01 a:hover .same:after {
	background:#FFF;
}


#index .linkarea li.move02 a .same:before {
	position:absolute;
	bottom:20px;
	left:20px;
	background:#999999;
	width:1px;
	height:88%;
	content:'';
	z-index:98;
}

#index .linkarea li.move02 a .same:after {
	position:absolute;
	bottom:20px;
	left:20px;
	background:#999999;
	width:36%;
	height:1px;
	content:'';
	z-index:98;
}

#index .linkarea li.move02 a:hover .same:before,
#index .linkarea li.move02 a:hover .same:after {
	background:#FFF;
}



#index .linkarea li.move02 a .same:after {
}

#index .linkarea li a .same.left .photo {
	float:left;
	width:60%;
}

#index .linkarea li a .same.right .photo {
	float:right;
	width:60%;
}

#index .linkarea li a .same .photo img {
	width:100%;
}

#index .linkarea li a .same .text {
	width:40%;
	height:100%;
	position:relative;
	z-index:99;
}


#index .linkarea li a .same .text .into {
	padding:50px 0;
}

#index .linkarea li a .same .text .into dl {
	width:60%;
	margin:0 auto;
}

#index .linkarea li a .same .text .into dl {
	padding:0 0 30px;
	background:url(../image/index/index_line01.png) left bottom no-repeat;
}

#index .linkarea li:hover a .same .text .into dl {
	background:url(../image/index/index_line02.png) left bottom no-repeat;
}

#index .linkarea li a .same .text .into dl dt {
	position:relative;
	font-size:2.3em;
	line-height:1.2;
	font-weight:600;
	padding:0 0 10px;
	margin:0 0 20px;
}

#index .linkarea li a .same .text .into dl dt:before {
	position:absolute;
	left:0;
	bottom:0;
	background:#c11920;
	width:50%;
	height:2px;
	content:'';
	z-index:99;
}

#index .linkarea li a .same .text .into dl dt:after {
	position:absolute;
	right:0;
	bottom:0;
	background:#999999;
	width:50%;
	height:2px;
	content:'';
	z-index:99;
}

#index .linkarea li a .same .text .into dl dt span {
	position:relative;
	padding-left:15px;
}

#index .linkarea li a .same .text .into dl dt span:before {
	position:absolute;
	top:50%;
	left:0;
	width:10px;
	height:0.05em;
	background:#000;
	content:"";
}

#index .linkarea li a:hover .same .text .into dl dt span:before {
	background:#fff;
}


#index .linkarea li a .same .text .into dl dd {
	line-height:2.0;
}

#index .linkarea li a .same.left .text {
	float:right;
}

#index .linkarea li a .same.right .text {
	float:left;
}


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

	#index .linkarea li a .same .text .into dl {
		width:70%;
	}


}


#index .sublink {
	overflow:hidden;
	zoom:1;
	margin:0 0 90px;
}

#index .sublink li {
	width:50%;
	float:left;
}

#index .sublink li a {
	display:block;
	position:relative;
}

#index .sublink li a figure img {
	max-width:100%;
}

#index .sublink li a .ttl {
	width:100%;
	position:absolute;
	top:50%;
	transform:translateY(-50%);
	text-align:center;
}

#index .sublink li a .ttl span {
	display:inline-block;
	padding:0 0 1px;
	color:#FFF;
	font-size:2.3em;
	text-align:center;
	width:60%;
	line-height:1.4;
	position:relative;
}

#index .sublink li a .ttl span:before {
	position: absolute;
  bottom: 0;
  left: 50%;
  content: "";
  display: inline-block;
  width: 0;
  height: 1px;
  background: #fff;
  transition: .6s;
	transform:translateX(-50%);
}

#index .sublink li a:hover .ttl span:before {
	width: 100%;
}


/*
#index .sublink li a:hover .ttl span {
	border-bottom:1px solid #FFF;
	padding:0;
}
*/

/* inner */

#index .inner {
	width:960px;
	margin:0 auto;
}

#index .inner .bnrarea {
	overflow:hidden;
	zoom:1;
}


#index .inner .bnrarea li {
	float:left;
	margin-right:30px;
}

#index .inner .bnrarea li:last-child {
	margin-right:0;
}


#index .inner .bnrarea li a,
#index .inner .bnrarea li span {
	display:block;
	position:relative;
	width:100%;
	height:100%;
	overflow:hidden;
}

#index .inner .bnrarea li a .box,
#index .inner .bnrarea li span .box {
	border:1px solid #fff;
	width:94%;
	height:94%;
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	content:'';
	z-index:95;
}

#index .inner .bnrarea li a .ttl,
#index .inner .bnrarea li span .ttl {
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	color:#fff;
	font-size:2.3em;
	line-height:1.2;
	font-weight:600;
	z-index:99;
	text-align:center;
}

#index .inner .bnrarea li span .ttl b {
	font-weight:300;
	font-size:0.5em;
}


#index .inner .bnrarea li a .yellow {
	position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  background: rgba(180,165,93,.8);
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
  -webkit-transition: .5s;
  transition: .5s;
  opacity: 0;
}

#index .inner .bnrarea li a:hover .yellow {
	-webkit-transform: rotateY(0);
  transform: rotateY(0);
  opacity: 1;
}


/*===============================================
  画面の横幅が1024px以下に適用
===============================================*/
@media screen and (max-width: 1024px){
	
	#wrap {
		padding:0 !important;
	}
	
	#slider ul li {
		height:550px;
	}
	
	
	#index h2 {
		width:94%;
	}

	#index .linkarea li a .same.left .photo {
		float:none;
		width:100%;
	}

	#index .linkarea li a .same.right .photo {
		float:none;
		width:100%;
	}

	#index .linkarea li a .same .text {
		width:100%;
		height:100%;
		position:relative;
		z-index:99;
	}
	
	#index .linkarea li.move01 a .same:after {
		width:88%;
	}

	#index .linkarea li.move02 a .same:after {
		width:88%;
	}


	#index .linkarea li a .same .text .into {
		padding:30px 0;
	}

	#index .linkarea li a .same .text .into dl {
		width:80%;
	}

	/* inner */

	#index .inner {
		width:94%;
		margin:0 auto;
	}

	#index .inner .bnrarea li {
		max-width:24%;
		float:left;
		margin-right:1%;
	}
	
	#index .inner .bnrarea li:last-child {
		margin-right:0;
	}
	
	#index .sublink li a .ttl {
		text-align:left;
		padding-left:5%;
	}
	
	#index .sublink li a .ttl span {
		text-align:center;
		width:50%;
		padding:0 5%;
	}

	
}

/*===============================================
  画面の横幅が768px以下に適用
===============================================*/
@media screen and (max-width: 768px){
	
	#slider ul li {
		height:400px;
	}
	
	
	
}

/*===============================================
  画面の横幅が640px以下に適用
===============================================*/
@media screen and (max-width: 640px){
	#slider ul li {
		height:600px;
	}
	
	#slider ul li:nth-child(1) {
		background:url(../image/index/slide_sp01.jpg) bottom center no-repeat;
		background-size:100% auto;
	}
	
	#slider ul li:nth-child(2) {
		background:url(../image/index/slide_sp02.jpg) bottom center no-repeat;
		background-size:100% auto;
	}
	
	#slider ul li:nth-child(3) {
		background:url(../image/index/slide_sp03.jpg) bottom center no-repeat;
		background-size:100% auto;
	}
	
	#slider ul li:nth-child(4) {
		background:url(../image/index/slide_sp04.jpg) bottom center no-repeat;
		background-size:100% auto;
	}
	
	#slider ul li:nth-child(5) {
		background:url(../image/index/slide_sp05.jpg) top center no-repeat;
		background-size:100% auto;
	}
	
	#slider ul li:nth-child(6) {
		background:url(../image/index/slide_sp06.jpg) top center no-repeat;
		background-size:100% auto;
	}
	

	#index h2 {
		margin:0 auto 50px;
	}

	#index h2 span {
		font-size:2.4em;
		padding:0 20px;
	}
	
	
	/* sublink */
	
	#index .sublink {
		margin:0 0 50px;
	}

	#index .sublink li {
		width:auto;
		float:none;
		border-bottom:1px solid #FFF;
	}
	
	

	/* inner */

	#index .inner .bnrarea li {
		max-width:inherit;
		width:48%;
		float:left;
		margin-right:0;
		margin-bottom:20px;
	}
	
	#index .inner .bnrarea li figure img {
		max-width:inherit;
		width:100%;
	}
	
	#index .inner .bnrarea li:nth-child(even) {
		float:right;
	}


	#index .inner .bnrarea li a .ttl,
	#index .inner .bnrarea li span .ttl {
		font-size:1.8em;
	}



}

/*===============================================
  画面の横幅が380px以下に適用
===============================================*/
@media screen and (max-width: 380px){
	#slider ul li {
		height:400px;
	}
}