/* ==========================================================================================
 ____   ____  ===============================================================================
|  _ \ / ___| ===============================================================================
| |_) | |     ===============================================================================
|  __/| |___  ===============================================================================
|_|    \____| ===============================================================================
========================================================================================== */
/* @media screen and (min-width: 751px) {} */
.beginner {
    line-height: 1.7;
}
.beginner_inner {
    width: 1200px;
    padding: 0 0 1.20rem;
    margin: 0 auto;
}
.beginner_logo {
    width: 5.6rem;
    padding: 1.20rem 0 .55rem .30rem;
}
.lead {
    width: 8.00rem;
    margin: -1.40rem auto .10rem;
}
.beginner_inner section {
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", "Hiragino Kaku Gothic ProN",'ヒラギノ角ゴ ProN W3','Meiryo UI', Meiryo, sans-serif;
    width: 8.00rem;
    margin: 0 auto;
}
/* #beginner .tab-wrap {
    margin-left: -.02rem;
} */
/*============================
system配下の共通タブ
============================*/
.tab-wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: relative;
    top: 1.00rem;
    margin: 0 0 .40rem .30rem;
}
.tab_btn {
    margin-right: .12rem;
    position: relative;
}
.tab_btn.new::after {
    content: "NEW";
    color: #eb2435;
    font-size: .18rem;
    font-weight: bold;
    position: absolute;
    top: -.15rem;
    left: -.05rem;
    background-color: #fff;
    line-height: 1;
    padding: .02rem;
    border-radius: .05rem;
}
.tab_btn a,
.tab_btn span {
    font-size: .35rem;
    font-weight: bold;
    line-height: .58rem;
    display: inline-block;
    border: 2px solid #4c92ff;
    border-radius: .29rem;
    height: .58rem;
    width: 2.40rem;
    text-align: center;
    color: #007bff;
}
.tab_btn a:hover {
    text-decoration: none;
}

/*============================
共通
============================*/
.beginner_txt {
    font-size: .20rem;
}
.flxbox {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
.sec_ttl {
    position: relative;
    left: 0;
    margin-bottom: .40rem;
}
.sec_sub-ttl {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    background: url('../img/sec_sub-ttl_bg.png') no-repeat center center/contain;
    width: 2.82rem;
    height: .52rem;
    margin: 0 auto .40rem;
    color: #fff;
    font-size: .24rem;
    font-weight: bold;
}
.sub_ttl {
    font-size: .30rem;
    color: #3a210a;
    font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}
.txt-link_wrap {
    text-align: right;
    margin-bottom: .70rem;
}
.txt-link {
    font-size: .28rem;
    font-weight: bold;
    font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}
.basic-tbl {
    width: 100%;
    border-spacing: .04rem;
    border-collapse: separate;
    background-color: #5b9bd5;
    text-align: center;
    font-size: .20rem;
}
.basic-tbl tr:nth-child(odd) {
    background-color: #fff;
}
.basic-tbl tr:nth-child(even) {
    background-color: #deebf7;
}
.basic-tbl th,
.basic-tbl td {
    vertical-align: middle;
    padding: .10rem;
}
.basic-tbl .taL {
    text-align: left;
}
.basic-tbl .nwrp {
    white-space: nowrap;
}
.fwp {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
}
.full {
    width: 100%;
}
.img-area {
    width: 3.50rem;
    margin-right: .35rem;
}

/*============================
navi
============================*/
.nav_ttl {
    width: 6.00rem;
    margin: 0 auto .10rem;
}
.beginner_nav {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    background: url('../img/pc/beginner_nav_bg_pc.png') no-repeat center top/contain;
    width: 8.00rem;
    height: 4.42rem;
    margin: 0 auto .60rem;
    padding: 0.6rem 0 .8rem;
}
.beginner_nav_item {
    width: 2.32rem;
    margin: .07rem;
}

/*============================
sec01
============================*/
.strik {
    color: #004a43;
    font-weight: bold;
}
.skill_aco {
    margin: 0 auto;
}
.skill_img_list {
    margin-bottom: .50rem;
}
.skill_ttl {
    position: relative;
    cursor: pointer;
    margin-bottom: .30rem;
}
.skill_ttl::after {
    content: '';
    position: absolute;
    top: 0.30rem;
    right: .10rem;
    width: .90rem;
    height: .90rem;
    background: url('../img/skill_aco_btn.png') no-repeat center center/contain;
    -webkit-transition: .3s;
    transition: .3s;
}
.skill_ttl.open::after {
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
}
.skill_dtl {
    display: none;
}
.skill_dtl_txt {
    margin: 0 auto .30rem;
}
.skill_dtl_tbl {
    width: 100%;
    border-spacing: .04rem;
    border-collapse: separate;
    background-color: #d5dce2;
    text-align: center;
    font-size: .20rem;
    margin-bottom: .90rem;
}
.skill_dtl_tbl th {
    background-color: #f2f4f6;
    font-weight: normal;
    height: .60rem;
    vertical-align: middle;
}
.skill_dtl_tbl td {
    background-color: #fff;
    height: .60rem;
    vertical-align: middle;
}
/*============================
sec02
============================*/
#sec02 .basic-tbl {
    margin-bottom: .70rem;
}
#sec02 .basic-tbl td {
    text-align: left;
    padding: 0 .20rem;
}

