@charset 'UTF-8';
.be-sec
{
    width: 1020px;
    margin: 0 auto;
}

@media print, screen and (max-width: 768px)
{
    .be-sec
    {
        width: 100%;
    }
}

.be-sec > h2
{
    font-family: '丸フォーク B', serif;
    font-size: 25px;
    font-weight: 600;

    width: calc(100% - 15px);
    margin-bottom: 25px;
    padding: 16px 0 16px 15px;

    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
    background-color: #d2f5f6;
}

@media print, screen and (max-width: 768px)
{
    .be-sec > h2
    {
        font-size: 5.16vw;

        width: 96.875%;
        margin-bottom: 3.125%;
        padding: 7.03% 0 7.03% 3.125%;
    }
}

.be-sec .be-content
{
    width: 850px;
    margin: 0 auto 70px;
}

@media print, screen and (max-width: 768px)
{
    .be-sec .be-content
    {
        width: 100%;
    }
}

.be-sec .be-content .be-courseSec
{
    width: 100%;
    margin: 0 auto;
}

.be-sec .be-content .be-courseSec > h3
{
    width: 100%;
    margin-bottom: 38px;

    text-align: center;
}

@media print, screen and (max-width: 768px)
{
    .be-sec .be-content .be-courseSec > h3
    {
        margin-bottom: 5.9375%;
    }
}

.be-sec .be-content .be-courseSec > h3 > img
{
    width: 363.788px;
}

@media print, screen and (max-width: 768px)
{
    .be-sec .be-content .be-courseSec > h3 > img
    {
        width: 70.34188%;
    }
}

.be-sec .be-content .be-courseSec .be-courseContent
{
    width: 100%;
    margin-bottom: 45px;
}

@media print, screen and (max-width: 768px)
{
    .be-sec .be-content .be-courseSec .be-courseContent
    {
        margin-bottom: 9.375%;
    }
}

.be-sec .be-content .be-courseSec .be-courseContent .be-courseContent_ttl
{
    width: calc(100% - 240px);
    height: 80px;
    padding-left: 240px;

    background-image: url(/elekiban/beginner/img/bg_course_ttl.png);
    background-repeat: repeat-x;
    background-position: top left;
    background-size: 32px 100%;
}

@media print, screen and (max-width: 768px)
{
    .be-sec .be-content .be-courseSec .be-courseContent .be-courseContent_ttl
    {
        width: calc(100% - 120/640*100%);
        height: 14.0625vw;
        padding-left: 18.75%;
    }
}

