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

/*--------------------------------------
    magazine
--------------------------------------*/

.magazine p{
    margin: 0;
}
.magazine .componentheading-lg h3.heading{
    font-size:26px;
    font-weight: bold;
    color:#008D7D;
    margin: 0 auto 24px;
}
.magazine .componentheading-md h3.heading{
    font-size:22px;
    font-weight: bold;
    margin: 0 auto 18px;
}
.magazine .componentheading-sm h3.heading{
    font-size:18px;
    font-weight: bold;
    margin: 0 auto 12px;
}
.magazine .component-text{
    margin-bottom: 30px;
}
.magazine .component-text.-frame{
    padding:20px 25px;
    border:1px solid #000000;
}
.magazine .component-text.-bg{
    padding:20px 25px;
    background: #F2F2F2;
}
.magazine .component-img{
    width:100%;
    text-align: center;
    margin:0 auto 30px;
}
.magazine .component-img.-md{
    width:800px;
}
.magazine .component-img.-sm{
    width:680px;
}
.magazine .component-img.row{
    display: grid;
    gap:20px;
    grid-template-columns: 1fr 1fr;
}
.magazine .caption{
    text-align: center;
    margin: 10px auto;
}
.magazine .component-imgtext.row{
    display: flex;
    justify-content: space-between;
    margin-bottom: 30px;
}
.magazine .component-imgtext.row.-rev{
    flex-direction: row-reverse;
}
.magazine .col-lg.item{
    width:734px;
}
.magazine .col-md.item{
    width:532px;
}
.magazine .col-sm.item{
    width:330px;
}
.magazine .component-imglink{
    width:100%;
    margin:0 auto 20px;
    text-align: center;
}
.magazine .component-imglink.-md{
    width:800px;
}
.magazine .component-imglink.-sm{
    width:680px;
}
.magazine .component-imglink a{
    text-align: center;
    width:100%;
    display: block;
}
.magazine .component-btn{
    text-align: center;
    margin: 0 auto 30px;
}
.magazine .component-btn.-row2{
    width:830px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    text-align: center;
    justify-content: center;
    gap:30px;
}
.magazine .component-btn a{
    width: 400px;
    height: 55px;
    box-sizing: border-box;
    border: 1px solid #000000;
    background: #FFFFFF;
    line-height: 53px;
    text-align: center;
    padding: 0 110px 0 60px;
    position: relative;
    display: inline-block;
    font-weight: bold;
    border-radius: 0px;
    color:#000000;
    font-size:16px;
}
.magazine .component-btn a::before{
    content: "";
    width: 100%;
    height: 100%;
    border: 1px solid #000000;
    background: #FFFFFF;
    position: absolute;
    top: 3px;
    left: 3px;
    z-index: -999;
}
.magazine .component-btn a::after{
    content: "";
    width: 49px;
    height: 16px;
    background: url(../common/images/icon_arrow_b_001.png) no-repeat center center;
    position: absolute;
    top: 0px;
    left: auto;
    right: 20px;
    bottom: 0;
    margin: auto;
    z-index: 10;
}
.magazine .component-btn a:hover{
    transform: translate(4px ,4px);
}
.magazine .component-btn a:hover::before{
    top:-1px;
    left:-1px;
}
.magazine .component-table{
    margin: 0 auto 30px;
}
.magazine .component-table.-col2 table.table{
    width:680px;
}
.magazine .component-table.-col2 table.table.-lg{
    width:100%;
}
.magazine .component-table.-col2 table.table.-md{
    width:800px;
}
.magazine .component-table.-col2 table.table tr th{
    width:200px;
    padding: 10px 15px;
    background: rgba(0,141,124,0.12);
    border:1px solid #CCCCCC;
}
.magazine .component-table.-col2 table.table tr td{
    width:calc(100% - 200px);
    padding: 10px 15px;
    border:1px solid #CCCCCC;
}
.magazine .component-table.-free table.table{
    width:680px;
}
.magazine .component-table.-free table.table.-lg{
    width:100%;
}
.magazine .component-table.-free table.table.-md{
    width:800px;
}
.magazine .component-table.-free table.table thead tr th{
    padding: 10px 15px;
    background: rgba(0,141,124,0.12);
    border:1px solid #CCCCCC;
}
.magazine .component-table.-free table.table tbody tr td{
    padding: 10px 15px;
    border:1px solid #CCCCCC;
    text-align: center;
}
@media (max-width: 740px) {
.magazine .component-img.-md{
    width:100%;
}
.magazine .component-img.-sm{
    width:100%;
}
.magazine .component-imgtext.row {
    display: block;
}
.magazine .col-lg.item{
    width:100%;
    margin-bottom: 20px;
}
.magazine .col-md.item{
    width:100%;
    margin-bottom: 20px;
}
.magazine .col-sm.item{
    width:100%;
    margin-bottom: 20px;
}
.magazine .component-imglink.-md{
    width:100%;
}
.magazine .component-imglink.-sm{
    width:100%;
}
.magazine .component-btn.-row2{
    width:94%;
}
.magazine .component-btn a{
    width: 100%;
}
.magazine .component-table{
    overflow-x: scroll;
}
.magazine .component-table.-col2 table.table{
    width:680px;
}
.magazine .component-table.-col2 table.table.-lg{
    width:1084px;
}
.magazine .component-table.-col2 table.table.-md{
    width:800px;
}
.magazine .component-table.-col2 table.table tr th{
    width:120px;
    font-size:14px;
}
.magazine .component-table.-col2 table.table tr td{
    width:calc(100% - 120px);
    font-size:14px;
}
.magazine .component-table.-free table.table{
    width:680px;
}
.magazine .component-table.-free table.table.-lg{
    width:1084px;
}
.magazine .component-table.-free table.table.-md{
    width:800px;
}
}