body
{
    font-family: kozuka-gothic-pr6n, sans-serif;
    font-weight: 400;
    font-style: normal;
}

.banner
{
    float: left;
    width: 100%;
    height: 955px;
    background: url('../images/hero_image.jpg') no-repeat center center;
}

.banner .logo img
{
    margin-top: 50px;
    margin-bottom: 50px;
}

.banner .logo h1
{
    color: #7bc089;
    font-weight: 700;
}

.sectionbox
{
    float: left;
    width: 392px;
    margin-right: 72px;
    margin-bottom: 80px;
}

.sectionbox:nth-child(3) 
{
    margin-right: 0
}

.sectionbox:nth-child(4) 
{
    margin-left: 230px;
}

.sectionbox .comment
{
    background: #bc8580;
    color: #f9f7f8;
    border-top: 1px solid #fff;
    font-size: 16px;
    height: 165px;
    padding-top: 15px;
}

.sectionbox .comment p
{
    line-height: 25px;
}

.sectionbox .title
{
    font-weight: 700;
    font-size: 18px;
    line-height: 42px;
    color: #fff;
}

.sectionrow 
{
    float: left;
    width: 100%;
    background: #f6f8f5;
}
.sectionrow h3
{
    color: #7cc17e;
    font-weight: 700;
    margin-top: 105px;
    margin-bottom: 50px;
    font-size: 25px;
}
.sectionrow p
{
    font-size: 18px;
}

.green-box
{
    border: 1px solid #83bd82;
    border-radius: 25px;
    margin-top: 100px;
    color: #83bd82;
}

.green-box .section
{
    float: left;
    width: 245px;
    height: 330px;
    background: #83bd82;
    color: #fff;
    margin: 30px 61px;
    border-radius: 25px;
    padding: 20px 0;
}

.green-box .section .title
{
    font-size: 18px;
    font-weight: 700;
    margin-top: 20px;
}

.green-box .footer
{
    color: #000;
    font-size: 18px;
}

.sectionbox.style2
{
    position: relative;
    height: 503px;
    margin-top: 100px;
    margin-bottom: 40px;
    background: #f6f8f5;
}
.sectionbox.style2 .head
{
    position: absolute;
    top: -62px;
    left: 144px;
    z-index: 1;
    float: left;
    width: 110px;
    height: 124px;
    font-size: 20px;
    line-height: 22px;
}
.sectionbox.style2 .comment
{
    background: #f6f8f5;
    color: #000;
    margin-top: 10px;
    border: 0;
}
.sectionbox.style2 .comment span
{
    font-weight: 700;
}
.sectionbox.style2 .comment p
{
    font-size: 18px;
    line-height: 30px;
    font-weight: bold;
}
.sectionbox.style2 .comment p span
{
    float: left;
    width: 100%;
    margin-bottom: 10px;
}

.sectionbox.style2 .head h3
{
    color: #fff;
    font-size: 18px;
    text-align: center;
    margin-top: 50px;
}
.sectionbox.style2:nth-child(4) .head h3
{
    font-size: 14px;
    margin-top: 53px;
}
.sectionbox.style2:nth-child(5) .head h3
{
    font-size: 17px;
}

.sectionbox.style2.s1 .head
{
    background: url('../images/shape1.png') no-repeat center center;
}
.sectionbox.style2.s2 .head
{
    background: url('../images/shape2.png') no-repeat center center;
}
.sectionbox.style2.s3 .head
{
    background: url('../images/shape3.png') no-repeat center center;
}
.sectionbox.style2.s4 .head
{
    background: url('../images/shape4.png') no-repeat center center;
}
.sectionbox.style2.s5 .head
{
    background: url('../images/shape5.png') no-repeat center center;
}
.sectionbox.style2.s6 .head
{
    background: url('../images/shape6.png') no-repeat center center;
}
.sectionbox.style2.s1 .comment span
{
    color: #7cc59c;
}
.sectionbox.style2.s2 .comment span
{
    color: #ae8fd9;
}
.sectionbox.style2.s3 .comment span
{
    color: #bda480;
}
.sectionbox.style2.s4 .comment span
{
    color: #7aa6e7;
}
.sectionbox.style2.s5 .comment span
{
    color: #80bda3;
}
.sectionbox.style2.s6 .comment span
{
    color: #ffc000;
}

.title-box1
{
    width: 880px;
    height: 98px;
    margin: 0 auto;
    background: url('../images/title_bg1.jpg') no-repeat center center;
}

.title-box3 p,
.title-box2 p,
.title-box1 p
{
    color: #fff;
    font-size: 25px;
    font-weight: 700;
}

.title-box3,
.title-box2
{
    width: 557px;
    height: 88px;
    margin: 0 auto;
}

