@charset "utf-8";

/*==============================

		style.css（toppage）

==============================*/


/*------------------------------
brand PC
------------------------------*/
@media screen and (min-width: 641px)  { 
    .brand_bg {
        min-height: 100%;
        background-size: cover;
        background-attachment: fixed;
        background-repeat: no-repeat;
        background-position: center center;
        background-image: url("../img/mainPh_pc.jpg");
    }
    .brand_bg h2{
        width: 759px;
        margin-right: auto;
        margin-left: auto;
        padding-top: 78px;
    }
    .brand_bg p{
        text-align: center;
    }
    .brand_bg p:nth-of-type(1){
        padding-top: 22px;
    }
    .brand_bg p:nth-of-type(2){
        padding-top: 60px;
        padding-bottom: 80px;
    }
}



/*------------------------------
brand SP
------------------------------*/
@media screen and (max-width: 640px) {
    .brand_bg {
        min-height: 100%;
        background-size: cover;
        background-position: center center;
        background-image: url("../img/mainPh_sp.jpg");
        background-repeat: no-repeat;
    }
    .brand_bg h2{
        width: 80%;
        margin-right: auto;
        margin-left: auto;
        padding-top: 30px;
        padding-bottom: 10px;
    }
    .brand_bg p{
        text-align: center;
        width: 90%;
        margin-right: auto;
        margin-left: auto;
    }
    .brand_bg p:nth-of-type(1){
        padding-top: 10px;
        padding-bottom: 30px
    }
    .brand_img{
        background: url(../img/brand_bg.gif) repeat;
        padding-top: 20px;
        padding-bottom: 20px;
        padding-right: 5%;
        padding-left: 5%;
        text-align: center;
    }
}

