.grid-container-01 {
width:100%;
max-width:100%; 
margin:0;
background-color:#1a1818;
height:auto;
padding:30px 0;
position:relative;
}



.grid-01 {
width:1720px;
max-width:1720px; 
margin:90px auto 50px auto;
height:auto;
grid-template-columns: repeat(6, 240px);
grid-template-rows: repeat(6, 180px);
gap:56px;
display:grid;
position:relative;
}

.grid-01-001 {
background-color:#ffffff;
grid-column: 1 / 4;
grid-row: 1 / 5;
}

.grid-01-002 {
background-color:#ffffff;
grid-column: 4 / 7;
grid-row: 1 / 3;
}

.grid-01-003 {
background-color:#ffffff;
grid-column: 4 / 7;
grid-row: 3 / 5;
}

.grid-01-004 {
background-color:#ffffff;
grid-column: 1 / 5;
grid-row: 5 / 7;
}

.grid-01-005 {
background-color:#ffffff;
grid-column: 5 / 7;
grid-row: 5 / 7;
}

.grid-01-006 {
background-color:#ffffff;
grid-column: 1 / 3;
grid-row: 7 / 10;
}

.grid-01-007 {
background-color:#ffffff;
grid-column: 3 / 5;
grid-row: 7 / 10;
}

.grid-01-008 {
background-color:#ffffff;
grid-column: 5 / 7;
grid-row: 7 / 10;
}





.grid-02 {
width:1720px;
max-width:1720px; 
margin:30px auto;
height:auto;
background-color:#1a1818;
grid-template-columns: repeat(6, 240px);
grid-template-rows: repeat(3, 180px);
gap:56px;
display:grid;
}

.grid-02-001 {
grid-column: 1 / 3;
grid-row: 1 / 4;
}

.grid-02-002 {
grid-column: 3 / 5;
grid-row: 1 / 4;
}

.grid-02-003 {
grid-column: 5 / 7;
grid-row: 1 / 4;
}




.grid-03 {
width:1720px;
max-width:1720px; 
margin:50px auto 90px auto;
height:auto;
grid-template-columns: repeat(6, 240px);
grid-template-rows: repeat(2, 180px);
gap:56px;
display:grid;
}

.grid-03-001 {
background-color:#ffffff;
grid-column: 1 / 4;
grid-row: 1 / 3;
}

.grid-03-002 {
background-color:#ffffff;
grid-column: 4 / 7;
grid-row: 1 / 3;
}





.grid-image-01 {
width:100%;
max-width:100%;
height:auto;
border-radius:0px 33px 33px 33px;
opacity:1.0;
margin:0 auto;
transition:650ms;
display:block;
}

.grid-image-01:hover {
opacity:0.70;
transition:650ms;
}



.grid-spacer-01 {
width:5px;
height:3px;
margin:0;
display:block;
}




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

.grid-01 {
width:1383px;
margin:90px auto 50px auto;
grid-template-columns: repeat(6, 193px);
grid-template-rows: repeat(6, 145px);
gap:45px;
}

.grid-02 {
width:1383px; 
margin:30px auto;
grid-template-columns: repeat(6, 193px);
grid-template-rows: repeat(3, 145px);
gap:45px;
}

.grid-03 {
width:1383px;
margin:60px auto 90px auto;
grid-template-columns: repeat(6, 193px);
grid-template-rows: repeat(2, 145px);
gap:45px;
}

}



/* 1680 x 1050 */
@media only screen and (max-width: 1700px) {



}



/* 1600 x 900 */
@media only screen and (max-width: 1600px) {
	


}



/* 1536 x 864 */
@media only screen and (max-width: 1550px) {
	

}




/* 1440 x 900 */
@media only screen and (max-width: 1460px) {
	
.grid-container-01 {
padding:28px 0;
}
	
	
.grid-01 {
width:1075px;
margin:85px auto 47px auto;
grid-template-columns: repeat(6, 150px);
grid-template-rows: repeat(6, 112px);
gap:35px;
}

.grid-02 {
width:1075px;
margin:28px auto;
grid-template-columns: repeat(6, 150px);
grid-template-rows: repeat(3, 112px);
gap:35px;
}

.grid-03 {
width:1075px;
margin:50px auto 47px auto;
grid-template-columns: repeat(6, 150px);
grid-template-rows: repeat(2, 112px);
gap:35px;
}

}




/* 1366 x 768 & 1366 x 760 */
@media only screen and (max-width: 1390px) {



}




/* 1280 x 800 */
@media only screen and (max-width: 1300px) {
	


}





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

.grid-container-01 {
padding:26px 0;
}


.grid-01 {
width:988px;
margin:80px auto 45px auto;
grid-template-columns: repeat(6, 138px);
grid-template-rows: repeat(6, 103px);
gap:32px;
}

.grid-02 {
width:988px;
margin:26px auto;
grid-template-columns: repeat(6, 138px);
grid-template-rows: repeat(3, 103px);
gap:32px;
}

.grid-03 {
width:988px;
margin:42px auto 80px auto;
grid-template-columns: repeat(6, 138px);
grid-template-rows: repeat(2, 103px);
gap:32px;
}


}




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


.grid-01 {
width:897px;
margin:70px auto 40px auto;
grid-template-columns: repeat(6, 127px);
grid-template-rows: repeat(6, 95px);
gap:27px;
}

.grid-02 {
width:897px;
margin:22px auto;
grid-template-columns: repeat(6, 127px);
grid-template-rows: repeat(3, 95px);
gap:27px;
}

.grid-03 {
width:897px;
margin:40px auto 70px auto;
grid-template-columns: repeat(6, 127px);
grid-template-rows: repeat(2, 95px);
gap:27px;
}

}






/* 1024 x 768 */
@media only screen and (max-width: 1050px) {



}




/* 960 x 600 */
@media only screen and (max-width: 980px) {
	
.grid-container-01 {
padding:20px 0;
}	

.grid-01 {
width:790px;
margin:55px auto 30px auto;
grid-template-columns: repeat(6, 115px);
grid-template-rows: repeat(6, 86px);
gap:20px;
}

.grid-02 {
width:790px;
margin:18px auto;
grid-template-columns: repeat(6, 115px);
grid-template-rows: repeat(3, 86px);
gap:20px;
}

.grid-03 {
width:790px;
margin:30px auto 55px auto;
grid-template-columns: repeat(6, 115px);
grid-template-rows: repeat(2, 86px);
gap:20px;
}

}




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

.grid-container-01 {
padding:16px 0;
}	

.grid-01 {
width:679px;
margin:50px auto 27px auto;
grid-template-columns: repeat(6, 99px);
grid-template-rows: repeat(6, 75px);
gap:17px;
}

.grid-02 {
width:679px;
margin:16px auto;
grid-template-columns: repeat(6, 99px);
grid-template-rows: repeat(3, 75px);
gap:17px;
}

.grid-03 {
width:679px;
margin:27px auto 50px auto;
grid-template-columns: repeat(6, 99px);
grid-template-rows: repeat(2, 75px);
gap:17px;
}

}




/* 800 x 1280 & 768 x 1024 */
@media only screen and (max-width: 810px) {



}





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


}





/* 600 x 960 */
@media only screen and (max-width: 620px) {



}




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




/* 480 x 853 */
@media only screen and (max-width: 500px) {



}




/* 412 x 732 & 414 x 736 (iPhone) */
@media only screen and (max-width: 430px) {



}




/* 360 x 740 & 375 x 812 */
@media only screen and (max-width: 380px) {



}




/* 320 x 568 */
@media only screen and (max-width: 330px) {



}




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



}