.title-box2
{
    background: url('../images/title_bg2.jpg') no-repeat center center;
}
.title-box3
{
    background: url('../images/title_bg3.jpg') no-repeat center center;
}

.title-box2 p
{
    padding: 10px 0;
    font-size: 21px;
}
.title-box3 p 
{
    padding: 28px 0;
    font-size: 21px;
}

.register2,
.register1
{
    width: 392px;
    height: 52px;
    margin-top: 30px;
    background: url('../images/button1.png') no-repeat center center;
}
.register2 a,
.register1 a
{
    float: left;
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    text-decoration: none;
    padding: 10px 155px 10px 55px
}

.register2
{
    margin-top: 85px;
    background: url('../images/button2.png') no-repeat center center;
}
.register2.page2
{
    margin: 30px auto;
}

.section-2
{
    float: left;
    width: 390px;
    height: 698px;
    border: 1px solid #80bd84;
    border-radius: 25px;
    padding: 0;
    overflow: hidden;
    background: #f4fef5 url('../images/section2_bottom_strp.jpg') bottom repeat-x;
    margin-top: 10px;
    margin-bottom: 70px;
}
.section-2:nth-child(2),
.section-2:nth-child(5)
{
    margin: 10px 63px 70px;
}
.section-2 .title
{
    float: left;
    width: 100%;
    height: 52px;
    background: url('../images/corner_left_a.png') left top no-repeat, 
                url('../images/corner_right_b.png')  right top no-repeat;
    background-color: #80bd84;
    color: #fff;
}
.section-2 .title span
{
    font-size: 20px;
    font-weight: 700;
    vertical-align:middle;
}
.section-2 .title span:nth-child(2)
{
    font-size: 2em;
}
.section-2 .content
{
    float: left;
    width: 100%;
}
.section-2 .content img
{
    margin-bottom: 1em;
}
.section-2 .content img.w-border
{
    border: 1px solid #7ec8a3;
}

.row100
{
    float: left;
    width: 100%;
}

.xs-display,
.mobile-version
{
    display: none;
}

.button-icon
{
    border-radius: 13px;
    font-weight: bold;
    font-size: 15px;
    line-height: 15px;
    padding: 0.5rem 0.5rem;
}
.button-icon.green 
{
    background: #00b95e;
    border: 1px solid #00b95e;
}
.button-icon.yellow 
{
    background: #ffc000;
    border: 1px solid #ffc000;
}
.button-icon.blue 
{
    background: #00b0f0;
    border: 1px solid #00b0f0;
}
.button-img
{
    width: 28px;
}
.button-icon.yellow .button-img
{
    width: 28px;
}
.mob-title
{
    font-family: 'Kaushan Script', cursive;
    text-align: center;
}
.mob-title .green
{
    color: #00b95e;
}
.mob-title .yellow
{
    color: #ffc000;
    font-size: 50px;
}
.mob-list
{
    float: left;
    width: 100%;
    padding: 0;
}
.mob-list li
{
    float: left;
    width: 100%;
    display: block;
    font-size: 17px;
    font-weight: bold;
}
.mob-list li strong
{
    font-family: 'Kaushan Script', cursive;
    font-size: 30px;
    color: #98c9ff;
    float: left;
}
.mob-list li span
{
    float: left;
    padding: 10px 0 10px 10px;
}

.mob-section
{
    float: left;
    width: 100%;
    margin-top: 15px;
    margin-bottom: 25px;
    background-size: 180px;
}
.mob-section.a1
{
    background: url('../images/ASSETS/smartphoneIMGL4229_TP_V.jpg')  no-repeat left top;
    background-size: 150px;
}
.mob-section.a2
{
    background: url('../images/ASSETS/5096330_m.jpg')  no-repeat left top;
    background-size: 150px;
}
.mob-section.a3
{
    background: url('../images/ASSETS/22679256_m.jpg')  no-repeat left top;
    background-size: 150px;
}