/*------------------------------
INFORMATION PC
------------------------------*/
@media screen and (min-width: 641px) {
    .information{
        width: 790px;
        margin-right: auto;
        margin-left: auto;
        padding-top: 80px;
        padding-bottom: 80px;
    }
    .information .sectionTit{
        text-align: center;
        padding-bottom: 10px;
    }
    .information dl{
        border-top: 1px solid #010005;
        border-bottom: 1px solid #010005;
        padding-top: 15px;
        padding-bottom: 15px; 
        overflow: hidden;
        zoom: 1;
    }
    .information dt{
        width: 15%;
        float: left;
        clear: both;
        border-bottom: 1px solid #DEDEDE;
        font-size: 1.3rem;
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .information dd{
        width: 85%;
        float: left;
        font-size: 1.3rem;
        border-bottom: 1px solid #DEDEDE;
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .information dt:last-of-type{
        border-bottom: none;
    }
    .information dd:last-of-type{
        border-bottom: none;
    }

}

/*------------------------------
INFORMATION SP
------------------------------*/
@media screen and (max-width:640px){
    .information{
        width: 90%;
        margin-right: auto;
        margin-left: auto;
        padding-top: 30px;
        padding-bottom: 30px;
    }
    .information .sectionTit{
        text-align: center;
        padding-bottom: 10px;
    }
    .information .sectionTit img{
        height: 15px;
        width: auto;
    }
    
    .information dl{
        border-top: 1px solid #010005;
        border-bottom: 1px solid #010005;
        overflow: hidden;
        zoom: 1;
    }
    .information dt{
        font-size: 1.3rem;
        padding-top: 10px;
        padding-bottom: 5px;
    }
    .information dd{
        font-size: 1.3rem;
        border-bottom: 1px solid #DEDEDE;
        padding-bottom: 10px;
    }
    .information dt:last-of-type{
        border-bottom: none;
    }
    .information dd:last-of-type{
        border-bottom: none;
    }
 }

/*------------------------------
GALLERY PC
------------------------------*/
@media screen and (min-width: 641px) {
    .gallery{
        padding-top: 80px;
        padding-bottom: 80px;
    }
    .gallery .sectionTit{
        text-align: center;
        padding-bottom: 20px;
    }
    .gallery .sectionTxt{
        text-align: center;
        padding-bottom: 30px;
        font-size: 1.4rem;
    }
    .gallery .slideCntl {
        margin:0 auto;
        width: 850px;
    }
    .gallery .slideCntl .slick_prev{
        width:50px;
        height:50px;
        background:url(../img/arrowLeft.png) no-repeat;
        background-size: 50px;
        top: 40%;
        left: -80px;
    }
    .gallery .slideCntl .slick_next {
        width:50px;
        height:50px;
        background:url(../img/arrowRight.png) no-repeat;
        background-size: 50px;
        top: 40%;
        right: -80px;
    }
    .gallery .photoGallery dt{
        width: 413px;
        float: left;
    }
    .gallery .photoGallery dt img{
        width: 100%;
        height: auto;
    }   
    .gallery .photoGallery dd{
        width: 413px;
        float: right;
    }
    .gallery .photoGallery dd p{
        float: left;
        width: 197px;
    }
    .gallery .photoGallery dd p img{
        width: 100%;
        height: auto;
    }
    .gallery .photoGallery dd p:nth-child(1){
        margin-right: 19px;
        margin-bottom: 23px;
    }
    .gallery .photoGallery dd p:nth-child(2){
        margin-bottom: 23px;
    }
    .gallery .photoGallery dd p:nth-child(3){
        margin-right: 19px;
    }
    .gallery .btn_detail{
        width: 365px;
        margin-right: auto;
        margin-left: auto;
        padding-top: 40px;
    }
}

/*------------------------------
GALLERY SP
------------------------------*/
@media screen and (max-width:640px){
    .gallery{
        width: 100%;
        margin-right: auto;
        margin-left: auto;
        padding-top: 30px;
        padding-bottom: 30px;
    }
    .gallery .sectionTit{
        text-align: center;
        padding-bottom: 10px;
    }
    .gallery .sectionTit img{
        height: 15px;
        width: auto;
    }
    .gallery .sectionTxt{
        text-align: center;
        padding-bottom: 10px;
    }
    .gallery .slideCntl {
        margin:0 auto;
        width: 90%;
    }
    .gallery .slideCntl .slick_prev{
        width:30px;
        height:30px;
        background:url(../img/arrowLeft.png) no-repeat;
        background-size: 30px;
        top: 40%;
        left: -20px;
    }
    .gallery .slideCntl .slick_next {
        width:30px;
        height:30px;
        background:url(../img/arrowRight.png) no-repeat;
        background-size: 30px;
        top: 40%;
        right: -20px;
    }
    .gallery .photoGallery dt{
        width: 100%;
        margin-bottom: 10px;
    }
    .gallery .photoGallery dt img{
        width: 100%;
        height: auto;
    }
    
    .gallery .photoGallery dd{
        width: 100%;
    }
    .gallery .photoGallery dd p{
        float: left;
        width: 22%;
        margin-right: 4%;
    }
    .gallery .photoGallery dd p:nth-child(4){
        margin-right: 0;
    }
    
    .gallery .btn_detail{
        width: 80%;
        margin-right: auto;
        margin-left: auto;
        padding-top: 40px;
    }
 }


/*------------------------------
FLOW PC
------------------------------*/
@media screen and (min-width: 641px) {
    .flow{
        padding-top: 80px;
        padding-bottom: 80px;
        width: 760px;
        margin-right: auto;
        margin-left: auto;
    }
    .flow .sectionTit{
        text-align: center;
        padding-bottom: 20px;
    }
    .flow .sectionTxt{
        text-align: center;
        padding-bottom: 30px;
        font-size: 1.4rem;
    }
    .flow .btn_wrap{
        width: 760px;
        margin-right: auto;
        margin-left: auto;
        margin-top: 30px;
    }
    .flow .btn_wrap li{
        float: left;
    }
    .flow .btn_wrap li:last-child{
        margin-left: 30px;
    }
    .flow .btn_detail{
        width: 365px;
        margin-right: auto;
        margin-left: auto;
        padding-top: 40px;
    }
 }


/*------------------------------
FLOW SP
------------------------------*/
@media screen and (max-width:640px){
    .flow{
        width: 100%;
        margin-right: auto;
        margin-left: auto;
        padding-top: 30px;
        padding-bottom: 30px;
    }
    .flow .sectionTit{
        text-align: center;
        padding-bottom: 10px;
    }
    .flow .sectionTit img{
        height: 15px;
        width: auto;
    }
    .flow .sectionTxt{
        text-align: center;
        padding-bottom: 10px;
    }
    .flow .btn_wrap{
        width: 96%;
        margin-right: auto;
        margin-left: auto;
        margin-top: 10px;
    }
    .flow .btn_wrap li{
        float: left;
        width: 49%;
    }
    .flow .btn_wrap li:last-child{
        margin-left: 1%;
    }
    .flow .btn_detail{
        width: 80%;
        margin-right: auto;
        margin-left: auto;
        padding-top: 40px;
    } 
 }

/*------------------------------
MERIT PC
------------------------------*/
@media screen and (min-width: 641px) {
    .merit{
        padding-top: 80px;
        padding-bottom: 80px;
    }
    .merit .sectionTit{
        text-align: center;
        padding-bottom: 30px;
    }
    .merit .sectionTxt{
        text-align: center;
        padding-bottom: 40px;
        font-size: 1.4rem;
    }
    .merit .slideCntl {
        margin:0 auto;
        width: 850px;
    }
    .merit .slideCntl .slick_prev{
        width:50px;
        height:50px;
        background:url(../img/arrowLeft.png) no-repeat;
        background-size: 50px;
        top: 40%;
        left: -80px;
    }
    .merit .slideCntl .slick_next {
        width:50px;
        height:50px;
        background:url(../img/arrowRight.png) no-repeat;
        background-size: 50px;
        top: 40%;
        right: -80px;
    }
    .merit .meritWrap{
        background: url(../img/bg_line.gif) repeat;
        width: 100%;
        padding: 7px;
    }
    .merit .meritWrap .meritBox{
        background: #FFFFFF;
        padding-top: 20px;
        padding-bottom: 20px;
        padding-right: 25px;
        padding-left: 25px;
        overflow: hidden;
    }
    .merit .meritWrap .meritBox h3{
        background: #000000;
        text-align: center;
        color: #FFFFFF;
        font-size: 1.6rem;
        padding-top: 10px;
        padding-bottom: 10px;
        font-weight: 600;
        letter-spacing: 2px;
        margin-bottom: 30px;
    }
    .merit .meritWrap .meritBox h4{
        width: 574px;
        margin-right: auto;
        margin-left: auto;
        margin-bottom: 30px;
    }
    .merit .meritWrap .meritBox ul{
        width: 82%;
        margin-right: auto;
        margin-left: auto; 
    }
    .merit .meritWrap .meritBox li{
        vertical-align: top; 
    }
    .merit .meritWrap .meritBox li:nth-child(1){
        width: 231px;
        float: left;
    }
    .merit .meritWrap .meritBox li:nth-child(2){
        width: 360px;
        float: right;
    }
    .merit .btn_detail{
        width: 365px;
        margin-right: auto;
        margin-left: auto;
        padding-top: 40px;
    }
}

/*------------------------------
MERIT SP
------------------------------*/
@media screen and (max-width:640px){
    .merit{
        width: 100%;
        margin-right: auto;
        margin-left: auto;
        padding-top: 30px;
        padding-bottom: 30px;
    }
    .merit .sectionTit{
        text-align: center;
        padding-bottom: 10px;
    }
    .merit .sectionTit img{
        height: 15px;
        width: auto;
    }
    .merit .sectionTxt{
        text-align: center;
        padding-bottom: 10px;
    }
    .merit .slideCntl {
        margin:0 auto;
        width: 90%;
    }
    .merit .slideCntl .slick_prev{
        width:30px;
        height:30px;
        background:url(../img/arrowLeft.png) no-repeat;
        background-size: 30px;
        top: 40%;
        left: -20px;
    }
    .merit .slideCntl .slick_next {
        width:30px;
        height:30px;
        background:url(../img/arrowRight.png) no-repeat;
        background-size: 30px;
        top: 40%;
        right: -20px;
    }
    .merit .meritWrap{
        background: url(../img/bg_line.gif) repeat;
        width: 100%;
        padding: 5px;
    }
    .merit .meritWrap .meritBox{
        background: #FFFFFF;
        padding-top: 20px;
        padding-bottom: 20px;
        padding-right: 25px;
        padding-left: 25px;
        overflow: hidden;
    }
    .merit .meritWrap .meritBox h3{
        background: #000000;
        text-align: center;
        color: #FFFFFF;
        font-size: 1.6rem;
        padding-top: 5px;
        padding-bottom: 5px;
        font-weight: 600;
        letter-spacing: 2px;
        margin-bottom: 20px;
    }
    .merit .meritWrap .meritBox h4{
        width: 100%;
        margin-right: auto;
        margin-left: auto;
        margin-bottom: 10px;
    }
    .merit .meritWrap .meritBox ul{
        width: 100%;
        margin-right: auto;
        margin-left: auto; 
    }
    .merit .meritWrap .meritBox li{
        vertical-align: top; 
    }
    .merit .meritWrap .meritBox li:nth-child(1){
        margin-bottom: 10px;
    }
    .merit .btn_detail{
        width: 80%;
        margin-right: auto;
        margin-left: auto;
        padding-top: 40px;
    }
 }

/*------------------------------
PURPOSE PC
------------------------------*/
@media screen and (min-width: 641px) {
    .purpose{
        padding-top: 80px;
        padding-bottom: 80px;
        width: 980px;
        margin-right: auto;
        margin-left: auto;
    }
    .purpose .sectionTit{
        text-align: center;
        padding-bottom: 20px;
    }
    .purpose .sectionTxt{
        text-align: center;
        padding-bottom: 30px;
        font-size: 1.4rem;
    }
    .purpose .btn_wrap{
        width: 760px;
        margin-right: auto;
        margin-left: auto;
        margin-top: 30px;
    }
    .purpose .btn_wrap li{
        float: left;
    }
    .purpose .btn_wrap li:last-child{
        margin-left: 30px;
    }
 }


/*------------------------------
PURPOSE SP
------------------------------*/
@media screen and (max-width:640px){
    .purpose{
        width: 100%;
        margin-right: auto;
        margin-left: auto;
        padding-top: 30px;
        padding-bottom: 30px;
    }
    .purpose .sectionTit{
        text-align: center;
        padding-bottom: 10px;
    }
    .purpose .sectionTit img{
        height: 15px;
        width: auto;
    }
    .purpose .sectionTxt{
        text-align: center;
        padding-bottom: 10px;
    }
    .purpose .btn_wrap{
        width: 96%;
        margin-right: auto;
        margin-left: auto;
        margin-top: 10px;
    }
    .purpose .btn_wrap li{
        float: left;
        width: 49%;
    }
    .purpose .btn_wrap li:last-child{
        margin-left: 1%;
    }
 }

/*------------------------------
certification PC
------------------------------*/
@media screen and (min-width: 641px) {
    .certification{
        background:#F4F4F4 url(../img/sgh_bg.jpg) no-repeat;
        background-position:  center center;
        min-height: 234px;
        padding-top: 50px;
        padding-bottom: 50px;
    }
    .certification .sectionTit{
        text-align: center;
        padding-bottom: 20px;
    }
    .certification .sectionTxt{
        text-align: center;
        padding-bottom: 30px;
        font-size: 1.4rem;
    }
    .certification .btn_detail{
        width: 365px;
        margin-right: auto;
        margin-left: auto;
        padding-top: 40px;
    }
}

/*------------------------------
certification SP
------------------------------*/
@media screen and (max-width:640px){
    .certification{
        background:#F4F4F4 url(../img/sgh_bg.jpg) no-repeat;
        background-position:  center center;
        background-size: cover;
        padding-top: 30px;
        padding-bottom: 30px;
    }
    .certification .sectionTit{
        text-align: center;
        padding-bottom: 10px;
    }
    .certification .sectionTit img{
        height: 15px;
        width: auto;
    }
    .certification .sectionTxt{
        text-align: center;
        padding-bottom: 10px;
    }
    .certification .btn_detail{
        width: 80%;
        margin-right: auto;
        margin-left: auto;
        padding-top: 40px;
    }
 }

/*------------------------------
LOAN PC
------------------------------*/
@media screen and (min-width: 641px) {
    .loan{
        padding-top: 80px;
        padding-bottom: 80px;
        width: 980px;
        margin-right: auto;
        margin-left: auto;
    }
    .loan .sectionTit{
        text-align: center;
        padding-bottom: 20px;
    }
    .loan .sectionTxt{
        text-align: center;
        font-size: 1.4rem;
    }
    .loan .btn_detail{
        width: 365px;
        margin-right: auto;
        margin-left: auto;
        padding-top: 30px;
    }
 }
/*------------------------------
LOAN SP
------------------------------*/
@media screen and (max-width:640px){
    .loan{
        width: 100%;
        margin-right: auto;
        margin-left: auto;
        padding-top: 30px;
        padding-bottom: 30px;
    }
    .loan .sectionTit{
        text-align: center;
        padding-bottom: 10px;
    }
    .loan .sectionTit img{
        height: 15px;
        width: auto;
    }
    .loan .sectionTxt{
        text-align: center;
    }
    .loan .btn_detail{
        width: 80%;
        margin-right: auto;
        margin-left: auto;
        padding-top: 40px;
    }
}

/*------------------------------
SGH PC
------------------------------*/
@media screen and (min-width: 641px) {
    .sgh{
        padding-top: 80px;
        padding-bottom: 80px;
        margin-right: auto;
        margin-left: auto;
    }
    .sgh .sectionTit{
        text-align: center;
        padding-bottom: 20px;
    }
    .sgh .sectionTxt{
        text-align: center;
        padding-bottom: 30px;
        font-size: 1.4rem;
    }
    .sgh .sgh_ph{
        float: left;
        width: 476px;
    }
    .sgh #sgh_map{
        float: right;
        width: 476px;
        height: 263px;
    }
}

/*------------------------------
SGH SP
------------------------------*/
@media screen and (max-width:640px){
    .sgh{
        width: 100%;
        margin-right: auto;
        margin-left: auto;
        padding-top: 30px;
        padding-bottom: 30px;
    }
    .sgh .sectionTit{
        text-align: center;
        padding-bottom: 10px;
    }
    .sgh .sectionTit img{
        height: 15px;
        width: auto;
    }
    .sgh .sectionTxt{
        text-align: center;
        padding-bottom: 10px;
    }
    .sgh .sgh_ph{
        width: 90%;
        margin-right: auto;
        margin-left: auto;
    }
    .sgh #sgh_map{
        width: 90%;
        margin-right: auto;
        margin-left: auto;
    }
 }