br.tablet{
    display: none;
}
.d-flex{
    display: flex;
    flex-wrap: wrap;
}
.j-content-center{
    justify-content: center;
}
.j-content-between{
    justify-content: space-between;
}
.a-items-start{
    align-items: flex-start;
}
.f-bold{
    font-weight: bold;
}
a.link{
    text-decoration: underline;
    color: #cc0000;
}

.layoutArea h2{
    text-align: center;
}

/* LP */
.layoutArea.step, .layoutArea.youtube{
    background: #f8f5ec;
}
.mainvisual{
    background: url(../lp_pages/affiliateprogram/mv_background.png) center bottom / cover no-repeat;
}
.mainvisual .wrapper{
    max-width: 1300px;
    margin: 0 auto;
    position: relative;
}
.mainvisual img.background{
    width: 100%;
    vertical-align: bottom;
}
.mainvisual img.background.sp{
    display: none;
}
.mainvisual .mvContents{
    width: 100%;
    text-align: center;
    line-height: 1em;
    position: absolute;
    left: 50%;
    top: 95px;
    transform: translateX(-50%);
}
.mainvisual .mvContents.en, .mainvisual .mvContents.tw{
    top: 110px;
}
.mainvisual .mvContents h1{
    font-size: 26px;
    line-height: 1.2;
}
.mainvisual .mvContents h1 img{
    width: 180px;
    margin: 0 5px 0 0;
    vertical-align: bottom;
}
.mainvisual .mvContents h1 span{
    font-size: 3rem;
    color: #cc0000;
    text-shadow: 0.3px 0.3px 0, 0.3px -0.3px 0px, -0.3px 0.3px 0, -0.3px -0.3px 0px, 0.3px 0px 0px, 0px 0.3px 0px, -0.3px 0px 0px, 0px -0.3px 0px;
}
.mainvisual .mvContents img.border{
    margin: 15px 0;
    width: 120px;
}
.mainvisual .mvContents p{
    font-size: 18px;
    font-weight: bold;
}
.btn_order_yellow{
    display: inline-block;
    padding: 15px 0;
    font-weight: bold;
    background: #ffee00;
    font-size: 1.8rem;
    width: 350px;
    line-height: 1em;
    border-radius: 10px;
    border-bottom: 2px solid #cbbe02;
    transition: .3s;
    position: absolute;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
}
.btn_order_yellow::after{
    content: "";
    width: 0;
    height: 0;
    border-left: 10px solid #000;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
}
.btn_order_yellow:hover{
    background: #e6d700;
}

p.serviceText,.serviceContents .serviceBox p.serviceName{
    text-align: center;
}
.serviceContents{
    margin: 30px 0;
}
.serviceContents h3{
    background: #cc0000;
    text-align: center;
    padding: 10px 0;
    border-radius: 30px;
    color: #fff;
    font-size: 1.5rem;
    margin-bottom: 20px;
}
.serviceContents .serviceBox{
    width: 32%;
    border: 2px solid #cc0000;
    border-radius: 10px;
    padding: 30px;
    text-align: center;
    position: relative;
    background: #fff;
}
.serviceContents .serviceBox::before{
    content: " ";
    position: absolute;
    right: -5px;
    bottom: -5px;
    width: 100%;
    height: 100%;
    background-color: #cc0000;
    z-index: -1;
    border-radius: 10px;
}
.serviceContents .serviceBox p.serviceName{
    font-size: 1.5rem;
    font-weight: bold;
    color: #cc0000;
}
.serviceContents .serviceBox p.serviceName::after{
    content: "";
    display: inline-block;
    width: 100%;
    height: 180px;
}
.serviceContents .serviceBox p.serviceName.wifi::after{
    background: url(../lp_pages/affiliateprogram/service_wifi.png) center/70% no-repeat;  
}
.serviceContents .serviceBox p.serviceName.sim::after{
    background: url(../lp_pages/affiliateprogram/service_sim.png) center/70% no-repeat;  
}
.serviceContents .serviceBox p.serviceName.esim::after{
    background: url(../lp_pages/affiliateprogram/service_esim.png) center/70% no-repeat;  
}
.serviceContents .serviceBox p.serviceText{
    text-align: left;
}

