@charset "utf-8";

h1 {position: fixed; left: 5%; top: 30px; z-index: 1000; width:260px; height: auto;}
.box {padding:170px 0; width: 100%;}

@media screen and (max-width : 1023px ){
	h1 {left: 6%; top: 4%; width: 50%}
}

@media screen and (max-width : 768px ){
	 h1 {left: 4%; top: 3%; width:65%; }
	.box {padding:120px 0; width: 100%;}
}

.none {display:none}

#mainArea {width: 100%; min-height: calc(100% - 80px);}

.box2 {width: 90%; margin: 0 auto; overflow: hidden;}
.box2 h2 img {height:4.5vw; width: auto; position: fixed;} 

.box3 {width: 55%; margin: 0 auto; display:flex; flex-direction: column; float: right;}
.box3 .set {width: 100%; display:flex; margin-bottom: 2em;}
.box3 .set:last-child {margin-bottom: 0;}
.dl {width: 100%; color: #FFF; line-height: 2em; font-size: 13px; display: flex; flex-direction: column;}
.dt {width: 30%;}
.dd {width: 70%;}

@media screen and (max-width : 1023px ){
	.box2 {width: 88%;}
}

@media screen and (max-width : 768px ){
	#mainArea {width: 100%; min-height:calc(100% - 40px);}
	
	.box2 {width: 92%;}
	.box2 h2 img {height:12vw; position: relative;} 
	
	.box3 {width: 100%; float: none; margin-top: 15vw;}
}