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

*{
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
img{
	max-width: 100%;
	height: auto;
}
.center-block{
	display: block;
	margin-left: auto;
	margin-right: auto;
}
.clearfix:after{
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}
* html .clearfix{
	zoom: 1;
} /* IE6 */
*:first-child+html .clearfix{
	zoom: 1;
} /* IE7 */

.headerArea{
	margin: 0 0 70px;
	position: relative;
}
.headerArea .mv{
	position: relative;
	background: url(../img/bg_main.jpg) no-repeat center center;
	background-size: cover;
	padding: 50px 0 70px;
}
.headerArea .mv:before{
	content: "";
	width: 100%;
	height: 10px;
	background: rgba(121,29,33,0.08);
	position: absolute;
	left: 0;
	bottom: 0;
}
.lead{
	margin: 140px 0 40px;
}
.ttl{
	font-size: 19px;
	color: #999999;
	font-family: "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", serif;
	text-align: center;
	line-height: 2em;
	letter-spacing: 1px;
	margin-bottom: 70px;
}

ul.linkBtn{
	overflow: hidden;
	max-width: 860px;
	margin: 0 auto 180px;
}
ul.linkBtn li{
	float: left;
	width: 19%;
	margin: 0 1.25% 0 0;
}
ul.linkBtn li:last-child{
	margin-right: 0;
}

.style{
	position: relative;
}
.style .styleBase{
	max-width: 1000px;
	margin: 0 auto;
	position: relative;
}

.style.style01:before{
	content: "";
	width: 100%;
	height: 518px;
	position: absolute;
	top: 16%;
	right: 0;
	z-index: -1;
	background: url(../img/bg_style01a.jpg) no-repeat center top;
	background-size: cover;
}
.style.style01:after{
	content: "";
	width: 69%;
	height: 50px;
	position: absolute;
	bottom: 0;
	right: 0;
	z-index: -1;
	background: #a4aa92;
}
.style.style01 .styleBase{
	min-height: 1836px;
	margin-bottom: 200px;
}
.style.style01 .styleBase .img01{
	width: 80%;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	margin-left: auto;
	margin-right: auto;
}
.style.style01 .styleBase .img02{
	width: 43%;
	position: absolute;
	top: 33%;
	left: 0;
}
.style.style01 .styleBase .img03{
	width: 45%;
	position: absolute;
	bottom: 12%;
	left: 6%;
}
.style.style01 .styleBase .img04{
	width: 43%;
	position: absolute;
	bottom: 1%;
	right: 0;
}
.style.style01 .styleBase .txt01{
	width: 50.8%;
	position: absolute;
	top: 27%;
	right: 0;
}

.style.style02:before{
	content: "";
	width: 38%;
	height: 1180px;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	background: url(../img/bg_style02a.jpg) no-repeat right top;
	background-size: cover;
}
.style.style02 .styleBase{
	min-height: 1772px;
	margin-bottom: 200px;
}
.style.style02 .styleBase .img01{
	width: 72%;
	position: absolute;
	top: 15%;
	right: 0;
}
.style.style02 .styleBase .img02{
	width: 52%;
	position: absolute;
	bottom: 20.5%;
	right: 0;
}
.style.style02 .styleBase .img03{
	width: 40%;
	position: absolute;
	bottom: 8%;
	left: 0;
}
.style.style02 .styleBase .img04{
	width: 45%;
	position: absolute;
	bottom: 0;
	right: 0;
}
.style.style02 .styleBase .txt01{
	width: 14%;
	position: absolute;
	top: 6%;
	left: 1%;
}
.style.style02 .styleBase .txt02{
	width: 27%;
	position: absolute;
	top: 8%;
	left: 39%;
}
.style.style02 .styleBase .box01{
	width: 20px;
	height: 245px;
	position: absolute;
	top: 8%;
	right: 2%;
	background: #baa1a0;
}

.style.style03:before{
	content: "";
	width: 77%;
	height: 485px;
	position: absolute;
	top: 41%;
	right: 0;
	z-index: -1;
	background: url(../img/bg_style03a.jpg) no-repeat right top;
	background-size: cover;
}
.style.style03 .styleBase{
	min-height: 1678px;
	margin-bottom: 200px;
}
.style.style03 .styleBase .img01{
	width: 44.5%;
	position: absolute;
	top: 6%;
	right: 0;
}
.style.style03 .styleBase .img02{
	width: 45%;
	position: absolute;
	top: 28%;
	left: 3%;
}
.style.style03 .styleBase .img03{
	width: 77%;
	position: absolute;
	bottom: 11%;
	left: 0;
}
.style.style03 .styleBase .img04{
	width: 40%;
	position: absolute;
	bottom: 0;
	right: 0;
}
.style.style03 .styleBase .txt01{
	width: 35.6%;
	position: absolute;
	top: 0;
	left: 0;
}
.style.style03 .styleBase .txt02{
	width: 4.4%;
	position: absolute;
	top: 6%;
	left: 47.8%;
}

.style.style04:before{
	content: "";
	width: 100%;
	height: 500px;
	position: absolute;
	top: 15.5%;
	right: 0;
	z-index: -1;
	background: url(../img/bg_style04a.jpg) no-repeat right top;
	background-size: cover;
}
.style.style04:after{
	content: "";
	width: 77%;
	height: 500px;
	position: absolute;
	top: 41%;
	left: 0;
	z-index: -1;
	background: rgba(186, 161, 160, 0.7);
}
.style.style04 .styleBase{
	min-height: 1408px;
	margin-bottom: 200px;
}
.style.style04 .styleBase .img01{
	width: 74%;
	position: absolute;
	top: 0;
	left: 0;
}
.style.style04 .styleBase .img02{
	width: 37.6%;
	position: absolute;
	top: 29%;
	left: 5%;
}
.style.style04 .styleBase .img03{
	width: 45%;
	position: absolute;
	bottom: 5%;
	left: 16%;
}
.style.style04 .styleBase .img04{
	width: 30%;
	position: absolute;
	bottom: 0;
	right: 0;
}
.style.style04 .styleBase .txt01{
	width: 15%;
	position: absolute;
	top: 0;
	right: 0;
}
.style.style04 .styleBase .txt02{
	width: 25.9%;
	position: absolute;
	top: 45%;
	left: 46%;
}

.style.style05:before{
	content: "";
	width: 100%;
	height: 926px;
	position: absolute;
	top: 22%;
	right: 0;
	z-index: -1;
	background: url(../img/bg_style05a.jpg) no-repeat right top;
	background-size: cover;
}
.style.style05 .styleBase{
	min-height: 1530px;
	margin-bottom: 200px;
}
.style.style05 .styleBase .img01{
	width: 55%;
	position: absolute;
	top: 0;
	right: 0;
}
.style.style05 .styleBase .img02{
	width: 50%;
	position: absolute;
	bottom: 29%;
	left: 0;
}
.style.style05 .styleBase .img03{
	width: 40%;
	position: absolute;
	bottom: 0;
	right: 0;
}
.style.style05 .styleBase .txt01{
	width: 31.4%;
	position: absolute;
	top: 13%;
	left: 0;
}
.style.style05 .styleBase .txt02{
	width: 31.6%;
	position: absolute;
	bottom: 2%;
	left: 0;
}

.img-foot{
	margin-bottom: 200px;
}

.collection-link {
  text-align: center;
  max-width: 300px;
  margin: 0 auto 80px;
}
.collection-link .button {
  display: block;
  font-size: 14px;
  color: #000;
  letter-spacing: 1px;
  vertical-align: middle;
  padding: 1.5em 2.5em;
  border: 2px solid #000;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
  text-decoration: none;
  position: relative;
}
.collection-link .button::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #000;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transform-origin: 100% 50%;
  transform-origin: 100% 50%;
  -webkit-transition: all 0.34s cubic-bezier(0.67, 0.01, 0.26, 1);
  transition: all 0.34s cubic-bezier(0.67, 0.01, 0.26, 1);
}
.collection-link .button:hover, .collection-link .button:focus, .collection-link .button:active {
  color: white;
  text-decoration: none;
}
.collection-link .button:hover::before, .collection-link .button:focus::before, .collection-link .button:active::before {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}