.stepContents .stepBox{
    width: 22%;
}
.stepContents .stepBox .circle{
    position: relative;
    background: #fff;
    width: 200px;
    height: 200px;
    border-radius: 100px;
    margin: 20px auto;
}
.stepContents .stepBox .circle::before{
    content: "";
    width: 0;
    height: 0;
    border-left: 10px solid #cc0000;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    position: absolute;
    right: -30px;
    top: 50%;
    transform: translateY(-50%);
}
.stepContents .stepBox:last-child .circle::before{
    display: none;
}
.stepContents .stepBox .circle img{
    width: 65%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.stepContents .stepBox .stepName{
    text-align: center;
    font-weight: bold;
    font-size: 18px;
    margin: 10px 0;
    line-height: 1.3;
}

.pertnerContents .pertnerBox{
    width: 30%;
    text-align: center;
}
.pertnerContents .pertnerBox img{
    width: 85%;
    vertical-align: top;
    margin: 20px 0;
}
.pertnerContents .pertnerBox a{
    display: inline-block;
    margin-bottom: 20px;
    font-size: 18px;
}

.youtubeContents {
    max-width: 600px;
    margin: 40px auto;
}
.youtubeBox {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding-bottom: 56.25%;
}
.youtubeBox iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 10px;
}

footer{
    background: #000000;
    color: #fff;
    text-align: center;
    padding: 30px 0;
}
footer .snsTitle{
    font-size: 22px;
    margin: 10px 0;
}
footer .sns{
    margin-top: 30px;
}
footer .sns a{
    margin: 0 10px;
}
footer .sns a:hover img{
    opacity: .8;
}
footer .sns a img{
    height: auto;
    width: 70px;
    transition: .3s;
}

