@charset "utf-8";

.topics { display: flex; justify-content: center; align-items: center;}
.tpc, .tpc img,.tpc div { width: 250px; height: 250px; }
.tpc img, .tpc div { display: block; position: absolute; border-radius: 125px; }
.tpc { position: relative; display: block; margin: -15px; }

.tpc div { padding: 50px; background: linear-gradient(90deg, rgba(250, 250, 250, 0) 0%, rgba(250, 250, 250, 0.9) 60%, rgba(250, 250, 250, 0.9) 80%, rgba(250, 250, 250, 0.9) 100%); color: #000; font-size: 20px; text-transform: uppercase; display: flex; justify-content: center; align-items:center; }
.tpc:nth-of-type(4n + 1) div { background: linear-gradient(90deg, rgba(190, 230, 215, 0) 0%, rgba(190, 230, 215, 0.9) 60% ); }

.block0 { display: block;}
.block0 p { font-style: italic;}

.blockh { margin-top: 0;}

.bpouter { display: flex; justify-content: space-between;}
.imgb { width: 20%; }
.imgp { width: 40%; padding: 0 40px 20px 0; float: left; box-sizing: border-box; }

.imgb img, .imgp img { display: block; width: 100%; border-radius: 50%; min-width: 150px; }
.imgb img { max-width: 200px; }
.imgp img { max-width: 400px; }
.txtb { width: 75%; font-size: 18px; line-height: normal; }

/*----------@media------*/

@media all and (max-width: 800px) {
    .imgp { width: 100%; float: none; padding: 0 0px 10px 0; text-align: center; }
    .imgp img { margin: 0 auto; max-width: 200px;}
}

@media all and (max-height: 500px) {
    .imgp, .imgp img { max-width: 300px; }
    .imgp { padding: 0 30px 10px 0; }
}

@media all and (max-width: 730px) {
    .bpouter { display: block; }
    .imgb { width: 100%; text-align: center; }
    .imgb img { margin: 0 auto; }
    .txtb { width: 100%; margin: 20px 0 0 0;}
}