/*============================
sec03
============================*/
#sec03 {
    padding-bottom: .70rem;
}
#sec03 .txt-area {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
            order: 2;
}

/*============================
sec04
============================*/
#sec04 {
    padding-bottom: .70rem;
}
#sec04 .txt-area {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
            order: 2;
}

/*============================
sec05
============================*/
#sec05 {
    padding-bottom: .50rem;
}
#sec05 .full {
    -webkit-box-ordinal-group: 4;
        -ms-flex-order: 3;
            order: 3;
}
#sec05 .txt-area {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
            order: 2;
}
#sec05 .img-area {
    margin-bottom: .40rem;
}
#sec05 .basic-tbl td {
    padding: .20rem;
}
#sec05 .basic-tbl .icon {
    width: .50rem;
}

/*============================
sec06
============================*/
#sec06 .txt-area {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
            order: 2;
}

/* ==========================================================================================
 ____  ____   ===============================================================================
/ ___||  _ \  ===============================================================================
\___ \| |_) | ===============================================================================
 ___) |  __/  ===============================================================================
|____/|_|     ===============================================================================
========================================================================================== */
@media screen and (max-width: 750px) {
    .beginner_inner {
        width: 100%;
        padding: 0 0 1.20rem;
    }
    .beginner_logo {
        width: 3.84rem;
        padding: 1.40rem 0 .55rem;
        margin-left: .20rem;
    }
    .lead {
        width: 100%;
        margin: -1.20rem auto .30rem;
    }
    .beginner_inner section {
        width: 100%;
        padding: 0 .26rem;
    }
    #beginner .tab-wrap {
        margin-left: .25rem;
    }
    /*============================
    system配下の共通タブ
    ============================*/
    .tab-wrap {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        margin: 0 25px 32px;
        position: relative;
        top: 130px;
    }
    .tab_btn {
        margin-right: 10px;
        position: relative;
    }
    .tab_btn.new::after {
        content: "NEW";
        color: #eb2435;
        font-size: 18px;
        font-weight: bold;
        position: absolute;
        top: -15px;
        left: -5px;
        background-color: #fff;
        line-height: 1;
        padding: 2px;
        border-radius: 5px;
    }
    .tab_btn a,
    .tab_btn span {
        font-size: 24px;
        font-weight: bold;
        line-height: 40px;
        display: inline-block;
        border: 2px solid #4c92ff;
        border-radius: 20px;
        height: 40px;
        width: 166px;
        text-align: center;
        color: #007bff;
    }
    .tab_btn a:hover {
        text-decoration: none;
    }

    /*============================
    navi
    ============================*/
    .beginner_nav {
        background: url('../img/sp/beginner_nav_bg_sp.png') no-repeat center top/contain;
        width: 7.40rem;
        height: 7.62rem;
        padding: 0.6rem 0 .9rem;
    }
    .beginner_nav_item {
        width: 3.28rem;
        margin: .06rem;
    }
    /*============================
    共通
    ============================*/
    .beginner_txt {
        font-size: .26rem;
    }
    .flxbox {
        display: block;
    }
    .sec_ttl {
        width: 7.38rem;
        position: relative;
        left: -.26rem;
    }
    .sub_ttl {
        font-size: .30rem;
    }
    .sec_sub-ttl {
        width: 4.06rem;
        height: .69rem;
        font-size: .35rem;
    }
    .basic-tbl {
        font-size: .24rem;
    }
    .txt-link {
        font-size: .28rem;
    }
    .img-area {
        margin: 0 auto !important;
        width: 5.52rem;
    }
    /*============================
    sec01
    ============================*/
    .skill_ttl::after {
        top: .24rem;
        width: .80rem;
        height: .80rem;
    }
    .skill_dtl_tbl {
        font-size: .26rem;
    }
    .skill_dtl_tbl th,
    .skill_dtl_tbl td {
        height: .68rem;
    }
    /*============================
    sec04
    ============================*/
    #sec04 .txt-area {
        margin-top: .40rem;
    }
    /*============================
    sec05
    ============================*/
    #sec05 .full {
        margin-bottom: .40rem;
    }
}