/* フォーム */
#affiliate_form{
    background: #f2f2f2;
}
.layoutArea.title .wrapper{
    padding-bottom: 15px;
}
.layoutArea.form .wrapper{
    padding-top: 0;
}
.layoutArea.title img{
    width: 300px;
}
.layoutArea.title h1{
    margin: 20px 0;
}
.register_text p{
    text-align: center;
    margin: 10px 0;
}
.register_text p.note{
    font-size: 14px;
}
.error_msg {
    background: #e9e9e9;
    border: 1px solid #cccccc;
    margin: 25px auto 40px;
}
.error_msg p{
    font-size: 14px;
    color: #cc0000;
    line-height: 1.8;
    padding: 20px;
}
.inputArea{
    display: flex;
    align-items: center;
    margin: 20px 0;
}
.inputArea label{
    width: 25%;
    font-weight: bold;
}
.inputArea.name label{
    margin-bottom: 30px;
}
.inputArea.name p{
    font-size: 14px;
    margin-top: 5px;
}
.inputArea label span.icon_required{
    color: #e01747;
    margin: 0 3px;
    font-weight: normal;
}
.inputBox {
    width: 75%;
}
.inputBox input, .inputBox select{
    width: 100%;
    height: 45px;
    border-radius: 4px;
    border: 1px solid #ccc;
    padding: 10px 15px;
    font-size: 16px;
}
.inputBox select{
    cursor: pointer;
    appearance: none;
    background: #fff url(../images_app/pc/default/selectbox.png) no-repeat right;
}
.inputBox .nameInput{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.inputBox .nameInput input{
    width: 49%;
}
.btn_order{
    font-weight: bold;
    background: #c93900;
    border: none;
    color: #fff;
    font-size: 20px;
    padding: 15px 0;
    width: 30%;
    border-radius: 30px;
    cursor: pointer;
    margin: 50px auto;
}
.btn_order:hover{
    text-decoration: none;
    opacity: 0.9;
}

/* 個人情報同意 */
.personal_box{
    margin: 40px auto 0;
    padding: 25px 30px;
    border: 2px solid #333;
    border-radius: 8px;
    text-align: center;
    max-width: 500px;
    background: #fafafa;
}
.personal_link_area{
    margin-bottom: 15px;
}
a.personal_link{
    color: #cc0000;
    text-decoration: underline;
    font-weight: bold;
    font-size: 16px;
}
a.personal_link:hover{
    opacity: 0.8;
    text-decoration: underline;
}
.personal_checkbox_area{
    display: flex;
    justify-content: center;
    align-items: center;
}
.personal_checkbox_area .checkbox_label{
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 16px;
    font-weight: normal;
}
.personal_checkbox_area .checkbox_label input[type="checkbox"]{
    width: 20px;
    height: 20px;
    margin-right: 10px;
    cursor: pointer;
    accent-color: #c93900;
}
.personal_checkbox_area .checkbox_label .icon_required{
    color: #e01747;
    margin-left: 5px;
}

@media screen and (max-width: 1300px) {
    .mainvisual .mvContents{
        top: 7vw;
    }
    .mainvisual .mvContents.tw, .mainvisual .mvContents.en {
        top: 8vw;
    }
    .mainvisual .mvContents h1{
        font-size: 2vw;
    }
    .mainvisual .mvContents h1 img{
        width: 15vw;
    }
    .mainvisual .mvContents h1 span{
        font-size: 3.8vw;
    }
    .mainvisual .mvContents img.border{
        width: 10vw;
        margin: 10px 0;
    }
    .mainvisual .mvContents p{
        font-size: 1.5vw;
    }
    .btn_order_yellow{
        bottom: 30px;
    }
}

@media screen and (max-width: 1000px) {
    br.tablet{
        display: block;
    }

    .mainvisual .mvContents, .mainvisual .mvContents.en{
        top: 70px;
    }
    .mainvisual .mvContents.tw {
        top: 80px;
    }
    .mainvisual .mvContents h1{
        font-size: 1.2rem;
    }
    .mainvisual .mvContents h1 img{
        width: 150px;
    }
    .mainvisual .mvContents h1 span{
        font-size: 2.3rem;
    }
    .mainvisual .mvContents img.border {
        width: 120px;
    }
    .mainvisual .mvContents p{
        font-size: 1rem;
    }
}

@media screen and (max-width: 767px) {
    body{
        min-width: initial;
        width: 100%;
    }
    .f-direction-column.sp{
        flex-direction: column;
    }
    .layoutArea .wrapper{
        width: 100%;
    }
    .layoutArea h2 {
        font-size: 1.5rem;
    }
    .layoutArea p, footer p {
        font-size: 14px;
    }

    /* LP */
    .mainvisual img.background.pc{
        display: none;
    }
    .mainvisual img.background.sp{
        display: block;
    }
    .mainvisual .mvContents{
        width: 100%;
        top: 32vw;
        line-height: 1.2;
    }
    .mainvisual .mvContents.en, .mainvisual .mvContents.tw {
        top: 34vw;
    }
    .mainvisual .mvContents h1{
        font-size: 4vw;
    }
    .mainvisual .mvContents h1 img{
        width: 30vw;
    }
    .mainvisual .mvContents h1 span{
        font-size: 6.5vw;
    }
    .mainvisual .mvContents img.border{
        margin: 3vw 0;
        width: 30vw;
    }
    .mainvisual .mvContents p{
        font-size: 3.5vw;
    }
    .btn_order_yellow{
        font-size: 4vw;
        width: auto;
        padding: 10px 20px;
        border-radius: 5px;
        bottom: 5vw;
    }
    .btn_order_yellow::after{
        right: 10px;
        border-left: 6px solid #000;
        border-top: 4px solid transparent;
        border-bottom: 4px solid transparent;
    }

    p.serviceText,.serviceContents .serviceBox p.serviceName{
        text-align: left;
    }
    .serviceContents .serviceBox, .pertnerContents .pertnerBox{
        width: 100%;
    }
    .serviceContents .serviceBox + .serviceBox, .pertnerContents .pertnerBox + .pertnerBox{
        margin-top: 20px;
    }
    .serviceContents h3{
        font-size: 1.2rem;
        padding: 5px 0;
    }
    .serviceContents .serviceBox{
        padding: 30px 15px 30px 40%;
    }
    .serviceContents .serviceBox p.serviceName{
        margin-bottom: 10px;
        font-size: 1.2rem;
    }
    .serviceContents .serviceBox p.serviceName::after{
        width: 40%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
    }
    .serviceContents .serviceBox p.serviceName.wifi::after, .serviceContents .serviceBox p.serviceName.sim::after, .serviceContents .serviceBox p.serviceName.esim::after{
        background-size: 75%;
    }

    .stepContents .stepBox{
        width: 50%;
        padding: 0 5px;
    }
    .stepContents .stepBox .circle{
        width: 33vw;
        height: 33vw;
    }
    .stepContents .stepBox .circle::before{
        right: -24%;
    }
    .stepContents .stepBox:nth-child(even) .circle::before{
        display: none;
    }
    .stepContents .stepBox .stepName span, .layoutArea h2 span, footer p span{
        display: inline-block;
    }

    .pertnerContents .pertnerBox img{
        width: 50%;
    }

    footer{
        padding: 30px 20px;
    }
    footer .sns a img{
        width: 40px;
    }

    /* フォーム */
    .layoutArea.title .wrapper{
        padding-top: 20px;
    }
    .layoutArea.title img{
        width: 40%;
    }
    .layoutArea.title h1{
        font-size: 25px;
        margin: 10px 0;
    }
    .register_text p.note{
        text-align: left;
    }
    .inputArea{
        display: block;
    }
    .inputArea.name p{
        margin: 0;
    }
    .inputBox{
        width: 100%;
    }
    .btn_order{
        width: 80%;
    }
}