@charset "utf-8";

/*--------------------
mainVis
---------------------*/
.mainVis .wrap02{
	background-image: url(../imgs/img-mv.jpg);
}

@media only screen and (max-width:736px) {

}


/*loBox*/
.loBox{
	width: 100%;
	position: relative;
}
.left{
	margin-left: 7.5%;
}
@media only screen and (max-width:736px) {
	.loBox{
		display: -webkit-flex; /* Safari */
		display: flex;
		-webkit-flex-wrap: wrap; /* Safari */
		flex-wrap: wrap;
	}
	.left{
		margin-left: 0;
	}

}

/*oBox-txt*/
.loBox-txt01{
	width: 34.166666666666664%;
}
.loBox-txt02{
	width: 45.166666666666664%;
}
.loBox-txt03{
	width: 40.416666666666664%;
}
.loBox-txt04{
	width: 50%;
}
@media only screen and (max-width:736px) {
	.loBox-txt01,
	.loBox-txt02,
	.loBox-txt03,
	.loBox-txt04{
		width: 100%;
		margin-bottom: 30px;
	}
}

/*loBox-img*/
.loBox-img01{
	width: 53.75%;
}
.loBox-img02{
	width: 40.416666666666664%;
}
.loBox-img03{
	width: 30.5%;
}
.loBox-img04{
	width: 48.75%;
}
.loBox-img05{
	width: 19.166666666666668%;
}
.loBox-img06{
	width: 40.833333333333336%;
}
.loBox-img07{
	width: 38.166666666666664%;
}
@media only screen and (max-width:736px) {	
	.loBox-img03,
	.loBox-img04,
	.loBox-img05,
	.loBox-img06,
	.loBox-img07{
		width: 48%;
	}
}

/*img*/
.img01,
.img02,
.img03,
.img04,
.img05,
.img06,
.img07,
.img08,
.img09,
.img10,
.img11,
.img12,
.img13,
.img14,
.img15,
.img16{
	background-size: 110% !important;
	position: relative;
	transition: .7s;
}
.img01.open,
.img02.open,
.img03.open,
.img04.open,
.img05.open,
.img06.open,
.img07.open,
.img08.open,
.img09.open,
.img10.open,
.img11.open,
.img12.open,
.img13.open,
.img14.open,
.img15.open,
.img16.open{
	background-size: 100% !important;

	-webkit-animation: shadow 1.0s ease 0.5s 1 forwards;/*表示時間+start時間*/
	animation: shadow 1.0s ease 0.5s 1 forwards;/*表示時間+start時間*/
}
@-webkit-keyframes shadow {
  100% {
    box-shadow: 2px 2px 5px rgba(0,0,0,0.25);
  }
}
@keyframes shadow {
  100% {
    box-shadow: 2px 2px 5px rgba(0,0,0,0.25);
  }
}
.img12.open{
	-webkit-animation: shadowone 1.0s ease 0.5s 1 forwards;/*表示時間+start時間*/
	animation: shadowone 1.0s ease 0.5s 1 forwards;/*表示時間+start時間*/
}
@-webkit-keyframes shadowone {
  100% {
    box-shadow: 2px 2px 10px rgba(0,0,0,0.2);
  }
}
@keyframes shadowone {
  100% {
    box-shadow: 2px 2px 10px rgba(0,0,0,0.2);
  }
}
.img06.open,
.img07.open{
	-webkit-animation: shadowtwo 1.0s ease 0.5s 1 forwards;/*表示時間+start時間*/
	animation: shadowtwo 1.0s ease 0.5s 1 forwards;/*表示時間+start時間*/
}
@-webkit-keyframes shadowtwo {
  100% {
	box-shadow: 2px 2px 10px rgba(0,0,0,0.3);
  }
}
@keyframes shadowtwo {
  100% {
	box-shadow: 2px 2px 10px rgba(0,0,0,0.3);
  }
}