.mob-section .detail
{
    float: left;
    width: 90%;
    margin: 40px 0 0 10%;
    padding: 10px;
    border-top-right-radius: 30px;
}
.mob-section .detail h1
{
    float: left;
    width: auto;
    font-family: 'Kaushan Script', cursive;
    font-size: 30px;
}
.mob-section .detail small
{
    float: left;
    width: auto;
    font-size: 18px;
    padding: 10px 0;
    font-weight: bold;
}
.mob-section .detail.yellow small
{
    font-size: 18px;
}
.mob-section .detail p
{
    padding: 0 0 0 40px;
    letter-spacing: 1px;
    line-height: 25px;
    font-size: 13px;
    font-weight: bold;
    margin-bottom: 2px;
}
.mob-section .detail.green
{
    background: #c4e1b2a8;
}
.mob-section .detail.yellow
{
    background: #fff0c4a8;
}
.mob-section .detail.blue
{
    background: #bcd6edab;
}
.blue-bg-mid
{
    background: #deebf7 url('../images/ASSETS/background.png') no-repeat top right;
}
.blue-bg-mid .sections
{
    background: #fff;
    position: relative;
    margin: 40px 0;
    -webkit-clip-path: polygon(0% 0%, 85% 0%, 100% 20%, 100% 100%, 100% 100%, 0% 100%, 0% 100%, 0% 20%);
    clip-path: polygon(0% 0%, 85% 0%, 100% 20%, 100% 100%, 100% 100%, 0% 100%, 0% 100%, 0% 20%);
}
.blue-bg-mid .sections.b1
{
    min-height: 170px;
}
.blue-bg-mid .sections.b2
{
    min-height: 240px;
}
.blue-bg-mid .sections.b3
{
    min-height: 175px;
}
.blue-bg-mid .sections.b4
{
    min-height: 290px;
}
.blue-bg-mid .sections h1
{
    position: absolute;
    top: -32px;
    left: -16px;
    z-index: 1px;
    padding: 0;
    margin: 0;
    color: #deebf7;
    font-family: 'Kaushan Script', cursive;
    font-size: 110px;
}
.head-mob-1
{
    font-weight: bold;
    font-size: 23px;
    font-family: 'Kaushan Script', cursive;
}
.blue-bg-mid .sections ul
{
    position: absolute;
    z-index: 2px;
    padding: 0;
    margin: 30px 0 0;
    font-weight: bold;
}
.blue-bg-mid .sections ul li
{
    display: block;
    padding: 10px 0;
}
.blue-bg-mid .sections ul li.head
{
    font-size: 17px;
    background: url('../images/ASSETS/check.png') no-repeat;
    background-size: 50px;
    padding-left: 50px;
}
.blue-bg-mid .sections ul li.det
{
    font-size: 14px;
    padding: 0 20px;
    margin: 15px 0 0;
}

.foot-mobile
{
    background: #deebf7;
}

.foot-mobile h2
{
    text-align: center;
    color: #fff;
    font-weight: bold;
    position: relative;
    font-size: 30px;
}
.foot-mobile h2::after,
.foot-mobile h2::before
{
    position: absolute;
    float: left;
    width: 45%;
    height: 2px;
    background: #fff;
    content: "";
}
.foot-mobile h2::after
{
    top: -2px;
    left: 0%;
}
.foot-mobile h2::before
{
    bottom: -2px;
    right: 0%;
}
.foot-img
{
    width: 100%;
}
.foot-mobile h3
{
    text-align: center;
    font-weight: bold;
    font-size: 28px;
}

.foot-mobile .btn-foot
{
    display: block;
    text-align: center;
    text-decoration: none;
    color: #fff;
    font-size: 20px;
    font-weight: bold;
    vertical-align: middle;
    max-height: 63px;
    border-radius: 25px;
    margin: 0 0 15px;
}
.foot-mobile p
{
    font-size: 16px;
    line-height: 30px;
}
.foot-mobile .btn-foot.green
{
    background: #00b95e;
}
.foot-mobile .btn-foot.yellow
{
    background: #ffc000;
    padding: 10px 0;
}
.foot-mobile .btn-foot.yellow img,
.foot-mobile .btn-foot.blue img
{
    width: 30px;
}
.foot-mobile .btn-foot.yellow strong
{
    display: block;
    font-size: 30px;
    line-height: 27px;
}
.foot-mobile .btn-foot.yellow small
{
    display: block;
    font-size: 14px;
}
.foot-mobile .btn-foot.blue
{
    padding: 16px;
    background: #00b0f0;
}
.foot-mobile .btn-foot.blue.fam
{
    background-color: #00b0f0;
    background-image: url(../images/ASSETS/family.png), url(../images/ASSETS/arrow.png);
    background-repeat: no-repeat;
    background-size: 15%;
    background-position-y: 15px;
    background-position-x: 1px , 90%;
}
.foot-mobile .btn-foot.green.for
{
    background-color: #00b95e;
    background-image: url(../images/ASSETS/walk.png), url(../images/ASSETS/arrow.png);
    background-repeat: no-repeat;
    background-size: 15%;
    background-position-y: 15px;
    background-position-x: 1px , 90%;
}

@media (max-width: 1400px) {
    .sectionbox
    {
        width: 370px;
        margin-right: 15px;
    }
    
    .green-box .section
    {
        margin: 30px 31px;
    }
    
    .section-2 
    {
        width: 355px;
    }
    
    .section-2:nth-child(2),
    .section-2:nth-child(5)
    {
        margin: 10px 25px 70px;
    }
    
    .sectionrow h3
    {
        margin-top: 55px;
    }
    
    .sectionrow p
    {
        font-size: 18px;
    }
    
    .register2
    {
        margin-top: 65px;
    }
    
    .sectionbox.style2 .comment p
    {
        font-size: 17px;
    }
    
    .sectionbox.style2 .head
    {
        left: 129px;
    }
}