@media only screen and (min-width: 768px) {
	/* PC、スマホ切り替え */
	.pc_display{
		display:block !important;
	}
	.sp_display{
		display:none !important;
	}

}

@media only screen and (max-width: 767px) {
	/* PC、スマホ切り替え */
	.pc_display{
		display:none !important;
	}
	.sp_display{
		display:block !important;
	}

	.headerArea{
		margin: 0 0 40px;
	}
	.headerArea .mv{
		background: url(../img/bg_main_sp.jpg) no-repeat center center;
		background-size: cover;
		padding: 40px 7px 45px;
	}
	.headerArea .btn{
		display: block;
		margin: 0 auto;
		max-width: 340px;
	}

	.lead{
		max-width: 280px;
		margin: 45px auto 35px;
	}
	.headerArea .mv .lead{
		margin: 0 auto 30px;
	}
	.ttl{
		font-size: 14px;
		line-height: 1.8em;
		letter-spacing: 0;
		margin-bottom: 30px;
	}
	.headerArea .mv .ttl{
		margin: 30px 0 20px;
	}

	#styleWrap{
		display: none;
	}
	
	ul.linkBtn{
		max-width: 370px;
		padding: 0 15px;
		margin: 0 auto 90px;
	}
	ul.linkBtn li{
		width: 32%;
		margin: 0 2% 2% 0;
	}
	ul.linkBtn li:nth-child(3n){
		margin-right: 0;
	}
	ul.linkBtn li:nth-child(4){
		margin-left: 17%;
	}
	
	.style{
		clear: both;
		max-width: 414px;
		margin: 0 auto;
	}
	