.img01 img,
.img02 img,
.img03 img,
.img04 img,
.img05 img,
.img06 img,
.img07 img,
.img08 img,
.img09 img,
.img10 img,
.img11 img,
.img12 img,
.img13 img,
.img14 img,
.img15 img,
.img16 img{
	opacity: 0;
}
.img01:after,
.img02:after,
.img03:after,
.img04:after,
.img05:after,
.img06:after,
.img07:after,
.img08:after,
.img09:after,
.img10:after,
.img11:after,
.img12:after,
.img13:after,
.img14:after,
.img15:after,
.img16:after{
	content: '';
	background-color: #c6b8aa;
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	transition: .7s;
}
.img03:after,
.img08:after,
.img13:after,
.img16:after{
	background-color: #9e9cae;
}
.img02:after,
.img07:after,
.img10:after,
.img12:after,
.img14:after{
	background-color: #b58d85;
}
.img01.open:after,
.img02.open:after,
.img03.open:after,
.img04.open:after,
.img05.open:after,
.img06.open:after,
.img07.open:after,
.img08.open:after,
.img09.open:after,
.img10.open:after,
.img11.open:after,
.img12.open:after,
.img13.open:after,
.img14.open:after,
.img15.open:after,
.img16.open:after{
	background-color: transparent;
}
.img01{
	background: url(../imgs/img-01.jpg) no-repeat center;
}
.img02{
	background: url(../imgs/img-02.jpg) no-repeat center;
}
.img03{
	background: url(../imgs/img-03.jpg) no-repeat center;
}
.img04{
	background: url(../imgs/img-04.jpg) no-repeat center;
}
.img05{
	background: url(../imgs/img-05.jpg) no-repeat center;
}
.img06{
	background: url(../imgs/img-06.jpg) no-repeat center;
}
.img07{
	background: url(../imgs/img-07.jpg) no-repeat center;
}
.img08{
	background: url(../imgs/img-08.jpg) no-repeat center;
}
.img09{
	background: url(../imgs/img-09.jpg) no-repeat center;
}
.img10{
	background: url(../imgs/img-10.jpg) no-repeat center;
}
.img11{
	background: url(../imgs/img-11.jpg) no-repeat center;
}
.img12{
	background: url(../imgs/img-12.jpg) no-repeat center;
}
.img13{
	background: url(../imgs/img-13.jpg) no-repeat center;
}
.img14{
	background: url(../imgs/img-14.jpg) no-repeat center;
}
.img15{
	background: url(../imgs/img-15.jpg) no-repeat center;
}
.img16{
	background: url(../imgs/img-16.jpg) no-repeat center;
}



/*loBox01*/
.loBox-txt01{
}
.loBox01 .img01{
	position: absolute;
	right: 23.333333333333332%;
	top:0;
}
.loBox01 .img02{
	position: absolute;
	right: 0;
	top:150px;
}
@media only screen and (max-width:736px) {	
	.loBox01 .img01{
		position: relative;
		right:0;
	}
	.loBox01 .img02{
		position: relative;
		top:0;
		margin-left: 4%;
	}
}

/*loBox02*/
.loBox02{
	margin-top: 160px;
}
.loBox02 .loBox-txt02{
	position: absolute;
	left: 42.5%;
	top:60px;
}
.loBox02 .img04{
	position: absolute;
	left: 42.5%;
	top: 225px;
}
@media only screen and (max-width:736px) {
	.loBox02{
		margin-top: 50px;
	}
	.loBox02 .loBox-txt02{
		position: relative;
		top: 0;
		left: 0;
	}
	.loBox02 .img04{
		position: relative;
		margin-left: 4%;
		top: 0;
		left: 0;
	}
}

/*loBox03*/
.loBox03 {
	margin-top: 150px;
}
.loBox03 .img05{
	margin-top: 85px;
}
.loBox03 .img06{
	position: absolute;
	right: 0;
	top: 0;
}
@media only screen and (max-width:736px) {
	.loBox03 {
		margin-top: 100px;
	}
	.loBox03 .img05{
		margin: 0;
	}
	.loBox03 .img06{
		position: relative;
		margin-left: 4%;
	}
}

