/*---------------Header---------------*/
.title-header{background: url(../images/bg-about.jpg) center no-repeat;}

.sub-title { 
    display: block; 
    padding: 4px 0; 
}
.sub-title h2 { 
    font-weight: bold; 
    font-size: 20px; 
    position: relative; 
}
.sub-title .line-title { 
    position: relative; 
    width: 50px; 
    height: 2px; 
    background: #000; 
    display: inline-block; 
    top: -6px; 
}
.sub-title small { 
    font-weight: normal; 
    font-size: 14px; 
}

img.full-img { 
    width: 100%; 
}
img.max-img { 
    max-width: 100%; 
}

.topic-sky { 
    display: block; 
    position: relative; 
    margin: 50px auto; 
}
.topic-sky img {
     width: 100%; 
}
.title-topic-left { 
    display: block; 
    background: #606060; 
    color: #fff; 
    padding: 4px 12px; 
    font-size: 18px; 
    position: absolute; 
    left: 21%; 
    top: -20px; 
    width: 79%; 
}
.title-topic-right { 
    display: block; 
    background: #606060; 
    color: #fff; 
    font-size: 18px; 
    width: 79%; 
    padding: 4px 12px 4px 21%; 
    margin: 44px 0;  
}

.text-topic { 
    text-align: center;
    /* 
    position: absolute; 
    top:18%; 
    left: 0; 
    right: 0; 
    */  

    /*background: #404f93;*/ 
    background-color:#000; 
    padding: 20px ; 
    color: #FFF; 
    font-size: 18px; 
    line-height: 2; 
    width: 100%; 
}

.text-topic h2 { 
    font-family: 'Noto Sans JP', sans-serif;  
    font-size: 34px; 
    font-weight: bold; 
    color: #fff; 
    text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.5);
}
.text-topic .line-white { 
    display: block; 
    width: 80px; 
    height: 2px; 
    background: #fff; 
    display: block; 
    margin: 30px auto; 
}

.column-2 { 
    display: flex; 
    flex-wrap: wrap; 
    margin: 20px auto; 
}
.column-left { 
    display: block; 
    width: 50%;
}
.column-right { 
    display: block; 
    width: 50%;
}
.text-content { 
    line-height: 1.8; 
    padding: 0 2%; 
}
.text-content .bg-black { 
    background: #000; 
    color: #fff; 
    display: inline-block; 
    padding: 0 22px; 
}
.text-content h2 { 
    color: #606060; 
    font-size: 26px; 
    font-weight: bold; 
    margin-bottom: 8px; 
}

.line-black { 
    display: block; 
    width: 100%; 
    height: 2px; 
    background: #000; 
    margin: 40px auto;
}

.column-3 { 
    display: flex; 
    flex-wrap: wrap; 
    margin: 20px auto; 
}
.column-3 .column { 
    display: block; 
    width: 33.33%; 
    padding: 12px 2%; 
}
.column-3 .column h3 { 
    font-size: 18px; 
    font-weight: bold; 
    padding: 8px 0; 
}
.column-3 .line-gray { 
    display: block;
    width: 80px; 
    height: 2px; 
    background: #cccccc; 
    margin-bottom:8px;
}

