@charset "utf-8";

/* ---------- common ---------- */
.sub_wrap { padding-top: 120px; overflow: hidden; }
.page_title { margin: 0 auto 80px; text-align: center; }
.page_title h2 { display: inline-block; font-size: 36px; font-weight: 700; color: var(--gray-11); border-bottom: 2px solid var(--main-color); }
.section { padding: 0 0 120px 0; }
.section .sec_title { position: relative; display: inline-block; margin-bottom: 40px; padding: 0 25px; 
    min-width: 140px; width: auto; height: 50px; line-height: 50px; font-size: 18px; font-weight: 500; background: #7DB848; color: #fff; 
    text-align: center; box-sizing: border-box; border-top-right-radius: 16px; border-bottom-left-radius: 16px; overflow: hidden; }
.section .sec_title::before { position: absolute; top: -25px; left: -25px; width: 50px; height: 50px; background: var(--sub-01); border-radius: 50px; display: block; content: ""; }
.section .sec_title::after { position: absolute; bottom: -25px; right: -25px; width: 50px; height: 50px; background: var(--sub-01); border-radius: 50px; display: block; content: ""; }
.con_pl30 { padding-left: 30px; }
dl { display: flex; justify-content: flex-start; align-items: flex-start; margin: 10px 0; font-size: 17px; }
dl:first-child { margin-top: 0; }
dl:last-child { margin-bottom: 0; }
dt { flex-shrink: 0; position: relative; margin: 0px 40px 0px 0; padding-left: 14px; width: 100px; font-weight: 700; color: var(--sub-01); }
dt:before { position: absolute; top: 50%; left: 0; transform: translate(0,-50%); width: 4px; height: 4px; border-radius: 4px; background: var(--sub-01); display: block; content: ""; }
dd { font-weight: 400; color: var(--gray-33); }
dd > p { position: relative; padding-left: 14px; font-size: 17px; font-weight: 400; color: var(--gray-33); }
dd > p::before { position: absolute; top: 10px; left: 0; width: 4px; height: 4px; border-radius: 4px; background: var(--gray-55); display: block; content: ""; }
dd >  ul { display: flex; justify-content: flex-start; align-items: center; }
dd >  ul > li { padding-right: 20px; }
dd >  ul > li > span { display: inline-block; margin-right: 5px; width: 48px; height: 26px; line-height:26px; font-size: 13px; font-weight: 400; text-align: center;
    color: #fff; border-radius: 26px; background: var(--sub-01); }

/*** responsive ***/
/* 1200px or less */
@media all and (max-width : 1200px){
    .sub_wrap { padding-top: 80px; }
    .page_title { margin: 0 auto 60px; }
    .page_title h2 { font-size: 28px; }
    .section { padding: 0 0 80px 0; }
    .section .sec_title { margin-bottom: 30px; min-width: 100px; height: 40px; line-height: 40px; font-size: 16px; }
    .section .sec_title::before { top: -20px; left: -20px; width: 40px; height: 40px; }
    .section .sec_title::after { bottom: -20px; right: -20px; width: 40px; height: 40px; }
    .con_pl30 { padding-left: 20px; }
    dl { margin: 10px 0; font-size: 15px; }
    dt { margin: 0px 20px 0px 0; padding-left: 10px; width: 90px; }
    dt:before { width: 3px; height: 3px; }
    dd > p { padding-left: 11px; font-size: 15px; }
    dd > p::before { top: 9px; left: 0; width: 3px; height: 3px; }
    dd >  ul > li { padding-right: 20px; }
    dd >  ul > li > span { width: 45px; height: 24px; line-height:24px; font-size: 12px; }
}

/* 767px or less */
@media all and (max-width : 767px){
    .sub_wrap { padding-top: 60px; }
    .page_title { margin: 0 auto 40px var(--wrap-space); text-align: left; }
    .page_title h2 { font-size: 24px; }
    .section { padding: 0 0 60px 0; }
    .section .sec_title { margin-bottom: 20px; padding: 0 15px; min-width: 85px; height: 35px; line-height: 35px; font-size: 16px; }
    .section .sec_title::before { top: -17.5px; left: -17.5px; width: 35px; height: 35px; }
    .section .sec_title::after {  bottom: -17.5px; right: -17.5px; width: 35px; height: 35px; }
    .con_pl30 { padding-left: 10px; }
    dl { display: block; margin: 10px 0; font-size: 14px; }
    dt { position: relative; margin: 0px 0px 2px 0;}
    dd { padding-left: 10px; }
    dd > p { padding-left: 11px; font-size: 14px; }
    dd > p::before { top: 9px; left: 0; width: 3px; height: 3px; }
    dd >  ul { display: block; }
    dd >  ul > li { margin: 5px 0 0 -5px; padding-right: 20px; }
    dd >  ul > li > span { width: 42px; height: 24px; line-height:24px; font-size: 11px; }
}