@charset "utf-8";
/* CSS Document */

/*PC*/
@media print, screen and (min-width: 769px) {
	
.sec01 { margin: auto; position: relative;}
/*.sec01::after { content: ""; width: 60%; height: 200px; background: rgba(229,234,232,0.7); position: absolute; right: 0; bottom: 30px; z-index: -1;}*/
.sec01 .box { display: flex; flex-direction: row-reverse; justify-content: space-between;}
.sec01 .box .img { width: 400px;}
.sec01 .box .txt { width: calc( 100% - 400px - 50px); margin: 0 50px 0 0;}


.sec02 { margin: auto; position: relative;}
.sec02::after { content: ""; width: 100%; height: 300px; background: rgba(229,234,232,0.7); position: absolute; right: 0; bottom: 30px; z-index: -1;}
.sec02 .box { display: flex; justify-content: space-between;}
.sec02 .box .sbox { width: 31%;}
.sec02 .box .sbox .img { display: flex; justify-content: space-between; text-align: center;}
.sec02 .box .sbox .img div {}
.sec02 .box .sbox .txt { padding: 15px; background: #FFF;}




}



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

.sec01 { margin: auto 2%;}
.sec01::after {}
.sec01 .box { display: inherit; flex-direction: row-reverse; justify-content: space-between;}
.sec01 .img { margin: auto auto 5%;}
.sec01 .img img { width: 100%; height: auto;}
.sec01 .txt { width: 100%; margin: 0 0 0 0;}


.sec02 { display: inherit; justify-content: space-between; margin: auto 2%;}
.sec02 .box { width: 100%; margin: auto auto 10%;}
.sec02 .box .sbox { width: 100%; margin: auto auto 10%;}
.sec02 .box .sbox .img { display: flex; justify-content: space-between; text-align: center; margin-bottom: 20px;}
.sec02 .box .sbox .img div {}
.sec02 .box .sbox .txt {}




}