@charset "utf-8";



/*=============================================*/
/*                   concept                      */
/*=============================================*/
#key{
	background: url(../img/concept/key.jpg) no-repeat center top;
	height: 500px;
}


#lead{
	background: url(../img/concept/bg.jpg) repeat-x center top;
}

#lead .section{
	height: 578px;
	padding-bottom: 48px;
}

#lead .section h2{
	text-align: center;
	padding:96px 0 28px;
}

#lead .section p.txt{
	font-size: 16px;
	line-height: 24px;
	color: #444444;
	margin-left: 395px;
	width: 464px;
	padding-top: 12px;
}

#sec_01{
	background: url(../img/concept/bg01.jpg) no-repeat center top;
	padding-bottom:24px;
}

#sec_01 h2{
	text-align: center;
	margin-bottom: 58px;
}

#sec_01 ul{
	clear: both;
	width: 1000px;
	margin-bottom: 156px;
	position: relative;
	z-index: 500;
}

#sec_01 ul li{
	display: block;
	width: 239px;
	height: 245px;
	float: left;
	overflow: hidden;
	background: url(../img/concept/bg_bnr.png) no-repeat center top;
	position: relative;
	margin:0 11px 0 2px;
}

#sec_01 ul li a{
	display: block;
	width: 239px;
	height: 245px;
	overflow: hidden;
	position: relative;
	transition:all 0.4s ease;
}

#sec_01 ul li a img{
	position: absolute;
	left: 0;
	bottom: 68px;
}

#sec_01 ul li a::after{
	content:"";
	background: url(../img/concept/li01_on.png) no-repeat center top;
	width: 239px;
	height: 117px;
	position: absolute;
	left: 0;
	bottom: -117px;
	z-index: 10;
	transition:all 0.4s ease;
}

#sec_01 ul li a:hover img{
	opacity: 0;
}

#sec_01 ul li a:hover::after{
	bottom: 68px;
	transition:all 0.4s ease;
}

#sec_01 ul li a.ntn_02::after{
	content:"";
	background: url(../img/concept/li02_on.png) no-repeat center top;
	width: 239px;
	height: 117px;
	position: absolute;
	left: 0;
	bottom: -117px;
	z-index: 10;
	transition:all 0.4s ease;
}

#sec_01 ul li a.ntn_02:hover::after{
	bottom: 68px;
	transition:all 0.4s ease;
}

#sec_01 ul li a.ntn_03::after{
	content:"";
	background: url(../img/concept/li03_on.png) no-repeat center top;
	width: 239px;
	height: 117px;
	position: absolute;
	left: 0;
	bottom: -117px;
	z-index: 10;
	transition:all 0.4s ease;
}

#sec_01 ul li a.ntn_03:hover::after{
	bottom: 68px;
	transition:all 0.4s ease;
}

#sec_01 ul li a.ntn_04::after{
	content:"";
	background: url(../img/concept/li04_on.png) no-repeat center top;
	width: 239px;
	height: 117px;
	position: absolute;
	left: 0;
	bottom: -117px;
	z-index: 10;
	transition:all 0.4s ease;
}

#sec_01 ul li a.ntn_04:hover::after{
	bottom: 68px;
	transition:all 0.4s ease;
}

#concept_txt{
	background: url(../img/index/p.png) repeat center top;
	padding:1px;
	width: 498px;
	float: right;
}

#concept_txt .box_write{
	background:#FFF;
	padding:115px 0 20px 130px;
	position: relative;
}

#concept_txt .box_write h3{
	position: absolute;
	top: 0;
	left: -45px;
}

#concept_txt .box_write p.txt{
	font-size: 16px;
	line-height: 24px;
	color: #444444;
	width: 360px;
	padding-bottom: 12px;
}

#sec_02{
	background: url(../img/concept/bg02.jpg) no-repeat center bottom;
	padding-top: 12px;
}

.box_bg{
	background: url(../img/concept/bg_o.png) repeat center top;
	padding:0 44px 0 11px;
	width: 908px;
	margin:0 0 52px 19px;
	box-shadow:0 0 6px rgba(0,0,0,0.1);
}

.box_bg dl{
	width: 454px;
	float: left;
	margin-bottom: 25px;
}

.box_bg dl dt{
	position: relative;
	
}