.style .styleBase{
	min-height: auto !important;
	margin-bottom: 100px !important;
}
.style .styleBase div{
	position: relative !important;
	top: 0 !important;
	bottom: 0 !important;
	right: 0 !important;
	left: 0 !important;
}

.style.style01:before{
	width: 100%;
	height: 19%;
	min-height: 158px;
	top: 18%;
}
.style.style01:after{
	width: 80%;
	height: 25px;
	bottom: -12px;
}
.style.style01 .styleBase .img01{
	width: 85%;
	margin: 0 auto 40px;
}
.style.style01 .styleBase .img01 img{
	transform: translateX(-7px);
}
.style.style01 .styleBase .img02{
	width: 40%;
	float: left;
	margin: 0 0 30px 17px;
}
.style.style01 .styleBase .txt01{
	width: 44%;
	float: right;
	margin: 0 17px 30px 0;
}
.style.style01 .styleBase .img03{
	width: 40%;
	float: left;
	margin: 0 0 0 30px;
}
.style.style01 .styleBase .img04{
	width: 40%;
	float: right;
	margin: 30px 17px 0 0;
}

.style.style02:before{
	width: 42%;
	height: 65%;
	min-height: 425px;
}
.style.style02 .styleBase .img01{
	float: right;
	width: 62%;
	margin-bottom: 30px;
}
.style.style02 .styleBase .img02{
	width: 46.6%;
	float: right;
	margin: 0 10px 50px 0;
}
.style.style02 .styleBase .img03{
	width: 40%;
	float: left;
	margin: 0 0 0 17px;
}
.style.style02 .styleBase .img04{
	width: 45%;
	float: right;
	margin: 0 17px 0 0;
}
.style.style02 .styleBase .txt01{
	float: left;
	width: 14.6%;
	margin: 30px 0 40px 20px;
}
.style.style02 .styleBase .txt02{
	float: right;
	width: 29%;
	margin: 43px 75px 20px 0;
}
.style.style02 .styleBase .box01{
	width: 6px;
	height:80px;
	position: absolute !important;
	top:50px !important;
	right: 10px !important;
	left: auto !important;
}

.style.style03:before{
	width: 86%;
	height: 15%;
	min-height: 157px;
	top: 43%;
}
.style.style03 .styleBase .img01{
	width: 40%;
	float: right;
	margin: 50px 17px 50px 0;
}
.style.style03 .styleBase .img02{
	width: 38.6%;
	float: left;
	margin: 0 0 50px 17px;
}
.style.style03 .styleBase .img03{
	width: 66.6%;
}
.style.style03 .styleBase .img04{
	width: 39.2%;
	float: right;
	margin: -70px 17px 0 0;
}
.style.style03 .styleBase .txt01{
	width: 34.6%;
	float: left;
	margin-bottom: 50px;
}
.style.style03 .styleBase .txt02{
	width: 4.5%;
	float: right;
	margin: 50px 10px 0 0;
}

.style.style04:before{
	height: 10%;
	min-height: 144px;
	top: 21.5%;
}
.style.style04:after{
	width: 85%;
	height: 10%;
	min-height: 150px;
	top: 42%;
}
.style.style04 .styleBase .img01{
	width: 66.6%;
	float: left;
	margin: 0 0 25px 17px;
}
.style.style04 .styleBase .img02{
	width: 40%;
	float: left;
	margin: 0 0 0 17px;
}
.style.style04 .styleBase .img03{
	width: 40%;
	float: left;
	margin: 0 0 0 50px;
}
.style.style04 .styleBase .img04{
	width: 34.6%;
	float: right;
	margin-top: -67px;
}
.style.style04 .styleBase .txt01{
	width: 15.4%;
	float: right;
	margin: 8px 22px 0 0;
}
.style.style04 .styleBase .txt02{
	width: 32%;
	float: left;
	margin: 0 50px 80px 12px;
}

.style.style05:before{
	height: 57%;
	min-height: 313px;
	top: 26%;
}
.style.style05 .styleBase{
	min-height: 1530px;
	margin-bottom: 200px;
}
.style.style05 .styleBase .img01{
	width: 48%;
	float: right;
	margin: 0 17px -25px 0;
}
.style.style05 .styleBase .img02{
	width: 48%;
	margin: 0 0 60px 17px;
}
.style.style05 .styleBase .img03{
	width: 37%;
	float: right;
	margin: -95px 17px 0 0;
}
.style.style05 .styleBase .txt01{
	width: 32.8%;
	float: left;
	margin: 30px 0 0 17px;
}
.style.style05 .styleBase .txt02{
	width: 38.6%;
	float: left;
	margin: 0 0 0 17px;
}
.style.style05 .styleBase .txt02 img{
	transform: translateY(-15px);
}

.img-foot{
	margin-bottom: 100px;
}

.collection-link {
  margin-bottom: 40px;
}

	
}