/*loBox04*/
.loBox04{
}
.loBox04 .img07{
	margin-left: 16.666666666666664%;
	margin-top: 125px;
}
.loBox04 .img08{
	position: absolute;
	right: 70px;
	top: 90px;
}
@media only screen and (max-width:736px) {
	.loBox04{
		margin: 15px 0;
	}
	.loBox04 .img07{
		margin:0;
	}
	.loBox04 .img08{
		position: relative;
		right: auto;
		top: 0;
		margin-left: 4%;
	}
}

/*loBox05*/
.loBox05 .img09{
	left:3.75%;
	top: 135px;
}
.loBox05 .img10{
	margin-left: 51.16666666666667%;
}
@media only screen and (max-width:736px) {
	.loBox05 .img09{
		position: relative;
		left:0;
		top: 0;
	}
	.loBox05 .img10{
		margin-left: 4%;
	}
}

/*loBox06*/
.loBox06{
}
.loBox06 .img11{
	position: absolute;
	right: 1.6666666666666667%;
	top: 0;
}
.loBox06 .img13{
	position: absolute;
	right: 23.916666666666668%;
	top: 438px;
}
@media only screen and (max-width:736px) {
	.loBox06 .img11{
		position: relative;
		right: 0;
	}
	.loBox06 .img13{
		position: relative;
		margin-left: 4%;
		right: 0;
		top: 0;
	}
}

/*loBox07*/
.loBox07 .img12{
	margin-top: 115px;
}
.loBox07 .img14{
	position: absolute;
	right: 9.583333333333334%;
	top: 445px;
}
@media only screen and (max-width:736px) {
	.loBox07{
		margin: 15px 0;
	}
	.loBox07 .img12{
		margin-top: 0;
	}
	.loBox07 .img14{
		position: relative;
		right: 0;
		top:0;
		margin-left: 4%;
	}
}

/*loBox08*/
.loBox08 .img15{
	margin-top: 330px;
}
.loBox08 .img16{
	margin-left: 51.16666666666667%;
	margin-top: -130px;
}
@media only screen and (max-width:736px) {
	.loBox08 .img15{
		margin-top: 0;
	}
	.loBox08 .img16{
		margin-top: 0;
		margin-left: 4%;
	}
}

/*--------------------
num2
---------------------*/
.section.num2 {
	padding:80px 0 235px;
	margin-top: 120px;
	position: relative;
}
.section.num2 .wrap02{
	position: relative;
	z-index: 2;
}
.section.num2:after{
	content: '';
	width: 100%;
	height: 75px;
	background: #504d60;
	position: absolute;
	left: 0;
	bottom: 0;
}
@media only screen and (max-width:736px) {	
	.section.num2 {
		padding:40px 0 130px;
		margin-top: 80px;
	}
}

/*--------------------
num3
---------------------*/
.section.num3{
	margin-top: -150px;
	padding: 70px 0 0;
	color: #f6f4ee;
	position: relative;
	background: #504d60 url(../imgs/bg-txt01.png) no-repeat 95% 45%;
}
.section.num3 .wrap02{
	position: relative;
	z-index: 2;
}
.section.num3:after{
	content: '';
	width: 100%;
	height: 75px;
	background: #fff;
	position: absolute;
	left: 0;
	bottom: 0;
}
/*loBox-ttl*/
.loBox-ttl{
	font-size: 30px;
	margin-bottom: 10px;
}
@media only screen and (max-width:736px) {
	.section.num3{
		margin-top: -170px;
		padding: 10px 0 0;
		/*background-image: none;*/
		background: #504d60 url(../imgs/bg-txt01.png) no-repeat 66% 1%;
	}

}

/*--------------------
num4
---------------------*/
.section.num4{
	margin-top: 0;
	padding: 125px 0 0;
	position: relative;
	background: url(../imgs/bg-txt02.png) no-repeat -5% 60%;
}
@media only screen and (max-width:736px) {
	.section.num4{
		padding: 100px 0 0;
		margin-top: -20px;
		/*background-image: none;*/
		background: url(../imgs/bg-txt02.png) no-repeat 0 0;
	}

}