.box_bg dl dt span.price{
	font-size: 22px;
	line-height: 25px;
	text-align: center;
	font-family:"ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", serif;
	display: block;
	position: absolute;
	top: 360px;
	left: 0;
	width: 454px;
}

.color_red{
	color: #6a0303;
	display: block;
}
.color_red span{
	font-size: 16px;
}

.box_bg dl dd{
	position: relative;
	font-size: 16px;
	line-height: 24px;
	color: #444444;
	text-align: center;
	padding:6px 0;
	
}

#sec_02 ul{
	text-align: center;
	width: 450px;
	clear: both;
	margin: auto;
	display: block;
	padding-bottom: 107px;
}

#sec_02 ul li{
	display: block;
	margin-bottom: 10px;
	position: relative;
	height: 56px;
}

.button {
	position: relative;
	-webkit-perspective: 300px;
	perspective: 300px;
	display: block;
}

.button span {
	display: block;
	position: absolute;
	width: 450px;
	height: 56px;
	text-align: center;
	-webkit-transition: all .3s;
	transition: all .3s;
}

.button span:nth-child(1) {
	-webkit-transform: rotateX(90deg);
	-moz-transform: rotateX(90deg);
	transform: rotateX(90deg);
	-webkit-transform-origin: 50% 50% -28px;
	-moz-transform-origin: 50% 50% -28px;
	transform-origin: 50% 50% -28px;
	z-index:100;
}
.button span:nth-child(2) {
	-webkit-transform: rotateX(0deg);
	-moz-transform: rotateX(0deg);
	transform: rotateX(0deg);
	-webkit-transform-origin: 50% 50% -28px;
	-moz-transform-origin: 50% 50% -28px;
	transform-origin: 50% 50% -28px;
	z-index: 0;
	
}
.button:hover span:nth-child(1) {
	-webkit-transform: rotateX(0deg);
	-moz-transform: rotateX(0deg);
	transform: rotateX(0deg);
	z-index:100;
}
.button:hover span:nth-child(2) {
	-webkit-transform: rotateX(-90deg);
	-moz-transform: rotateX(-90deg);
	transform: rotateX(-90deg);
	z-index: 0;
}

#box_02{
	background: url(../img/index/p.png) repeat center top;
	float: left;
	width: 498px;
	padding:1px;
	margin-bottom: 17px;
}

#box02_a{
	background:#FFF;
	position: relative;
	padding:115px 0 16px 130px;
}

#box02_a h3{
	position: absolute;
	top: 0;
	left: -45px;
}

#box02_a p.txt{
	font-size: 16px;
	line-height: 24px;
	color: #444444;
	width: 360px;
	padding-bottom: 12px;
}

#sec_03{
	background: url(../img/concept/bg001.jpg) no-repeat center bottom;
	padding: 20px 0 60px;
}

#left_float{
	background: url(../img/concept/bg_o.png) repeat center top;
	margin-left: 35px;
	width: 965px;
	box-shadow:0 0 6px rgba(0,0,0,0.1);
	padding-bottom: 34px;
}

#dl_001{
	float: left;
	width: 463px;
}

#dl_001 dt{
	position: relative;
}

#dl_001 dt span.price{
	font-size: 22px;
	line-height: 25px;
	text-align: center;
	font-family:"ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", serif;
	position: absolute;
	top: 382px;
	left: 83px;
	width: 330px;
}

#dl_001 dt span.price .price01{
	color: #6a0303;
}

#dl_001 dt span.price .price01 span{
	font-size: 16px;
}

#dl_001 dd{
	font-size: 16px;
	line-height: 24px;
	color: #444444;
	text-align: center;
}

#dl_001 dd span{
	display: block;
	padding-top: 12px;
}

#left_float h4{
	clear: both;
	margin-bottom: 39px;
}

#maps{
	width: 905px;
	height: 520px;
	margin-left: 28px;
}

#box03{
	border:1px dotted #380000;
	margin:139px 0 0 500px;
}

#box03 h5{
	margin-left: -56px;
}
#box03 p.txt{
	margin-top: -65px;
	padding-left: 133px;
	font-size: 16px;
	line-height: 24px;
	color: #444444;
	width: 360px;
	min-height: 150px;
}

#sec_04{
	background: url(../img/concept/bg002.jpg) no-repeat center bottom;
}

#sec_04 .section{
	min-height:1824px;
}

