@import url(http://fonts.googleapis.com/earlyaccess/notosansjapanese.css);

@charset "utf-8";

/* ===================================================================
 style info : コンテンツエリア関係 他

fonts
 10px = 77%     11px = 85%     12px = 93%     13px = 100%
 14px = 108%    15px = 116%    16px = 123.1%  17px = 131%
 18px = 138.5%  19px = 146.5%  20px = 153.9%  21px = 161.6%
 22px = 167%    23px = 174%    24px = 182%    25px = 189%
 26px = 197%
=================================================================== */


body{

color:#000;
	font-size:14px;
	letter-spacing:1px;
	line-height:160%;
	overflow-x:hidden;
	
	background-color: #6D6D6D;
	
	font-family: source-han-serif-jp-variable, sans-serif;
font-style: normal;
font-weight: 250;
	
}



img {
	vertical-align:bottom;
    border-style:none;
}

a{
	text-decoration:none;
	color:#fff;
}

a img {
    border-style:none;
}

a:focus { outline:none;}

#Main{
	width:100%;
	overflow:hidden;
/*	min-height:2000px;*/
}

img{
	max-width: 100%;
	height: auto;

}
/**/

.tac{
	text-align: center;
}

.fs36{
	font-size: 36px;
	line-height: 48px;
}

.fs10{
	font-size: 10px;
}

.fs14{
	font-size: 14px;
}

.fs16{
	font-size: 16px;
}

.fs20{
	font-size: 20px;
}

.logo_box{
	width: 200px;
	margin: 0 auto;
	padding-top: 40px;
}

.mt20{
	margin-top: 20px;
}

.mt40{
	margin-top: 40px;
}

.mt50{
	margin-top: 50px;
}

.mt80{
	margin-top: 80px;
}

.mt100{
	margin-top: 100px;
}

.w840{
	width: 840px;
}

.pt60{
	padding-top: 60px;
}

.pt50{
	padding-top: 50px;
}

.pt20{
	padding-top: 20px;
}

.pb20{
	padding-bottom: 20px;
}

.pb50{
	padding-bottom: 50px;
}

article{
	margin-top: 200px;
	padding-left: 60px;
	
}

#map_box{
	width: 100%;
	height: 360px;
	background-color: aliceblue;
}

.con_box{
	background-color:rgba(11,51,98,0.1);
	padding: 40px;
	margin-top: 40px;
	margin-bottom: 40px;
}

.con_box2{
	padding-left: 40px;
	padding-right: 40px;
	/*background-color:rgba(11,51,98,0.1);*/
	/*padding: 40px;*/
	/*margin-top: 40px;
	margin-bottom: 40px;*/
}

h2{
	font-size: 18px;
	font-weight: 250;
}

h3{
	font-weight: 250;
}

/**/

#pagewrap{
	width:100vw;
	display:flex;
	flex-flow: wrap;
	align-items: flex-end; /* ここ！！ */
}

#mv_wrap{
	/*position: fixed;*/
	/*width: 50vw;
	left: 50vw;*/
	width: 56vw;
	display:flex;
	flex-flow:column;
	justify-content: flex-start;
	position:sticky;
	  position: -webkit-sticky;
	bottom: 0px;
  
}

#cont_wrap{
	/*position:absolute;*/
	/*width: 44vw;*/
	width: calc(100% - 56vw);
	
	color: #fff;
	background-color:#010101;
	
	box-sizing: border-box;
	font-size: 14px;
	line-height: 36px;
	
	padding-top: 120px;
	font-weight: 250;

}

.copy_txt{
	font-size: 24px;
	line-height: 44px;
	
	text-align: center;
	
}

.copy_txt2{
	font-size: 18px;
	line-height: 38px;
	padding-right: 60px;
	
}

.txt_box{
	padding-right: 60px;
}

.img_box{
	width:100%;
	height: 240px;
	margin-top: 60px;
	margin-bottom: 60px;
	
}

.encopy_txt{
	font-size: 18px;
	line-height: 38px;
	
	text-align: center;
}

.icon_box{
	
}

