@charset "utf-8";

/* sec01 */
table { display: block; border-radius: 10px; border: 1px solid var(--border-color); overflow: hidden; }
table thead { display: none; }
table tbody { display: block; width: 100%; }
table tbody tr { display: flex; justify-content: flex-start; align-items: stretch; width: 100%; }
table tbody tr td { padding: 25px 0; border-top: 1px solid var(--border-color); }
table tbody tr:first-child td { border-top: 0; }
table tbody tr td.title { display: flex; justify-content: center; align-items: center; flex-shrink: 0; width: 150px; font-size: 17px; background: var(--gray-fa); border-right: 1px solid var(--border-color); font-weight: 700; color: var(--sub-01); text-align: center; }
table tbody tr td.text { display: flex; justify-content: flex-start; align-items: center; width: 100%; padding: 15px; font-size: 17px; font-weight: 400; color: var(--gray-55); word-break: keep-all; }

/* sec02 */
.sec02 ul { margin: 0 -10px; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap; }
.sec02 ul > li { margin-top: 80px; padding: 0 10px; width: 33%; }
.sec02 ul > li:nth-child(1) { margin-top: 0; }
.sec02 ul > li:nth-child(2) { margin-top: 0; }
.sec02 ul > li:nth-child(3) { margin-top: 0; }
.sec02 ul > li > .img_wrap { position: relative; padding-top: 75%; width: 100%; height: 0; border-radius: 10px; border: 1px solid var(--border-color); overflow: hidden; }
.sec02 ul > li > .img_wrap > img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.sec02 ul > li > p { margin-top: 15px; font-size: 18px; font-weight: 700; color: var(--gray-33); text-align: center; }


/*** responsive ***/
/* 1200px or less */
@media all and (max-width : 1200px){

    /* sec01 */
    table tbody tr td.title { font-size: 15px; }
    table tbody tr td.text { padding-left: 30px; font-size: 15px; }

    /* sec02 */
    .sec02 ul { margin: 0 -7px; }
    .sec02 ul > li { margin-top: 60px; padding: 0 7px; }
    .sec02 ul > li > p {font-size: 15px; }
}

/* 767px or less */
@media all and (max-width : 767px){

    /* sec01 */
    table tbody tr td { padding: 15px 0;  }
    table tbody tr td.title { width: 100px; font-size: 12px; }
    table tbody tr td.text { padding-left: 15px; font-size: 12px; }
  
    /* sec02 */
    .sec02 ul { margin: 0 -5px; }
    .sec02 ul > li { margin-top: 40px; padding: 0 5px; width: 50%; }
    .sec02 ul > li:nth-child(3) { margin-top: 40px; }
    .sec02 ul > li > p {font-size: 14px; }

}