#auto01{
	position: absolute;
	top: 374px;
	right: 0;
	width: 32%;
	z-index: 200;
}

#auto01 img, #auto02 img, #auto03 img, #auto04 img, #auto05 img{
	width: 100%;
	height: auto;
}

#auto02{
	position: absolute;
	top: 1133px;
	left: 0;
	width: 30%;
	z-index: 200;
}

#auto03{
	position: absolute;
	top: 2434px;
	right: 0;
	width: 30%;
	z-index: 200;
}

#auto04{
	position: absolute;
	top: 4240px;
	left: 0;
	width: 30%;
	z-index: 200;
}

#auto05{
	position: absolute;
	top: 5299px;
	right: 0;
	width: 30%;
	z-index: 200;
}

@media (min-width: 1500px) {
	
#auto01{
	top: 300px;
}

}

@media (max-width: 1200px) {
	
#auto01{
	width: 30%;
}

#auto02{
	top: 1200px;
}

#auto04{
	top: 4310px;
}

}

#block_01{
	background: url(../img/concept/bg_o.png) repeat center top;
	box-shadow:0 0 6px rgba(0,0,0,0.1);
	width: 960px;
	position: relative;
	min-height: 605px;
}

#block_01 h2{
	margin-bottom: 25px;
}

#ml_one{
	margin-left: 34px;
}

#block_01 dl{
	float: left;
	margin-right: 22px;
	position: relative;
}

#block_01 dl dd{
	font-size: 22px;
	line-height: 25px;
	text-align: center;
	font-family:"ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", serif;
	position: absolute;
	top: 272px;
	left: 14px;
	width: 252px;
}

#block_01 dl dd span.price{
	color: #6a0303;
}

#block_01 dl dd span.price span{
	font-size: 16px;
}

#block_01 p.txt{
	font-size: 16px;
	line-height: 24px;
	color: #444444;
	clear: both;
	text-align: center;
	padding:20px 50px 0 50px;
}
#block_01 p.icon{
	position: absolute;
	top: -43px;
	right: -75px;
}

#box_04{
	width: 500px;
	float: left;
	border:1px dotted #380000;
	margin-top: 110px;
}

#box_04 h3{
	margin-left: -80px;
}

#box_04 p.txt{
	font-size: 16px;
	line-height: 24px;
	color: #444444;
	padding-left: 130px;
	margin-top: -65px;
	width: 360px;
	min-height: 170px;
}

#box_04 p.txt span{
	display: block;
	padding-top: 10px;
}

#block_02{
	background: url(../img/concept/bg_o.png) repeat center top;
	box-shadow:0 0 6px rgba(0,0,0,0.1);
	width: 960px;
	position: relative;
	float: right;
	height: 655px;
	margin-top: 58px;
}

#block_02 h3{
	position: absolute;
	top: -23px;
	left: -53px;
}

#block_02 h4{
	position: absolute;
	top: 102px;
	right: 0;
}

#block_02 p.bnr{
	position: absolute;
	top: 102px;
	left: -18px;
	z-index: 10;
	
}

#block_02 p.bnr a{
	width: 612px;
	height: 463px;
	display: block;
}

#block_02 p.bnr img{
	position: absolute;
	top: 0;
	left: 0;
}

#block_02 p.bnr img.op01{
	opacity:0;
	transition:all 0.5s ease;
}

#block_02 p.bnr img.op02{
	opacity:1;
	transition:all 0.5s ease;
}

#block_02 p.bnr:hover img.op01{
	opacity:1;
}

#block_02 p.bnr:hover img.op02{
	opacity:0;
}

#block_02 p#botton_clik{
	position: absolute;
	top: 565px;
	left: 70px;
	width: 359px;
	height: 55px;
}

#block_02 .button {
	position: relative;
	-webkit-perspective: 300px;
	perspective: 300px;
	display: block;
}

#block_02 .button span {
	display: block;
	position: absolute;
	width: 359px;
	height: 56px;
	text-align: center;
	-webkit-transition: all .3s;
	transition: all .3s;
}

.slide_nav{
	width: 510px;
	height: 340px;
	position: absolute;
	top: 358px;
	right: -12px;
	z-index: 0;
}

.slide_nav .bx-pager, .bx-prev, .bx-next{
	display: none;
}
.attention{
	font-size:9px;
	font-family:"メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-weight:normal;
	color:#666
	}