.icon_box img{
	width: 48px;
}

#gnav{
writing-mode: vertical-rl;
	font-size: 18px;
	margin: 0 auto;
	margin-top: 120px;
	margin-bottom: 300px;
}

#gnav ul{
display:flex;
	justify-content:space-between;
	    flex-flow: column;
	
}

.mv_box1{
	/*width: 840px;
	height: 592px;
	841,592(594)*/
	width: 56vw;
	height: 40vw;
	background-color: #ddd;
	display:flex;
	flex-flow: wrap;
	
}

.mv_box2{
	/*width: 420px;
	height: 592px;
	592(594),420*/
	width: 28vw;
	height: 40vw;
	background-color: #bbb;
	display:flex;
	flex-flow: wrap;
}

.mv_box3{
	/*width: 420px;
	height: 296px;
	420,296(297)*/
	width: 28vw;
	height: 20vw;
	background-color: #999;
	display:flex;
	flex-flow: wrap;
}

.mv_box4{
	/*width: 210px;
	height: 296px;
	296(297),210*/
	width: 14vw;
	height: 20vw;
	background-color: #777;
		display:flex;
	flex-flow: wrap;
}

.mv_box5{
	/*width: 210px;
	height: 148px;
	210,148*/
	width: 14vw;
	height: 10vw;
	background-color: #555;
	display:flex;
	flex-flow: wrap;
}

.mv_box6{
	/*width: 105px;
	height: 148px;
	148,105*/
	width: 7vw;
	height: 10vw;
	background-color: #222;
}

.mv_box7{
	/*width: 105px;
	height: 148px;
	148,105*/
	width: 7vw;
	height: 10vw;
	background-color: #000;
	
}

.photo1{
	background-image: url("../images/photo1.jpg");
	background-size: cover;
}

.photo2{
	background-image: url("../images/photo2.jpg");
	background-size: cover;
}

.photo3{
	background-image: url("../images/photo3.jpg");
	background-size: cover;
}

.photo4{
	background-image: url("../images/photo4.jpg");
	background-size: cover;
}

.photo5{
	background-image: url("../images/photo5.jpg");
	background-size: cover;
}

.photo6{
	background-image: url("../images/photo6.jpg");
	background-size: cover;
}

.photo7{
	background-image: url("../images/photo7.jpg");
	background-size: cover;
}

.photo8{
	background-image: url("../images/photo8.jpg");
	background-size: cover;
}

.photo9{
	background-image: url("../images/photo9.jpg");
	background-size: cover;
	background-position: 60%;
}

.photo10{
	background-image: url("../images/photo10.jpg");
	background-size: cover;
	background-position: 10%;
}

.photo11{
	background-image: url("../images/photo11.jpg");
	background-size: cover;
	background-position: 15%;
}

.photo12{
	background-image: url("../images/photo12.jpg");
	background-size: cover;
	background-position: 30%;
}

.photo13{
	background-image: url("../images/photo13.jpg");
	background-size: cover;
	background-position: 40%;
}

.photo14{
	background-image: url("../images/photo14.jpg");
	background-size: cover;
	background-position: 85%;
}

.photo15{
	background-image: url("../images/photo15.jpg");
	background-size: cover;
}

.photo16{
	background-image: url("../images/photo16.jpg");
	background-size: cover;
}
.photo17{
	background-image: url("../images/photo17.jpg");
	background-size: cover;
}

.photo18{
	background-image: url("../images/photo18.jpg");
	background-size: cover;
}

.photo19{
	background-image: url("../images/photo19.jpg");
	background-size: cover;
	background-position: center;
}

.photo20{
	background-image: url("../images/photo20.jpg");
	background-size: cover;
	background-position: center;
}

footer{
	margin-top: 40px;
	margin-left: 60px;	
	padding-bottom: 140px;
}

#pattern1{
	position: fixed;
	top:0;
	left: 56vw;
  width: 150px;
  aspect-ratio: 1;
  clip-path: polygon(0 0,100% 0,0 100%);
