@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%;}
}

#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 h3 {font-size: 24px; color: #FFFFFF; margin-bottom: 80px; width: 100%;} 

.box3 .set {width: 100%; margin-bottom: 40px}

.box3 .set:nth-child(2) {margin-bottom: 100px; padding-bottom: 100px; border-bottom: 2px #fff solid}


.box3 .set:last-child {margin-bottom: 0;}
.box3 .photo {width: 28%}
.box3 div {color: #FFF; line-height: 1.8em; width: 100%}
.box3 p:nth-child(1) {font-size: 20px; letter-spacing: 0.2em;}
.box3 p:nth-child(2) {font-size: 14px; margin-top: 10px;}
.box3 p:nth-child(3) {font-size: 11px;}
.box3 p:nth-child(4) {font-size: 11px;}


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

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