@media (max-width: 1200px) {
    .sectionbox
    {    
        width: 450px;
        margin-right: 30px;
        margin-bottom: 60px
    }
    
    .sectionbox img
    {
        width: 100%;
    }

    .sectionbox:nth-child(3) 
    {
        margin-right: 30px;
    }

    .sectionbox:nth-child(4) 
    {
        margin-left: 0;
    }

    .sectionbox:nth-child(5) 
    {
        margin-left: 234px;
    }
    
    .sectionbox.style2
    {
        margin-bottom: 0;
    }
    
    .sectionbox.style2 .head
    {
        left: 173px;
    }

    .sectionbox.style2:nth-child(5) 
    {
        margin-left: 241px;
    }
    
    
    .green-box .section
    {
        margin: 30px 31px;
    }
    
    .section-2 
    {
        width: 450px;
        margin-bottom: 30px;
    }
    
    .section-2:nth-child(2),
    .section-2:nth-child(4),
    .section-2:nth-child(6)
    {
        margin: 10px 0 50px 36px;
    }
    .section-2:nth-child(5)
    {
        margin: 10px 0 50px 0;
    }
    
    .sectionrow p
    {
        font-size: 16px;
    }
    
    .register2
    {
        margin-top: 45px;
    }
    
    .no-padding
    {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    .green-box .section {
        margin: 17px;
    }
}


@media (max-width: 1150px) {
    .register2.middle
    {
        background-size: 100%;
        width: 100%;
    }
    
    .sectionrow p
    {
        font-size: 15px;
    }
    
    .register2.middle a
    {
        font-size: 18px;
        padding: 14px 111px 5px 23px;
    }
}

@media (max-width: 1000px) {
    .title-box1
    {
        width: 100%;
        background-size: 100%;
    }
    
    .title-box1 p
    {
        font-size: 21px;
        margin-top: 11px;
    }
    
    .register1
    {
        width: 300px;
        background-size: 100%;
    }
    
    .register1 a
    {
        font-size: 18px;
        padding: 13px 113px 10px 25px;
    }
    
    .sectionbox {
        width: 360px;
        margin-right: 0;
        margin-bottom: 30px;
    }
    
    .sectionbox:nth-child(3) 
    {
        margin-right: 0;
    }
    
    .sectionbox:nth-child(5) {
        margin-left: 182px;
    }
    
    .sectionbox .comment p
    {
        font-size: 14px;
    }
    
    .sectionbox.style2
    {
        width: 350px;
        height: 450px;
        margin-right: 10px;
        margin-top: 75px;
    }
    
    .sectionbox.style2 .head {
        left: 122px;
    }
    
    .sectionbox.style2:nth-child(5) {
        margin-left: 181px;
    }
    
    .section-2 {
        width: 335px;
        margin-bottom: 30px;
    }
    
    .section-2:nth-child(2), 
    .section-2:nth-child(4), 
    .section-2:nth-child(6) {
        margin: 10px 0 30px 26px;
    }
    
    .pc-version
    {
        display: none;
    }
    
    .mobile-version
    {
        display: block;
    }
    
    .sectionrow h3
    {
        margin-top: 25px;
        margin-bottom: 25px;
    }
    
    .register2.middle {
        background-size: initial;
        width: 392px;
        margin: 0 auto;
    }
    
    .register2.middle a {
        padding: 13px 186px 12px 44px;
    }
}


@media (max-width: 767px) {
    .sectionbox {
        width: 100%;
        margin-right: 0;
        margin-bottom: 30px;
    }
    
    .sectionbox:nth-child(5)
    {
        margin-left: 0;
    }
    
    .sectionbox.style2
    {
        width: 100%;
        height: auto;
    }
    
    .sectionbox.style2:nth-child(5)
    {
        margin-left: 0;
    }
    
    .sectionbox.style2 .head
    {
        left: 40%;
    }
    .sectionbox .comment
    {
        height: auto;
        padding-bottom: 10px;
    }
    
    .sectionbox.style2 .comment p
    {
        font-size: 14px;
        line-height: 20px;
    }
    
    .green-box
    {
        background: #83bd82;
        color: #fff;
        border-radius: 0;
    }
    
    .green-box .section
    {
        width: 50%;
        margin: 0;
        padding: 0;
        height: auto;
    }
    
    .green-box .footer
    {
        color: #fff;
    }
    
    .section-2
    {
        width: 100%;
        margin: 10px 0;
        height: auto;
        padding-bottom: 20px;
    }
    
    .section-2:nth-child(2), .section-2:nth-child(4), .section-2:nth-child(5), .section-2:nth-child(6)
    {
        margin: 10px 0;
    }
    
    .title-box3, .title-box2, title-box1
    {
        width: 100%;
    }
    
    .title-box1
    {
        background: url(../images/title_bg1_mobile.jpg) no-repeat center center;
    }
    .title-box2
    {
        background: url(../images/title_bg2_mobile.jpg) no-repeat center center;
    }
    .title-box3
    {
        background: url(../images/title_bg3_mobile.jpg) no-repeat center center;
    }
    
    .xs-hide
    {
        display: none;
    }
    .xs-display
    {
        display: block;
    }
    
    .register2
    {
        background-size: initial;
        width: 392px;
        margin: 0 auto;
    }
    
    .no-padding
    {
        margin: 0 10% !important;
    }
    
    .title-box2 p
    {
        font-size: 18px;
        padding: 16px 0;
    }
    
    .banner
    {
        height: 650px;
        background-size: 181%;
        background-position: bottom;
    }
    
    .banner .logo
    {
        width: 80%;
    }
    
    .banner .logo img
    {
        width: 80%;
        margin: 30px 0 20px;
    }
    
    .banner .logo h1
    {
        font-size: 30px;
    }
}

@media (max-width: 650px) {
    
    .banner
    {
        height: 550px;
        background-size: 181%;
        background-position: bottom;
    }
}


@media (max-width: 600px) {
    
    .banner
    {
        height: 520px;
        background-size: 181%;
        background-position: bottom;
    }
}

@media (max-width: 575px) {
    
    .bg-cloud
    {
        position: relative;
        background-color: #9dc3e6;
        overflow: hidden;
    }
    .bg-cloud:before,
    .bg-cloud:after
    {
        position: absolute;
        float: left;
        width: 150px;
        height: 100px;
        background: url('../images/ASSETS/cloud.png') no-repeat;
        background-size: contain;
        content: "";
    }
    .bg-cloud:before
    {
        top: -25px;
        left: -47px;
    }
    .bg-cloud:after
    {
        bottom: -57px;
        right: -47px;
    }
    .bg-cloud h4
    {
        position: relative;
        color: #fff;
    }
    .bg-cloud h4::after,
    .bg-cloud h4::before
    {
        position: absolute;
        float: left;
        height: 1px;
        background: #fff;
        content: "";
    }
    .bg-cloud h4::after
    {
        width: 50%;
        top: 21px;
        left: 0;
    }
    .bg-cloud h4::before
    {
        width: 75%;
        bottom: 4px;
        right: 0;
    }
    
    .bg-cloud .section
    {
        background: #deebf7;
        border: 1px dashed #9dc3e6;
        margin-bottom: 20px;
        padding: 10px;
        font-weight: bold;
    }
    .bg-cloud .section span
    {
        padding-left: 25px;
        padding-right: 10px;
        background: url('../images/ASSETS/dot.PNG') no-repeat left;
        background-size: contain;
    }
    .bg-cloud .section p
    {
        margin-top: 6px;
        padding-left: 25px;
        padding-right: 10px;
    }
    .p-title
    {
        font-size: 17px;
    }
    .p-det
    {
        font-size: 15px;
    }
    .bg-cloud .section a
    {
        float: right;
        padding: 5px 25px;
        color: #fff;
        background: #ffc000;
        font-size: 13px;
        text-decoration: none;
        border-radius: 5px;
    }
    
    .green-box
    {
        background: #fff;
        border-radius: 0;
        color: #000;
        border: 0;
        margin-top: 0px;
    }
    
    .sectionbox.style2
    {
        width: 48%;
        height: auto;
        margin-top: 60px; 
    }
    .sectionbox.style2.s1,
    .sectionbox.style2.s4
    {
        margin-right: 1%;
        margin-left: 0;
    }
    .sectionbox.style2.s3,
    .sectionbox.style2.s6
    {
        margin-left: 1%;
        margin-right: 0;
    }
    
    .sectionbox.style2:nth-child(5),
    .sectionbox.style2:nth-child(4)
    {
        margin-bottom: 20px;
    }
    
    .sectionbox.style2 .head
    {
        top: -51px;
        left: 33%;
        width: 90px;
        height: 104px;
        font-size: 20px;
        line-height: 22px;
    }
    .sectionbox.style2.s1 .head,
    .sectionbox.style2.s2 .head,
    .sectionbox.style2.s3 .head,
    .sectionbox.style2.s4 .head,
    .sectionbox.style2.s5 .head,
    .sectionbox.style2.s6 .head
    {
        background-size: contain;
    }
    .sectionbox.style2 .head h3,
    .sectionbox.style2:nth-child(5) .head h3,
    .sectionbox.style2:nth-child(4) .head h3
    {
        font-size: 13px;
        margin-top: 45px;
    }
    .sectionbox .comment
    {
        height: auto;
        padding: 10px;
        text-align: left !important;
    }
    
    .sectionbox.style2 .comment p
    {
        font-size: 15px;
        line-height: 20px;
        letter-spacing: 0px;
        line-height: 25px;
    }
    
    .green-box .section
    {
        width: 23%;
        padding: 10px 0 0;
        height: auto;
        margin: 0  1% 20px 1%;
        border-radius: 5px;
        background: #92d050;
    }
    
    .green-box .section img
    {
        width: 90%;
    }
    .green-box .section .title
    {
        margin-top: 5px;
        font-size: 18px;
    }
    
    .leaflets
    {
        position: relative;
        float: left;
        width: 80%;
        border: 1px solid #92d050;
        border-bottom-right-radius: 25px;
        border-top-left-radius: 25px;
        margin-bottom: 25px;
    }
    
    .leaflets:before
    {
        position: absolute;
        top: -27px;
        left: 25%;
        float: left;
        width: 10px;
        height: 27px;
        background: #92d050;
        content: "";
    }
    .leaflets.l1:before
    {
        top: -50px;
        height: 50px;
    }
    .leaflets.l1:before,
    .leaflets.l3:before
    {
        left: 50%;
    }
    
    .leaflets.l2,
    .leaflets.l4
    {
        margin-left: 20%;
    }
    
    .leaflets .head
    {
        background: #92d050 url('../images/ASSETS/leaf.png') no-repeat;
        background-size: 30px;
        background-position-x: 10px;
        background-position-y: 8px;
        color: #fff;
        float: left;
        padding: 2px 15px 2px 50px;
        font-size: 16px;
        border-bottom-right-radius: 25px;
        border-top-left-radius: 25px;
    }
    .leaflets .det
    {
        float: left;
        width: 100%;
        padding: 5px 10px 5px 20px;
        font-size: 12px;
        letter-spacing: 1px;
        font-weight: bold;
    }
    
    .section-2 .content .img-chat
    {
        float: left;
        width: 40%;
    }
    .section-2 .content .img-chat p
    {
        margin: 0;
        text-align: left;
    }
    .section-2 .content .img-chat.c1,
    .section-2 .content .img-chat.c3
    {
        margin-left: 8%;
    }
    .section-2 .content .img-chat.c2,
    .section-2 .content .img-chat.c4
    {
        margin-left: 5%;
    }
    .section-2 .content .img-chat.c1
    {
        margin-bottom: 30px;
    }
    .section-2 .content .img-chat.c2
    {
        margin-top: 30px;
    }
}

@media (max-width: 525px) {
    .mob-section .detail
    {
        width: 95%;
        margin: 30px 0 0 7%;
    }
    .mob-section .detail p
    {
        padding: 0 0 0 20px;
    }
    .sectionbox.style2 .comment
    {
        padding-left: 0;
        padding-right: 0;
    }
    
    .foot-img
    {
        width: 110%;
        margin-left: -22px;
    }
}

@media (max-width: 500px) {
    
    .banner
    {
        height: 480px;
        background-size: 181%;
        background-position: bottom;
    }
    
    .banner .logo h1
    {
        font-size: 28px;
    }
    
    .green-box h3
    {
        font-size: 20px;
    }
    
    .footnote h4
    {
        font-size: 17px;
    }
}


@media (max-width: 490px) {
    .mob-section .detail p
    {
        font-size: 13px;
    }
}

@media (max-width: 473px) {
    .green-box .section .title
    {
        margin-top: 5px;
        font-size: 16px;
    }
    .bg-cloud h4
    {
        font-size: 18px;
    }
}

@media (max-width: 460px) {
    .mob-list li strong
    {
        font-size: 25px;
    }
    .mob-list li span
    {
        font-size: 17px;
    }
    .mob-section .detail h1
    {
        font-size: 30px;
    }
    .foot-mobile .btn-foot.blue.fam
    {
        background-position-y: 22px ,17px;
        background-position-x: 9px , 90%;
    }
    
    .foot-img
    {
        width: 120%;
        margin-left: -39px;
    }
}
@media (max-width: 450px) {
    
    .button-icon.blue .button-img,
    .button-icon.green .button-img
    {
        float: left;
        width: 33px;
        margin-right: 10px;
        margin-left: 10px;
    }
    .button-icon.blue span
    {
        float: left;
        padding: 10px 0 0 5px;
    }
    .button-icon.blue
    {
        padding: 8px 2px 9px;
    }
    .button-icon.green
    {
        padding: 0.5rem 5px;
    }
    .button-icon.yellow
    {
        padding: 0.5rem 0;
    }
    .button-icon.green span
    {
        float: left;
        width: 90px;
        margin-top: 4px;
    }
}

@media (max-width: 445px) {

    .blue-bg-mid .sections ul li.det
    {
        font-size: 13px;
    }
}

@media (max-width: 435px) {
    .mob-section .detail
    {
        width: 95%;
        margin: 15px 0 0 5%;
    }
    .mob-section .detail p
    {
        padding: 0 0 0 10px;
        letter-spacing: 0px;
    }
    .sectionbox.style2 .comment p span
    {
        margin-bottom: 5px;
    }
}

@media (max-width: 424px) {
    .bg-cloud:before
    {
        width: 130px;
        top: -25px;
        left: -47px;
    }
}
@media (max-width: 420px) {
    
    .blue-bg-mid .sections.b2
    {
        min-height: 230px;
    }
    .blue-bg-mid .sections.b4
    {
        min-height: 275px;
    }
    .mob-section .detail small
    {
        font-size: 17px;
    }
    .mob-section .detail.yellow small
    {
        font-size: 15px;
    }
    .banner .logo h1
    {   
        font-size: 25px;
    }
    
    .sectionbox.style2 .head
    {
        left: 35%;
    }
    
    .footer p
    {
        font-size: 16px;
    }
    
    .title-coment-3 h4
    {
        font-size: 17px;
    }
    .mob-title
    {
        font-size: 20px;
    }
    .mob-title .yellow
    {
        font-size: 30px;
    }
    .mob-list li strong
    {
        font-size: 28px;
    }
    .mob-list li span
    {
        font-size: 17px;
    }
    .mob-section
    {
        background-size: 120px;
    }
    .blue-bg-mid .sections ul li.head
    {
        font-size: 17px;
    }
    .blue-bg-mid .sections.b2 ul li.head
    {
        font-size: 17px;
        line-height: 20px;
    }
    .blue-bg-mid .sections ul li.det
    {
        font-size: 13px;
    }
    .sectionbox.style2 .head
    {
        width: 50px;
        width: 64px;
    }
    .sectionbox .comment
    {
        padding: 10px 0;
    }
    .green-box h1
    {
        font-size: 23px;
    }
    .green-box .section .title
    {
        margin-top: 5px;
        font-size: 14px;
    }
    .no-padding
    {
        margin: 0 0 !important;
    }
    .foot-mobile h2
    {
        font-size: 20px;
    }
    .foot-mobile h3
    {
        font-size: 18px;
    }
    .foot-mobile .btn-foot
    {
        font-size: 14px;
        max-height: 55px;
    }
    .foot-mobile .btn-foot.yellow strong
    {
        font-size: 18px;
        line-height: 0;
    }
    .foot-mobile .btn-foot.yellow img, .foot-mobile .btn-foot.blue img
    {
        width: 22px;
    }
    .foot-mobile .btn-foot.yellow small
    {
        font-size: 11px;
    }
    .foot-mobile .btn-foot.blue.fam
    {
        background-position-y: 15px ,17px;
        background-position-x: 4px  , 90%;
    }
    .foot-mobile .btn-foot.green.for
    {
        background-position-x: 9px , 90%;
    }
    .foot-mobile p
    {
        font-size: 15px;
    }
    .section-2 .content p
    {
        font-size: 14px;
    }
}
@media (max-width: 405px) {

    .blue-bg-mid .sections ul li.det
    {
        font-size: 13px;
    }
    .blue-bg-mid .sections
    {
        min-height: 280px;
    }
    .sectionbox.style2 .comment p span
    {
        margin-bottom: 4px;
    }
}

@media (max-width: 400px) {
    
    .blue-bg-mid .sections.b1
    {
        min-height: 185px;
    }
    .blue-bg-mid .sections.b2
    {
        min-height: 250px;
    }
    .blue-bg-mid .sections.b3
    {
        min-height: 175px;
    }
    
    .banner
    {
        height: 394px;
        background-size: 181%;
        background-position: bottom;
    }
    
    .banner .logo h1
    {
        font-size: 23px;
    }
    
    .register2.middle,
    .register2
    {
        background-size: contain;
        width: 100%;
    }
    
    .register2.middle a,
    .register2 a
    {
        padding: 10px 136px 10px 35px;
    }
    
    .title-box3,
    .title-box2,
    .title-box1
    {
        background-size: contain;
    }
    
    .title-box3 p,
    .title-box1 p
    {
        font-size: 17px;
        margin-top: 16px;
    }
    
    .title-box2 p
    {
        font-size: 16px;
        padding: 19px 0;
    }
    
    .aft-banner-text h4
    {
        font-size: 18px;
    }
    
    .green-box .section .title
    {
        margin-top: 5px;
        font-size: 14px;
    }
    
    .green-box h3
    {
        font-size: 20px;
    }
    
    .green-box .section img
    {
        width: 100%;
    }
    
    .footer p
    {
        font-size: 13px;
    }
    
    .footnote h4
    {
        font-size: 15px;
    }
    
    .foot-mobile .btn-foot.blue.fam
    {
        background-position-y: 20px  ,17px;
        background-position-x: 4px  , 90%;
    }
}
@media (max-width: 391px) {
    .button-icon.blue .button-img,
    .button-icon.green .button-img
    {
        float: left;
        width: 33px;
        margin-right: 0;
        margin-left: 0;
    }
}
@media (max-width: 387px) {
    .bg-cloud h4
    {
        font-size: 16px;
    }
    .bg-cloud h4::before {
        width: 75%;
        bottom: 1px;
        right: 0;
    }
    .bg-cloud h4::after {
        width: 50%;
        top: 18px;
        left: 0;
    }
}
@media (max-width: 380px) {
    
    .button-icon.blue .button-img,
    .button-icon.green .button-img
    {
        float: left;
        width: 33px;
    }
    .button-icon.blue span
    {
        float: left;
        padding: 10px 0 0 5px;
    }
    .button-icon.blue
    {
        padding: 8px 2px 9px;
    }
    .button-icon.green
    {
        padding: 0.5rem 5px;
    }
    .button-icon.yellow
    {
        padding: 0.5rem 0;
    }
    .button-icon.green span
    {
        float: left;
        width: 90px;
        margin-top: 4px;
    }
    
    .blue-bg-mid .sections ul li.det
    {
        font-size: 13px;
    }
    
    .banner .logo h1
    {
        font-size: 21px;
    }
    
    .register2.middle,
    .register2
    {
        background-size: contain;
        width: 100%;
    }
    
    .register2.middle a,
    .register2 a
    {
        font-size: 18px;
        padding: 13px 136px 10px 35px;
    }
    
    .title-box2 p
    {
        font-size: 15px;
        padding: 22px  0;
    }
    
    .green-box .section .title
    {
        font-size: 16px;
    }
    
    .footnote h4
    {
        font-size: 14px;
    }
    .green-box .section .title
    {
        margin-top: 5px;
        font-size: 12px;
    }
    .section-2 .content p strong
    {
        font-size: 17px;
    }
    .section-2 .content p
    {
        font-size: 15px;
    }
    
    .foot-img
    {
        width: 125%;
        margin-left: -40px;
    }
}
@media (max-width: 369px) 
{
    .blue-bg-mid .sections.b2 ul li.head
    {
        font-size: 17px;
    }
}
@media (max-width: 360px) 
{
    .bg-cloud h4
    {
        font-size: 16px;
    }
    .bg-cloud h4::before {
        width: 75%;
        bottom: 1px;
        right: 0;
    }
    .bg-cloud h4::after {
        width: 50%;
        top: 18px;
        left: 0;
    }
    .register2.middle a,
    .register2 a
    {
        font-size: 16px;
        padding: 13px 126px 10px 27px;
    }
    
    .green-box h3
    {
        font-size: 18px;
    }
    
    .title-coment-3 h4
    {
        font-size: 16px;
    }
    
    .sectionrow p
    {
        font-size: 14px;
    }
    
    .mob-list li span
    {
        font-size: 17px;
    }
    .foot-mobile .btn-foot.blue.fam
    {
        background-position-y: 24px  ,17px;
        background-position-x: 4px  , 90%;
    }
    .rem-pad
    {
        padding-left: 0;
        padding-right: 0;
    }
    .blue-bg-mid
    {
        padding-right: 18px !important;
        padding-left: 18px !important;
    }
    .mob-section.a1
    {
        background: url('../images/ASSETS/smartphoneIMGL4229_TP_V.jpg')  no-repeat left top;
        background-size: 150px;
    }
    .mob-section.a2
    {
        background: url('../images/ASSETS/5096330_m.jpg')  no-repeat left top;
        background-size: 150px;
    }
    .mob-section.a3
    {
        background: url('../images/ASSETS/22679256_m.jpg')  no-repeat left top;
        background-size: 150px;
    }
}

@media (max-width: 352px) 
{
    .button-icon
    {
        font-size: 14px;
    }
    *.button-icon.green
    {
        padding: 0.5rem 2px;
    }
}
/* add new item カセベビの特徴 */
.fix-position .sections {
    margin-top: 20px !important;
}
.fix-position .title {
    padding: 10px 15px;
    font-weight: bold;
    margin-top: 3%;
}