/*  background: linear-gradient(135deg,#000,#1A1A1A);*/
	background: #080808;
}

#pattern2{
	position: fixed;
	top:0;
	right: 0;
  width: 150px;
  aspect-ratio: 1;
  clip-path: polygon(0 0,100% 0,100% 100%);
/*  background: linear-gradient(135deg,#000,#1A1A1A);*/
	background: #080808;
}

#pattern3{
	position: fixed;
	bottom:0;
	right: 0;
  width: 150px;
  aspect-ratio: 1;
  clip-path: polygon(0 100%,100% 0,100% 100%);
/*  background: linear-gradient(135deg,#000,#1A1A1A);*/
	background: #080808;
}

#pattern4{
	position: fixed;
	bottom:0;
	left: 56vw;
  width: 150px;
  aspect-ratio: 1;
  clip-path: polygon(0 100%,0 0,100% 100%);
/*  background: linear-gradient(135deg,#000,#1A1A1A);*/
	background: #080808;
}

@media screen and (max-width: 1120px){
	.mv_box1:first-child {
	height: 50vw;
}
	
}

@media screen and (max-width: 1080px){
#pagewrap{
	width:100vw;
	display:flex;
	flex-flow: wrap;
	align-items: flex-end; /* ここ！！ */
}

#mv_wrap{
	/*position: fixed;*/
	/*width: 50vw;
	left: 50vw;*/
	width: 100%;
	display:flex;
	flex-flow:column;
	justify-content: flex-start;
	position:sticky;
	  position: -webkit-sticky;
	bottom: 0px;
  
}

#cont_wrap{
	/*position:absolute;*/
	/*width: 44vw;*/
	width: 100%;
	
	color: #fff;
	background-color:#1A1A1A;
	
	box-sizing: border-box;
	font-size: 14px;
	line-height: 36px;
	
	padding-top: 120px;
	font-weight: 250;

}
	
.mv_box1{
	/*width: 840px;
	height: 592px;
	841,592(594)*/
	width: 100vw;
	height: 70vw;
	background-color: #ddd;
	display:flex;
	flex-flow: wrap;	
}
	
.mv_box2{
	/*width: 420px;
	height: 592px;
	592(594),420*/
	width: 50vw;
	height: 70vw;
	background-color: #bbb;
	display:flex;
	flex-flow: wrap;
}

.mv_box3{
	/*width: 420px;
	height: 296px;
	420,296(297)*/
	width: 50vw;
	height: 35vw;
	background-color: #999;
	display:flex;
	flex-flow: wrap;
}

.mv_box4{
	/*width: 210px;
	height: 296px;
	296(297),210*/
	width: 25vw;
	height: 35vw;
	background-color: #777;
		display:flex;
	flex-flow: wrap;
}

.mv_box5{
	/*width: 210px;
	height: 148px;
	210,148*/
	width: 25vw;
	height: 18vw;
	background-color: #555;
	display:flex;
	flex-flow: wrap;
}

.mv_box6{
	/*width: 105px;
	height: 148px;
	148,105*/
	width: 12.5vw;
	height: 18vw;
	background-color: #222;
}

.mv_box7{
	/*width: 105px;
	height: 148px;
	148,105*/
	width: 12.5vw;
	height: 18vw;
	background-color: #000;
	
}

	.encopy_txt{
		padding-left: 5%;
		padding-right: 5%;
	}
	
	#gnav {
    margin-bottom: 100px;
}
	
	article{
	margin-top: 100px;
	padding-left: 0;
	
}
	.copy_txt2{
		padding-left: 5%;
		padding-right: 5%;
	}
	
	.txt_box{
		padding-left: 5%;
		padding-right: 5%;
	}
	
	footer {
		padding: 60px;
    margin-top: 0px;
		margin-left: 0px;
		text-align: center;
		
}
	
#pattern1{
	
left: 0;
  width: 80px;
 
}

#pattern2{

  width: 80px;

}

#pattern3{
bottom:-34px;
  width: 80px;

}

#pattern4{
	bottom:-34px;
	left: 0;
  width: 80px;
  
}
	
}