.be-sec .be-content .be-courseSec .be-courseContent .be-courseContent_ttl.ttl01
{
    position: relative;

    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;

    margin-bottom: 30px;

    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

@media print, screen and (max-width: 768px)
{
    .be-sec .be-content .be-courseSec .be-courseContent .be-courseContent_ttl.ttl01
    {
        margin-bottom: 3.90625%;
    }
}

.be-sec .be-content .be-courseSec .be-courseContent .be-courseContent_ttl.ttl01:before
{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 175px;

    width: 33.148px;
    height: 56.132px;
    margin: auto 0;

    content: '';

    background-image: url(/elekiban/beginner/img/icon_course_num1.svg);
    background-repeat: repeat-x;
    background-size: contain;
}

@media print, screen and (max-width: 768px)
{
    .be-sec .be-content .be-courseSec .be-courseContent .be-courseContent_ttl.ttl01:before
    {
        left: 8.59375%;

        width: 5.88563vw;
        height: 9.96656vw;
    }
}

.be-sec .be-content .be-courseSec .be-courseContent .be-courseContent_ttl.ttl01 > img
{
    width: 425.414px;
}

@media print, screen and (max-width: 768px)
{
    .be-sec .be-content .be-courseSec .be-courseContent .be-courseContent_ttl.ttl01 > img
    {
        width: 89.71231%;
    }
}

.be-sec .be-content .be-courseSec .be-courseContent .be-courseContent_ttl.ttl02
{
    position: relative;

    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;

    margin-bottom: 30px;

    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

@media print, screen and (max-width: 768px)
{
    .be-sec .be-content .be-courseSec .be-courseContent .be-courseContent_ttl.ttl02
    {
        margin-bottom: 3.90625%;
    }
}

.be-sec .be-content .be-courseSec .be-courseContent .be-courseContent_ttl.ttl02:before
{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 175px;

    width: 39.115px;
    height: 56.1px;
    margin: auto 0;

    content: '';

    background-image: url(/elekiban/beginner/img/icon_course_num2.svg);
    background-repeat: repeat-x;
    background-size: contain;
}

@media print, screen and (max-width: 768px)
{
    .be-sec .be-content .be-courseSec .be-courseContent .be-courseContent_ttl.ttl02:before
    {
        left: 8.59375%;

        width: 6.97234vw;
        height: 10vw;
    }
}

.be-sec .be-content .be-courseSec .be-courseContent .be-courseContent_ttl.ttl02 > img
{
    width: 413.98px;
}

@media print, screen and (max-width: 768px)
{
    .be-sec .be-content .be-courseSec .be-courseContent .be-courseContent_ttl.ttl02 > img
    {
        width: 87.29231%;
    }
}

.be-sec .be-content .be-courseSec .be-courseContent .be-courseContent_ttl.ttl03
{
    position: relative;

    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;

    margin-bottom: 30px;

    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

@media print, screen and (max-width: 768px)
{
    .be-sec .be-content .be-courseSec .be-courseContent .be-courseContent_ttl.ttl03
    {
        margin-bottom: 3.90625%;
    }
}

.be-sec .be-content .be-courseSec .be-courseContent .be-courseContent_ttl.ttl03:before
{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 175px;

    width: 40.833px;
    height: 56.1px;
    margin: auto 0;

    content: '';

    background-image: url(/elekiban/beginner/img/icon_course_num3.svg);
    background-repeat: repeat-x;
    background-size: contain;
}

@media print, screen and (max-width: 768px)
{
    .be-sec .be-content .be-courseSec .be-courseContent .be-courseContent_ttl.ttl03:before
    {
        left: 8.59375%;

        width: 7.27859vw;
        height: 10vw;
    }
}

.be-sec .be-content .be-courseSec .be-courseContent .be-courseContent_ttl.ttl03 > img
{
    width: 431.003px;
}

@media print, screen and (max-width: 768px)
{
    .be-sec .be-content .be-courseSec .be-courseContent .be-courseContent_ttl.ttl03 > img
    {
        width: 90.89942%;
    }
}

.be-sec .be-content .be-courseSec .be-courseContent .be-courseContent_ttl.ttl04
{
    position: relative;

    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;

    margin-bottom: 30px;

    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

@media print, screen and (max-width: 768px)
{
    .be-sec .be-content .be-courseSec .be-courseContent .be-courseContent_ttl.ttl04
    {
        margin-bottom: 3.90625%;
    }
}

.be-sec .be-content .be-courseSec .be-courseContent .be-courseContent_ttl.ttl04:before
{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 175px;

    width: 44.782px;
    height: 56.1px;
    margin: auto 0;

    content: '';

    background-image: url(/elekiban/beginner/img/icon_course_num4.svg);
    background-repeat: repeat-x;
    background-size: contain;
}

@media print, screen and (max-width: 768px)
{
    .be-sec .be-content .be-courseSec .be-courseContent .be-courseContent_ttl.ttl04:before
    {
        left: 8.59375%;

        width: 7.9825vw;
        height: 10vw;
    }
}

.be-sec .be-content .be-courseSec .be-courseContent .be-courseContent_ttl.ttl04 > img
{
    width: 254.076px;
}

@media print, screen and (max-width: 768px)
{
    .be-sec .be-content .be-courseSec .be-courseContent .be-courseContent_ttl.ttl04 > img
    {
        width: 53.40692%;
    }
}

.be-sec .be-content .be-courseSec .be-courseContent .be-courseContent_ttl.ttl05
{
    position: relative;

    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;

    margin-bottom: 30px;

    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

@media print, screen and (max-width: 768px)
{
    .be-sec .be-content .be-courseSec .be-courseContent .be-courseContent_ttl.ttl05
    {
        margin-bottom: 3.90625%;
    }
}

.be-sec .be-content .be-courseSec .be-courseContent .be-courseContent_ttl.ttl05:before
{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 175px;

    width: 36.782px;
    height: 56.1px;
    margin: auto 0;

    content: '';

    background-image: url(/elekiban/beginner/img/icon_course_num5.svg);
    background-repeat: repeat-x;
    background-size: contain;
}

@media print, screen and (max-width: 768px)
{
    .be-sec .be-content .be-courseSec .be-courseContent .be-courseContent_ttl.ttl05:before
    {
        left: 9.59375%;
        width: 6.5825vw;
        height: 10vw;
    }
}

.be-sec .be-content .be-courseSec .be-courseContent .be-courseContent_ttl.ttl05 > img
{
    width: 419.076px;
}

@media print, screen and (max-width: 768px)
{
    .be-sec .be-content .be-courseSec .be-courseContent .be-courseContent_ttl.ttl05 > img
    {
        width: 87.40692%;
    }
}

.be-sec .be-content .be-courseSec .be-courseContent > p
{
    font-size: 20px;
    font-weight: 600;
    line-height: 1.43;

    width: 630px;
    margin: 0 auto 30px;
}

@media print, screen and (max-width: 768px)
{
    .be-sec .be-content .be-courseSec .be-courseContent > p
    {
        font-size: 4.375vw;

        width: 82.8125%;
        margin: 0 auto 4.6875%;
    }
}

.be-sec .be-content .be-courseSec .be-courseContent > p.contain2
{
    position: relative;

    text-indent: 1em;
}

.be-sec .be-content .be-courseSec .be-courseContent > p.contain2:before
{
    position: absolute;
    top: 0;
    left: 0;

    width: 17.849px;
    height: 25.6px;

    content: '';

    background-image: url(/elekiban/beginner/img/icon_course_num2.svg);
    background-repeat: no-repeat;
    background-size: contain;
}

@media print, screen and (max-width: 768px)
{
    .be-sec .be-content .be-courseSec .be-courseContent > p.contain2:before
    {
        top: 1.5625%;
        left: .46875%;

        width: 3.48625vw;
        height: 5vw;
    }
}

.be-sec .be-content .be-courseSec .be-courseContent > p > .pink
{
    color: #ea6d99;
}

.be-sec .be-content .be-courseSec .be-courseContent > p > .orange
{
    color: #ff6a54;
}

.be-sec .be-content .be-courseSec .be-courseContent .be-courseImgBox
{
    width: 100%;
}

.be-sec .be-content .be-courseSec .be-courseContent .be-courseImgBox > .img01
{
    display: block;

    width: 258px;
    margin: 0 auto;
}

@media print, screen and (max-width: 768px)
{
    .be-sec .be-content .be-courseSec .be-courseContent .be-courseImgBox > .img01
    {
        width: 52.54016%;
    }
}

.be-sec .be-content .be-courseSec .be-courseContent .be-courseImgBox > .img02
{
    display: block;

    width: 268px;
    margin: 0 auto;
}

@media print, screen and (max-width: 768px)
{
    .be-sec .be-content .be-courseSec .be-courseContent .be-courseImgBox > .img02
    {
        width: 54.6875%;
    }
}

.be-sec .be-content .be-courseSec .be-courseContent .be-courseImgBox > .img03
{
    display: block;

    width: 321.1404px;
    margin: 0 auto;
}

@media print, screen and (max-width: 768px)
{
    .be-sec .be-content .be-courseSec .be-courseContent .be-courseImgBox > .img03
    {
        width: 72.59578%;
    }
}

.be-sec .be-content .be-frendSec
{
    position: relative;

    width: 850px;
    margin: 0 auto;
    padding-top: 60px;
}

@media print, screen and (max-width: 768px)
{
    .be-sec .be-content .be-frendSec
    {
        width: 100%;
        padding-top: 7.8125%;
    }
}

.be-sec .be-content .be-frendSec:before
{
    position: absolute;
    top: 0;
    right: 0;
    left: 0;

    width: 100%;
    height: 11px;
    margin: 0 auto;

    content: '';

    background-image: url(/elekiban/beginner/img/border_frend.png);
    background-repeat: repeat-x;
    background-size: contain;
}

@media print, screen and (max-width: 768px)
{
    .be-sec .be-content .be-frendSec:before
    {
        height: 1.71875vw;

        background-image: url(/elekiban/beginner/img/border_frend_sp.png);
    }
}

.be-sec .be-content .be-frendSec:after
{
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;

    width: 100%;
    height: 11px;
    margin: 0 auto;

    content: '';

    background-image: url(/elekiban/beginner/img/border_frend.png);
    background-repeat: repeat-x;
    background-size: contain;
}

@media print, screen and (max-width: 768px)
{
    .be-sec .be-content .be-frendSec:after
    {
        bottom: -.2%;

        height: 1.71875vw;

        background-image: url(/elekiban/beginner/img/border_frend_sp.png);
    }
}

.be-sec .be-content .be-frendSec > h3
{
    width: 379.963px;
    margin: 0 auto 40px;
}

@media print, screen and (max-width: 768px)
{
    .be-sec .be-content .be-frendSec > h3
    {
        width: 67.33078%;
        margin: 0 auto 6.25%;
    }
}

.be-sec .be-content .be-frendSec > h3 > img
{
    width: 100%;
}

.be-sec .be-content .be-frendSec .be-frendContentWrp
{
    width: 100%;
    padding-bottom: 40px;

    background-color: #fffce0;
}

@media print, screen and (max-width: 768px)
{
    .be-sec .be-content .be-frendSec .be-frendContentWrp
    {
        padding-bottom: 2.34375%;
    }
}

.be-sec .be-content .be-frendSec .be-frendContent
{
    width: 535px;
    margin: 0 auto 40px;
}

@media print, screen and (max-width: 768px)
{
    .be-sec .be-content .be-frendSec .be-frendContent
    {
        width: 82.34375%;
        margin: 0 auto 6.25%;
    }
}

.be-sec .be-content .be-frendSec .be-frendContent > img
{
    width: 100%;
}

.be-sec .be-content .be-frendSec .be-frendContent.be-frendContent-balloon01
{
    position: relative;

    padding-top: 143px;
}

@media print, screen and (max-width: 768px)
{
    .be-sec .be-content .be-frendSec .be-frendContent.be-frendContent-balloon01
    {
        padding-top: 22.34375%;
    }
}

.be-sec .be-content .be-frendSec .be-frendContent.be-frendContent-balloon01:before
{
    position: absolute;
    top: 50px;
    right: 0;
    left: 0;

    width: 343.732px;
    height: 108.513px;
    margin: 0 auto;

    content: '';

    background-image: url(/elekiban/beginner/img/img_frend_balloon01.png);
    background-repeat: no-repeat;
    background-size: contain;
}

@media print, screen and (max-width: 768px)
{
    .be-sec .be-content .be-frendSec .be-frendContent.be-frendContent-balloon01:before
    {
        top: 20.71006%;

        width: 52.91938vw;
        height: 16.70625vw;
    }
}

.be-sec .be-content .be-frendSec .be-frendContent.be-frendContent-balloon02
{
    position: relative;

    padding-top: 95px;
}

@media print, screen and (max-width: 768px)
{
    .be-sec .be-content .be-frendSec .be-frendContent.be-frendContent-balloon02
    {
        padding-top: 17.96875%;
    }
}

.be-sec .be-content .be-frendSec .be-frendContent.be-frendContent-balloon02:before
{
    position: absolute;
    top: 0;
    right: 0;
    left: 0;

    width: 396.503px;
    height: 108.513px;
    margin: 0 auto;

    content: '';

    background-image: url(/elekiban/beginner/img/img_frend_balloon02.png);
    background-repeat: no-repeat;
    background-size: contain;
}

@media print, screen and (max-width: 768px)
{
    .be-sec .be-content .be-frendSec .be-frendContent.be-frendContent-balloon02:before
    {
        top: 5%;

        width: 69.76609vw;
        height: 22.32484vw;
    }
}

.be-sec .be-content .be-frendSec .be-frendContent.be-frendContent-balloon03
{
    position: relative;

    padding-top: 95px;
}

@media print, screen and (max-width: 768px)
{
    .be-sec .be-content .be-frendSec .be-frendContent.be-frendContent-balloon03
    {
        padding-top: 16.40625%;
    }
}

.be-sec .be-content .be-frendSec .be-frendContent.be-frendContent-balloon03:before
{
    position: absolute;
    top: 0;
    right: 0;
    left: 0;

    width: 332.908px;
    height: 101.858px;
    margin: 0 auto;

    content: '';

    background-image: url(/elekiban/beginner/img/img_frend_balloon03.png);
    background-repeat: no-repeat;
    background-size: contain;
}

@media print, screen and (max-width: 768px)
{
    .be-sec .be-content .be-frendSec .be-frendContent.be-frendContent-balloon03:before
    {
        top: -2%;

        width: 63.51609vw;
        height: 19.66859vw;
    }
}

.be-sec .be-content .be-frendSec .be-frendContent.be-frendContent-note
{
    margin-bottom: 30px;
}

.be-sec .be-content .be-frendSec .be-frendContent.be-frendContent-note > img
{
    margin-bottom: 12px;
}

@media print, screen and (max-width: 768px)
{
    .be-sec .be-content .be-frendSec .be-frendContent.be-frendContent-note > img
    {
        margin-bottom: 2.27704%;
    }
}

.be-sec .be-content .be-frendSec .be-frendContent.be-frendContent-note > p
{
    font-size: 16.04px;
    line-height: 1.75;

    padding-left: 45px;
}

@media print, screen and (max-width: 768px)
{
    .be-sec .be-content .be-frendSec .be-frendContent.be-frendContent-note > p
    {
        font-size: 3.125vw;

        padding-left: 8.5389%;
    }
}

.secTopPip
{
    width: 100%;
    margin: 80px auto 50px;
}

@media print, screen and (max-width: 768px)
{
    .secTopPip
    {
        width: 100%;
        margin: 7.8125% auto 12.5%;
    }
}

.secTopPip > a
{
    font-family: '丸フォーク M', serif;
    font-size: 20px;
    font-weight: 600;

    display: block;

    width: 250px;
    margin: 0 auto;
    padding: 10px 0;

    text-align: center;
    text-decoration: none;

    border: 1px solid #000;
    border-radius: 5.7px;
}

@media screen and (max-width: 768px)
{
    .secTopPip > a
    {
        font-size: 5.46vw;

        position: relative;

        width: 80.07%;
        padding: 5% 0 5% 13.3%;

        text-align: left;

        border-radius: 10.1px;
    }
}

@media screen and (max-width: 768px)
{
    .secTopPip > a:after
    {
        position: absolute;
        top: 0;
        right: 3.5%;
        bottom: 0;

        width: 2.76vw;
        height: 5.32vw;
        margin: auto 0;

        content: '';

        background-image: url(/elekiban/img/common/icon_arrow_right.svg);
        background-repeat: no-repeat;
        background-size: contain;
    }
}

.secTopPip > a:hover
{
    opacity: .7;
    color: #000;
}

#wrap .beginner article p,
#wrap .beginner article ul li
{
    font-size: 20.5px;
    font-weight: bold;
    line-height: 1.65;

    letter-spacing: -.3px;

    color: #000;
}

article .pink
{
    color: #ea6d99;
}

article .orange
{
    color: #fb810b;
}

article .blue
{
    color: #1b9898;
}

.sec01 .w690
{
    width: 690px;
    margin: 0 auto;
}

.mac.safari .sec01 .w690
{
    /*Mac OSのみ*/
    width: 700px;
    margin: 0 auto;
}

.sec01 .textbox
{
    float: left;
}

.sec01 .step1 img,
.sec01 .step2 img
{
    float: right;

    margin: 25px 30px 25px 0;
}

.sec01 .step3 img
{
    float: right;

    margin: 25px 0 25px 0;
}

.mac.safari .sec01 .step3 img
{
    /*Safari, NetNewsWire, OmniWeb, Shiira, Google Chromeのみ*/
    margin: 25px 0 25px 0;
}

.sec01 .step1 .textbox
{
    margin: 107px 0 0 0;
}

.sec01 .step2 .textbox
{
    margin: 100px 0 0 0;
}

.sec01 .step3 .textbox
{
    margin: 85px 0 0 0;
}

.sec01 .step3 img.icon
{
    float: none;

    margin: 0;

    vertical-align: top;
}

.mac .sec01 .step3 img.icon
{
    /*Safari, NetNewsWire, OmniWeb, Shiira, Google Chromeのみ*/
    margin: 0;
}

.sec01 .step3 img.sec01_10
{
    float: left;

    margin: 35px 0 0 150px !important;
}

article ul.point
{
    width: 550px;
    margin: 38px auto;
}

.sec02 .bg
{
    height: 970px;

    background: url(../img/sec02_02.png) no-repeat;
}

#wrap .beginner article .sec02 .bg p
{
    font-size: 16.25px;
    font-weight: normal;
    line-height: 1.3;

    width: 35%;
    margin: 0 auto;
    padding-top: 785px;
    padding-left: 1.25em;

    text-indent: -1.25em;

    color: gray;
}

article ul.point li
{
    margin-left: 2em;

    text-indent: -3em;
}

.safari article ul.point li
{
    /*Safari, NetNewsWire, OmniWeb, Shiira, Google Chromeのみ*/
    margin-left: 3em;

    text-indent: -3em;
}

.mac.safari article ul.point li
{
    /*Safari, NetNewsWire, OmniWeb, Shiira, Google Chromeのみ*/
    margin-left: 3em;

    text-indent: -3em;
}

@media screen and (-webkit-min-device-pixel-ratio: 0)
{
    ::i-block-chrome,
    article ul.point
    {
        width: 595px;
        margin: 38px auto;
    }
}

@media screen and (-webkit-min-device-pixel-ratio: 0)
{
    article ul.point li
    {
        margin-left: 2em;

        text-indent: -2em;
    }
}

article ul.point li:first-child
{
    margin-bottom: 10px;
}

.sec04
{
    height: 200px;

    background: url(../img/btn_bg.png) no-repeat;
}

.sec04 ul li
{
    float: left;
}

.sec04 ul li:first-child
{
    margin-right: 44px;
}

.sec04 ul
{
    width: 814px;
    margin: 0 auto;
    padding-top: 67px;
}

/*pagetop*/
p.pagetop
{
    position: absolute;
    z-index: 999;
    top: 665px;
    right: 13px;

    width: 78px;
    margin-bottom: 0;
    padding-left: 16px;

    background: transparent url('../img/bg_pagetop.gif') no-repeat scroll left 2px;
}

p.pagetop span
{
    display: block;

    padding-right: 5px;

    background: url(../img/bg_pagetop.gif) no-repeat right 2px;
}

p.pagetop span a
{
    font-size: 84%;

    color: #333;
}

p.pagetop a:hover
{
    text-decoration: underline;
}