@charset "UTF-8";
/*---------------------------------------------------------------------------------------------
gohoubi_course
  ---------------------------------------------------------------------------------------------*/
.boxContent{
    width: 930px;
    margin: 0 auto;
}
.area0{
    text-align: center;
    background: url(../img/gohoubi_course/bg-area1.png) repeat-x top 49px left;
    padding: 31px 0;
}
.area{
    border: 1px solid #ecd1a3;
    margin: 85px 7px 0 5px;
}
.area .title{
    margin: -74px -1px 0 -17px;
}
.area .row{
    padding: 38px 46px;
}
.area .row .img{
    display: inline-block;
    vertical-align: middle;
}
.area .row .text{
    display: inline-block;
    vertical-align: middle;
    margin:-17px 0 0 33px;
}
.area1 .row2{
    padding: 6px 43px 39px;
}
.area1 .row2 .subTitle{
    text-align: center;
    position: relative;
}
.area1 .row2 .subTitle:before{
    left: 12px;
}
.area1 .row2 .subTitle:before,
.area1 .row2 .subTitle:after{
    content: "";
    background: #d0b48c;
    height: 1px;
    width: 14.5%;
    top: 50%;
    transform: translateY(-50%);
    position: absolute;
}
.area1 .row2 .subTitle:after{
    right: 12px;
}
.area1 .row2 ul{
    margin-top: 24px;
}
.area1 .row2 ul li{
    display: inline-block;
    vertical-align: top;
    margin-right: -1px;
    width: 33%;
}
.area1 .row2 ul li:last-child{
    margin-right: -8px;
}
.area2{
    margin-top: 124px;
    padding-bottom: 35px;
}

.area2 .row{
    padding: 27px 36px;
}
.area2 .row .text{
    margin: 11px 0 0 34px;
}
.area2 .subImg{
    text-align: center;
    margin-top: 1px;
}
.area2 .subImg img.sp{
    display: none;
}
.area3{
    background: url(../img/gohoubi_course/area3-bg.png) repeat-x top 23px left;
    margin-top: 33px;
    padding: 5px 37px 198px;
    position: relative;
}
.area3 .img1{
    padding-left: 54px;
}
.area3 .img2{
    padding: 26px 0 0 129px;
}
.area3 .video{
    margin-top: 44px;
    width: 561px;
    height: 315px;
}
.area3 .video iframe{
    width: 100%;
    height: 100%;
}
.area3 .img3{
    position: absolute;
    bottom: 0;
    right: 0;
}
@media (max-width: 960px) {
    .boxContent{
        width: 100%;
        padding: 0%;
    }
    .area .row .img{
        width: 42%;
    }
    .area .row .text{
        margin-left: 2%;
        width: 48%;
    }
    .area1 .row2 ul li{
        width: 33%;
    }
}
@media (max-width: 860px) {
    .area2 .subImg img.sp{
        display: inline-block;
    }
}
@media (max-width: 768px) {
    .boxContent{
        width: 100%;
        padding: 0%;
    }
    h1.pageTitle{
        display: none;
    }
    .area0{
        padding: 21px 0 0;
        background-size: 10.1%;
    }
    .area{
        margin: 10% 2% 0 3%;
    }
    .area .title{
        margin: -5.6% -2.6% 0 -2.9%;
    }
    .area .row{
        padding: 10px 16px;
        text-align: center;
    }
    .area .row .img{
        width: 100%;
        text-align: center;
    }
    .area .row .text{
        margin: 13px 0 0;
        text-align: left;
        width: 100%;
        text-align: center;
    }
    .area1 .row2{
        padding: 20px 0 17px;
    }
    .area1 .row2 .subTitle{
        margin: 0 15%;
    }
    .area1 .row2 .subTitle:before, 
    .area1 .row2 .subTitle:after{
        top: 21%;
        width: 12.5%;
    }
    .area1 .row2 .subTitle:before{
        left: -37px;
    }
    .area1 .row2 .subTitle:after{
        right: -37px;
    }
    .area1 .row2 ul{
        margin-top: 15px;
        text-align: center;
    }
    .area1 .row2 ul li{
        width: 29%;
        margin: 0 0.5%;
    }
    .area1 .row2 ul li:last-child{
        margin-right: 0;
    }
    .area2{
        padding-bottom: 15px;
    }
    .area2 .subImg{
        padding: 0 3%;
    }

    .area3{
        padding: 0 4% 48%;
        margin-bottom: 30px;
        background: url(../img/gohoubi_course/area3-bg.png) repeat-x top -19px left;
    }
    .area3 .img1,
    .area3 .img2{
        padding-left: 0;
    }
    .area3 .video{
        padding: 0 8%;
        margin-top: 12%;
        width: 100%;
        height: auto;
    }
    .area3 .img3{
        width: 56%;
    }
}
@media(max-width: 414px){
    .area .title {
        margin: -5.6% -2.8% 0 -2.8%;
    }
}
@media(max-width: 375px){
    .area .title {
        margin: -5.6% -2.9% 0 -2.8%;
    }
    .area2 .title{
        margin: -5.6% -2.97% 0 -2.8%;
    }
}
@media (max-width: 320px) { 
    .area .title {
    margin: -5.6% -2.97% 0 -2.8%;
    }
}