.warranty { 
    display: block; 
    position: relative; 
    background: #f6f6f6; 
    padding: 15px 8px 15px 165px; 
    margin: 35px 0; 
    font-size: 12px; 
    width: 75%; 
    float: right; 
}
.warranty figure { 
    position: absolute; 
    top: -18px; 
    left: 10px; 
}
.warranty figure img { 
    width: 150px; 
}
.bg-white {
    background: #fff;
}
.feature-title {
    height: 40px;
    overflow: hidden;
    background: -webkit-gradient(linear, left top, right top, color-stop(50, #e9e9e9), color-stop(50, #ffffff), color-stop(100, #ffffff));
    background: -moz-linear-gradient(Left, #e9e9e9 50%, #ffffff 50%, #ffffff 100%);
    background: -ms-linear-gradient(Left, #e9e9e9 50%, #ffffff 50%, #ffffff 100%);
    background: -o-linear-gradient(Left, #e9e9e9 50%, #ffffff 50%, #ffffff 100%);
    background: linear-gradient(to right, #e9e9e9 50%, #ffffff 50%, #ffffff 100%);
    margin: 22px 0 20px;
}
.feature-step { 
    display: inline-block; 
    background: #e9e9e9; 
    padding: 4px 12px 4px 0; 
    color: #000; 
    font-size: 22px; 
    font-weight:bold; 
    position: relative; 
    height: 40px;  
}
.feature-step::after { 
    content: url(/loan/images/feature-title.png); 
    position: absolute; 
    top: 0; 
    right: -60px 
}
.feature-text { 
    display: block; 
    margin: 50px auto; 
}
.feature-text h2 { 
    font-size: 26px; 
    font-weight: bold; 
}


@media(max-width:1200px) {
    .text-topic { 
        font-size: 16px; 
    }
    .text-topic h2 { 
        font-size: 25px; 
    }
    .text-topic .line-white { 
        margin: 22px auto; 
    }
}

@media(max-width:1024px) {
    .topic-sky {
        /* background: url(../images/bg-sky_sp.png) no-repeat bottom center; */
        /* display: flex; */
        /* flex-wrap: wrap; */
        /* align-items: center; */
        /* height: 500px; */
    }
    /* .topic-sky figure { display: none; } */
    .text-topic { 
        position: relative; top: 0; 
        padding: 12px; 
    }

    .column-2 { 
        align-items: center; 
    }

    .text-content h2 { 
        font-size: 20px; 
    }
    .warranty { 
        width: 100%; 
    }

}
@media( max-width:920px) {
    .feature-step { 
        font-size: 18px; 
    }
    .feature-text h2 { 
        font-size: 18px; 
    }
}
@media (max-width: 690px) {
    .column-left { 
        width: 100%; 
        padding: 0 2%; 
        margin: 2px auto; 
    }
    .column-right { 
        width: 100%; 
        padding: 0 2%; 
        margin: 2px auto; 
        text-align: center; 
    }
    .column-left .text-content { 
        padding: 0; 
    }
    .warranty { 
        width: 70%; 
    }

    .column-right .full-img { 
        width: auto; 
        max-width: 100%; 
        margin: 8px auto;
    }

    .column-3 .column { 
        width: 100%; 
        display: block; 
        text-align: center; 
    }
    .column-3 .line-gray { 
        margin: 8px auto; 
        width: 150px; 
    }
    .column .full-img { 
        width: 60%; 
        margin: 8px auto;
    }
    .column_txt_sp{
        text-align:left;
    }
}

@media (max-width: 580px) {
    .topic-sky {/* height: 300px; */}
    .text-topic h2 { font-size: 20px; }
    .warranty { width: 100%; }
} 

@media (max-width: 480px) {
    body{
        font-size:13px;
    }
    .text-topic { 
        font-size: 14px; 
        padding: 10px 5px; 
    }
    .text-topic h2 { 
        font-size: 16px  !important; 
    }   
    .title-topic-right {
         width: 100%; 
         padding: 4px; 
         text-align: center;
    }
    .text-content h2 { 
        font-size: 20px !important; 
    }

    .column-3 .column h3 { font-size: 16px; }
    .column .full-img { width: 60%; }
    .topic-sky {
        margin: 10px auto;
        /* height: 180px; */
   }
   .text-topic .line-white {
        margin: 7px auto;
    }
    .text-topic p{
        /* text-align: left; */
    } 
    .column-right .full-img {
        max-width: 60%;
        margin: 8px auto;
    }
    .separate-img {
        max-width: 100% !important;
    }

    .line-black {
        margin: 15px auto;
    }


    }
    @media (max-width: 420px) {
        .warranty { padding: 95px 12px 12px; text-align: center;     margin: 35px 0 10px;}
    }