@charset "utf-8";


/* style */
/* -------------------------------------------------------- */
#contents .sec {max-width:950px;}

.top-mv {padding:40.0% 0 50px 0; position:relative;}
.top-mv .ctx {max-width:980px; position:relative; z-index:5;}
.top-mv .ttl {text-align:center;}
.top-mv .catch {text-align:center; margin:35px 0 0 0;}
.top-mv .catch dt {font-size:3.2rem; font-weight:500; letter-spacing:0.3em;}
.top-mv .catch dt span {color:#998d5a;}
.top-mv .catch dd {font-size:1.7rem; line-height:2.2; letter-spacing:0.1em; margin:1.5em 0 0 0;}
.top-mv .imgs {width:100%; padding:43.2% 0 0 0; position:absolute; top:0; left:0; z-index:1;}
.top-mv .imgs > div {width:100%; height:100%; position:absolute; top:0; left:0; clip-path:polygon(0 0, 0 0, -30% 100%, 0 100%); overflow:hidden;}
.top-mv .imgs > div img {width:100%; transform:scale3d(1,1,1); display:block;}
.top-mv .imgs > div.on {clip-path:polygon(0 0, 130% 0, 100% 100%, 0 100%); transition:clip-path 0.8s ease;}
.top-mv .imgs > div.on img {transform:scale3d(1.1,1.1,1); transition:transform 8.0s linear;}

.top-info {padding:30px 0; border-top:solid 1px #004a8f; border-bottom:solid 1px #004a8f;}
.top-info .txt1 {font-size:5.2rem; letter-spacing:0.3em; text-align:center; color:#004a8f;}
.top-info .txt1 span {font-size:56%; line-height:1; letter-spacing:0.2em; display:block;}
.top-info .txt1 a {text-decoration:none; color:#004a8f; display:block; transition:opacity 0.3s ease;}
.top-info .txt1 a:hover {opacity:0.7;}
.top-info .img {padding:10px 0px; width:45%; margin: auto; display: block;}

.top-overview {padding:80px 0 60px 0;}
.top-overview .clm {margin:0 -30px 0 -40px; display:flex;}
.top-overview .clm > div {padding:0 30px 60px 40px; box-sizing:border-box; flex:1; position:relative;}
.top-overview .clm dl {position:relative;}
.top-overview .clm dt {font-family:'Noto Sans JP', sans-serif; font-size:2.9rem; font-weight:400; line-height:1; letter-spacing:0.2em; position:absolute; top:-0.7em; left:0; z-index:10; transform-origin:left center; transform:rotate(90deg);}
.top-overview .clm dd.img {position:relative;}
.top-overview .clm dd.img::before {content:'image'; font-size:0.9rem; font-weight:700; display:block; position:absolute; bottom:0.4em; left:0.4em;}
.top-overview .clm dd.ctx {width:66%; position:absolute; bottom:-24%; right:-30px; z-index:10;}

.top-nav1 {background:url(../img/top/bg_01.jpg) center center no-repeat; background-size:cover; position:relative;}
.top-nav1 .sec {position:relative;}
.top-nav1 .ctx {max-width:354px; width:39.5%; text-align:left; color:#fff; padding:70px 0;}
.top-nav1 .ctx dt {font-family:'Noto Sans JP', sans-serif; font-size:4.0rem; font-weight:400; line-height:1; letter-spacing:0.3em;}
.top-nav1 .ctx dd {font-size:1.7rem; line-height:1.8; letter-spacing:0.1em; margin:1.5em 0 0 0;}
.top-nav1 .btn {width:100%; height:3.0em; font-family:'Noto Sans JP', sans-serif; font-size:1.8rem; font-weight:400; letter-spacing:0.2em; text-decoration:none; color:#998d5a; padding:0 1.5em; border:1px solid #998d5a; box-sizing:border-box; display:flex; align-items:center; position:relative;}
.top-nav1 .btn svg {width:10px; height:12px; margin:-6px 0 0 0; fill:#998d5a; display:block; position:absolute; top:50%; right:15px; z-index:10;}
.top-nav1 .btn::before {content:''; width:0; height:100%; background-color:rgba(153,141,90,0.2); display:block; position:absolute; top:0; left:0; transition:width 0.3s ease;}
.top-nav1 .btn:hover::before {width:100%;}
.top-nav1 .imgs {max-width:540px; width:56%; height:340px; position:absolute; top:0; right:-100px;}
.top-nav1 .imgs > div {position:absolute;}
.top-nav1 .imgs > div:nth-of-type(1) {width:32%; top:10.6%; left:0%;}
.top-nav1 .imgs > div:nth-of-type(2) {width:27.6%; top:7.4%; left:35.2%; z-index:10;}
.top-nav1 .imgs > div:nth-of-type(3) {width:28.2%; top:62.0%; left:28.4%; z-index:5;}
.top-nav1 .imgs > div:nth-of-type(4) {width:24.0%; top:17.3%; left:66.4%; z-index:15;}
.top-nav1 .imgs > div:nth-of-type(5) {width:33.2%; top:47.3%; left:60.0%; z-index:10;}
.top-nav1 .imgs > div.img::before {content:'image'; font-size:0.9rem; font-weight:700; line-height:1; color:#fff; display:block; position:absolute; bottom:0.4em; left:0.4em;}
.top-nav1 .imgs img {width:100%;}

.top-nav2 {padding:70px 0 80px 0; position:relative; z-index:10;}
.top-nav2 .clm {margin:-24px -24px 0 -24px; display:flex; flex-wrap:wrap;}
.top-nav2 .clm > div {width:50%; padding:24px 24px 0 24px; box-sizing:border-box;}
.top-nav2 .clm a {text-decoration:none; color:#fff; background-color:rgba(62,58,57,1); display:block; position:relative; overflow:hidden;}
.top-nav2 .clm a::before {content:''; width:38px; height:38px; background-color:#998d5a; display:block; position:absolute; bottom:-19px; right:-19px; transform:rotate(45deg); z-index:15;}
.top-nav2 .clm a.off {background-color:rgba(62,58,57,0.4); opacity:1; pointer-events:none;}
.top-nav2 .clm a.off::before {background-color:#c2bb9c;}
.top-nav2 .clm a.off::after {content:'COMING SOON'; width:40%; height:66%; font-family:'Noto Sans JP', sans-serif; font-size:2.4rem; font-weight:500; line-height:1; letter-spacing:0.2em; color:#000; background-color:rgba(255,255,255,0.8); display:flex; justify-content:center; align-items:center; position:absolute; top:17%; left:30%; z-index:10;}
.top-nav2 .clm a .img {opacity:0.15; position:relative; transition:transform 0.3s ease, opacity 0.3s ease;}
.top-nav2 .clm a .img img {width:100%;}
.top-nav2 .clm a .ctx {width:100%; height:100%; font-family:'Noto Sans JP', sans-serif; font-size:3.0rem; font-weight:400; line-height:1.1; letter-spacing:0.2em; color:#fff; display:flex; justify-content:center; align-items:center; position:absolute; top:0; left:0; z-index:10;}
.top-nav2 .clm a:hover .img {transform:scale3d(1.05,1.05,1); opacity:0.7;}

@media screen and (max-width:1370px){
	.top-nav1 .sec {position:static;}
	.top-nav1 .imgs {right:-35px;}
}
@media screen and (max-width:1362px){
	.top-nav2 .clm a.off::after {font-size:1.76vw;}
}
@media screen and (max-width:1000px){
	.top-mv {padding:38.0vw 0 30px 0;}
	.top-mv .catch {text-align:center; margin:35px 0 0 0;}
	.top-mv .catch dt {font-size:2.0rem;}
	.top-mv .catch dd {font-size:1.2rem; margin:1.5em 0 0 0;}

	.top-info {padding:20px 0;}
    .top-info .txt1 {font-size:3.0rem;}
    .top-info .img {width:70%;}

	.top-overview {padding:30px 0;}
	.top-overview .clm {margin:0; display:block;}
	.top-overview .clm > div {padding:0 0 140px 0;}
	.top-overview .clm dl {display:inline-block;}
	.top-overview .clm dd.ctx {bottom:-24%; right:-10%;}

	.top-nav1 {padding:0 0 50.0vw 0;}
	.top-nav1 .ctx {max-width:100%; width:100%; padding:30px 0;}
	.top-nav1 .ctx dt {font-size:3.0rem;}
	.top-nav1 .ctx dd {font-size:1.4rem;}
	.top-nav1 .btn {font-size:1.8rem;}
	.top-nav1 .imgs {max-width:100%; width:90%; height:54.0vw; position:absolute; top:auto; bottom:0; right:2%;}

	.top-nav2 {padding:10.0vw 0 30px 0;}
	.top-nav2 .clm {margin:0; display:block;}
	.top-nav2 .clm > div {width:auto; padding:1px 0;}
	.top-nav2 .clm a::before {width:26px; height:26px; bottom:-13px; right:-13px;}
	.top-nav2 .clm a.off::after {width:80%; font-size:1.4rem; left:10%;}
	.top-nav2 .clm a .ctx {font-size:2.0rem; letter-spacing:0.2em;}
	.top-nav2 .clm a .img {height:180px; overflow:hidden;}
}
@media screen and (max-width:360px){
	.top-overview .clm > div {padding:0 0 40% 0;}
}