@charset "utf-8";

.secCmnHero{
    background-image: url(../img/catalog/imgHero.jpg);
}
.secCmnHero .titEng {
    letter-spacing: var(--pcLetterSpacing60_2);
}
@media only screen and (max-width:767px){
    .secCmnHero{
        background-image: url(../img/catalog/imgHero_sp.jpg);
    }
    .secCmnHero .inner {
       justify-content:unset;
    }
    .secCmnHero .titleIn {
        text-align: left;
    }
    .secCmnHero .titEng {
        letter-spacing: var(--spLetterSpacing0);
    }
}

/* secBox */
.secBox{
    padding: 70px 0 0px;
}
.secBox.lazyloaded{
    background: url(../img/catalog/bgCatalog.jpg) left top repeat;
}
@media only screen and (max-width:767px){
    .secBox{
        padding: 28px 0 0px;
    }
}

/* secTop */
.secTop .topBox{
    position: relative;
}
.secTop .txtImg{
    text-align: center;
    position: relative;
}
.secTop .tit{
    font-size: var(--pcFontSize22);
    line-height: var(--pcLineHeight10_18);
    font-weight: bold;
    text-align: center;
    letter-spacing: var(--pcLetterSpacing22_05);
    width: 100%;
    position: absolute;
    left: calc(50% - 50%);
    top: 20px;
}
.secTop .span36{
    font-size: var(--pcFontSize36);
    letter-spacing: var(--pcLetterSpacing22_4);
}
.secTop .topImg{
    text-align: center;
    margin: 54px 0 0 46px;
}
.secTop .list{
    padding: 105px 50px 0;
    display: flex;
    justify-content: space-between;
}
.secTop .item{
    width: 49.616%;
    margin-right: 0.768%;
    background: #fff;
}
.secTop .item:nth-child(2){
    margin-right: 0;
}
.secTop .linkBox{
    padding: 78px 40px 0 0;
}
.secTop .inner{
    display: block;
    text-decoration: none;
    width: 340px;
    color: #fff;
    border-radius: 40px;
    margin: 0 auto;
    font-weight: bold;
    opacity: 1;
    pointer-events: all;
    background: #222;
    font-size: 17px;
    font-weight: bold;
    line-height: 2;
    padding: 23px 0;
    text-align: center;
    margin-top: 52px;
    position: relative;
    max-width: 100%;
}
.secTop .inner::before{
    position: absolute;
    content: "";
    width: 7px;
    height: 11px;
    right: 40px;
    top: calc(50% - 5.5px);
    transform: rotate(90deg);
}
.secTop .inner.lazyloaded::before{
    background: url(../img/common/imgMoreArrow.png) center top / cover;
}
.secTop .topTxt{
    font-size: var(--pcFontSize18);
    font-weight: bold;
    text-align: center;
}
@media only screen and (max-width:767px){
    .secTop .txtImg img{
       width: 142px;
       margin: 0 auto 0;
    }
    .secTop .tit{
        font-size: var(--spFontSize13);
        line-height: var(--pcLineHeight10_18);
        letter-spacing: var(--pcLetterSpacing22_05);
        top: 7px;
    }
    .secTop .span36{
        font-size: var(--spFontSize20);
        letter-spacing:var(--spLetterSpacing0);
    }
    .secTop .topImg{
        margin: 34px 0 0 34px;
    }
    .secTop .topImg img{
        width: 260px;
    }
    .secTop .list{
        padding: 60px 0px 0;
      display: block;
    }
    .secTop .item{
        width: 100%;
        margin-right: 0%;
    }
    .secTop .item:nth-child(2){
       margin-top: 5px;
    }
    .secTop .linkBox{
        padding: 40px 0px;
    }
    .secTop .inner{
        width: 275px;
        color: #fff;
        border-radius: 30.5px;
        margin: 0 auto;
        font-size: var(--spFontSize14);
        padding: 16.5px 0;
        margin-top: 27px;
    }
    .secTop .inner::before{
        width: 6px;
        height: 10px;
        right: 30px;
        top: calc(50% - 5.5px);
        transform: rotate(90deg);
    }
    .secTop .topTxt{
        font-size: var(--spFontSize15);
    }
}
@media only screen and (max-width:359px){
    .secTop .inner {
        width: 250px;
    }
}



/* secTelbox */
.secTelbox{
    text-align: center;
    margin-top: 71px;
    margin-bottom: 76px;
}
.secTelbox .teltxt{
    font-size: var(--pcFontSize18);
    font-weight: bold;
    line-height: var(--pcLineHeight34_18);
}
.secTelbox .telbox{
    display: inline-block;
    text-decoration: none;
    color: #1b2328;
    font-size: var(--pcFontSize60);
    line-height: var(--pcLineHeight1);
    margin-top: 25px;
    letter-spacing: var(--pcLetterSpacing60_1);
    position: relative;
}
.secTelbox .telbox::before{
    position: absolute;
    content: "";
    width: 46px;
    height: 30px;
    left: 0;
    top: calc(50% - 24px);
}
.secTelbox .telbox.lazyloaded::before{
    background: url(../img/catalog/iconTel.gif) center top / cover;
}
.secTelbox .number{
    position: relative;
    display: inline-block;
    padding-bottom: 6px;
    padding-left: 55px;
    letter-spacing: var(--pcLetterSpacing60_1);
}
.secTelbox .number::after{
    content: "";
    position: absolute;
    width: 100%;
    height:1px;
    background: #1b2328;
    left: 0;
    bottom: 0;
}
.secTelbox .subtxt{
    font-size: var(--pcFontSize14);
    line-height: var(--pcLineHeight24_14);
    margin-top: 27px;
    letter-spacing: var(--pcLetterSpacing14_1);
}
.secTelbox .checktxt{
    display: none;
}
@media only screen and (max-width:767px){
    .secTelbox{
        margin-top: 0;
        margin-bottom: 0;
        padding: 36px 0 34px;
    }
    .secTelbox .teltxt{
        font-size: var(--spFontSize15);
      letter-spacing: var(--spLetterSpacing15_1);
    }
    .secTelbox .telbox{
        font-size: var(--spFontSize30);
        margin-top: 18px;
    }
    .secTelbox .number{
        padding-bottom: 3px;
        padding-left: 40px;
    }
    .secTelbox .subtxt{
        font-size: var(--spFontSize11);
        line-height: var(--spLineHeight18_11);
        margin-top: 15px;
        letter-spacing: var(--spLetterSpacing0);
    }
    .secTelbox .checktxt{
        display: block;
        width: 205px;
        border: 1px solid #1b2328;
        font-size: var(--spFontSize11);
        line-height: var(--spLineHeight14_11);
        margin: 0 auto;
        margin-top: 16px;
        padding: 9px 0;
    }
    .secTelbox .telbox::before {
        width: 27px;
        height: 18px;
        left: 4px;
        top: calc(50% - 14px);
    }
}
@media only screen and (max-width:360px){
    .secTelbox .teltxt{
        font-size: var(--pcFontSize12);
    }
}


/* secList */
.secList{
    margin-top: 90px;
    padding: 0 50px;
}
.secList .tit{
    font-weight: bold;
    text-align: center;
    font-size: var(--pcFontSize17);
    line-height: var(--pcLineHeight36_17);
}

.secList .listTit{
    font-size: var(--pcFontSize20);
    font-weight: bold;
    color: #fff;
    background: #1b2328;
    margin-top: 93px;
    height: 80px;
    display: flex;
    align-items: center;
    position: relative;
    padding-left: 35px;
}
.secList .listTit::before{
    position: absolute;
    content: "";
    width:6px ;
    height: 6px;
    border-radius: 50%;
    left: 20px;
    top: calc(50% - 3px);
    background: #fff100;
}
.secList .list{
    padding: 0 100px;
    background: #fff;
}
.secList .item{
    background-image: linear-gradient(to right, #757575 1px, transparent 1px);
    background-size: 4px 1px;
    background-repeat: repeat-x;
    background-position: left bottom;
    display: flex;
    align-items: center;
    padding: 80px 0px;
}
.secList .item:last-child{
    background: none;
}
.secList .txtBox{
    width: calc(100% - 417px);
    padding: 12px 0 0 112px;
}
.secList .boxTit{
    font-weight: bold;
    font-size: var(--pcFontSize22);
    letter-spacing: var(--pcLetterSpacing22_2);
}
.secList .boxTxt{
    font-size: var(--pcFontSize17);
    line-height: var(--pcLineHeight36_17);
    margin-top: 18px;
    letter-spacing: var(--pcLetterSpacing17_1);
}
.secList .leftImg{
    padding-left: 12px;
}
.secList .spanTit{
    background: linear-gradient(transparent 70%, #fff100 70%, #fff100 100%, transparent 100%);
}
.secList .lastTxt{
    font-size: var(--pcFontSize17);
    line-height: var(--pcLineHeight36_17);
    margin-top: 92px;
    letter-spacing: var(--pcLetterSpacing17_1);
    font-weight: bold;
    text-align: center;
}
@media only screen and (max-width:767px){
    .secList{
        margin-top: 34px;
        padding: 0px;
    }
    .secList .tit{
        font-size: var(--spFontSize13);
        line-height: var(--spLineHeight28_13);
        letter-spacing: var(--spLetterSpacing13__1);
    }
    .secList .listTit{
        font-size: var(--spFontSize17);
        margin-top: 32px;
        height: 50px;
        padding-left: 35px;
    }
    .secList .listTit::before{
        left: 20px;
        top: calc(50% - 3px);
    }
    .secList .list{
        padding: 0 17.5px;
    }
    .secList .item{
        padding: 30px 0px 20px;
        display: block;
    }
    .secList .txtBox{
        width: 100%;
        padding: 29px 0 0 0px;
    }
    .secList .boxTit{
        font-size: var(--spFontSize15);
        letter-spacing: var(--pcLetterSpacing22_2);
    }
    .secList .boxTxt{
        font-size: var(--spFontSize13);
        line-height: var(--spLineHeight28_13);
        margin-top: 10px;
        letter-spacing: 0;
    }
    .secList .leftImg{
        padding-left: 0px;
        text-align: center;
    }
    .secList .leftImg img{
        width: auto;
        height: 136px;
    }
   
    .secList .lastTxt{
        margin-top: 33px;
        font-size: var(--spFontSize13);
        line-height: var(--spLineHeight28_13);
        letter-spacing: var(--spLetterSpacing13__1);
    }
}
@media only screen and (max-width:374px){
    .secList .tit {
        font-size: var(--spFontSize12);
    }
    .secList .lastTxt {
        font-size: var(--spFontSize12);
    }
}

/* secStep */
.secStep{
    position: relative;
    margin-top: 91px;
    padding: 90px 0 120px;
}
.secStep.lazyloaded{
    background: url(../img/catalog/bgStep.jpg) center top repeat;
}
.secStep .tit{
    text-align: center;
    font-weight: bold;
    color: #fff;
    font-size: var(--pcFontSize28);
    letter-spacing: var(--pcLetterSpacing28_2);
}
.secStep .span48{
    font-size: var(--pcFontSize48);
    position: relative;
    display: inline-block;
    padding: 0 10px;
}
.secStep .span48::before{
    position: absolute;
    content: "";

    border-radius: 50%;
    width: 49px;
    height: 49px;
    left: -1px;
    top: -4px;
    background: url(../img/catalog/iconNum.png) center top / cover;
}
.secStep .list{
    display: flex;
    padding: 98px 50px 0;
}
.secStep .item{
    background: #fff;
    border-radius: 5px;
    width: 30.77%;
    margin-right: 3.845%;
    min-height: 300px;
    position: relative;
    padding: 52px 0 0;
}
.secStep .item:last-child{
    margin-right: 0;
}
.secStep .item::before{
    position: absolute;
    content: "";
    width:12px;
    height: 20px;
    right: -30px;
    top: calc(50% - 11px);
}
.secStep .item.lazyloaded::before{
    background: url(../img/catalog/iconStep04.png) center top / cover;
}
.secStep .item:last-child::before{
    display: none;
}
.secStep .icon{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 70px;
    height: 70px;
    position: absolute;
    left: calc(50% - 35px);
    top: -30px;
    background: #fff;
    border-radius: 50%;
}
.secStep .top{
    font-size: var(--pcFontSize15);
    font-weight: bold;
    background: #063558;
    border-radius: 17px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 34px;
    width: 140px;
    margin: 0 auto 0;
    color: #fff;
}
.secStep .main{
    font-size: var(--pcFontSize24);
    font-weight: bold;
    text-align: center;
    margin-top: 34px;
}
.secStep .txt{
    font-size: var(--pcFontSize15);
   line-height: var(--pcLineHeight26_15);
    text-align: center;
    margin-top: 20px;
    min-height: 104px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.secStep .lastTxt{
    font-size: var(--pcFontSize17);
    line-height: var(--pcLineHeight50_17);
    font-weight: bold;
    color: #fff;
    text-align: center;
    margin-top: 132px;
    text-decoration: underline;
    text-underline-offset: 5px;
    letter-spacing: var(--pcLetterSpacing17_15);
}
@media only screen and (max-width:767px){
    .secStep{
        margin-top: 61px;
        padding: 62px 0 88px;
    }
    .secStep .tit{
        font-size: var(--spFontSize15);
        letter-spacing: var(--spLetterSpacing15_1);
    }
    .secStep .span48{
        font-size: var(--pcFontSize28);
        padding: 0 9px;
    }
    .secStep .span48::before{
        width: 30px;
        height: 30px;
        left: 2px;
        top: -3px;

    }
    .secStep .list{
        display:block;
        padding: 70px 5.335% 0;
    }
    .secStep .item{
        width: 100%;
        margin-right: 0%;
        min-height: auto;
        padding: 40px 0 33px;
    }
    .secStep .item:nth-child(n+2){
        margin-top: 70px;
    }
    .secStep .item::before{
        width:12px;
        height: 20px;
        right: unset;
        left: calc(50% - 6px);
        top: unset;
        bottom: -30px;
        transform: rotate(90deg);
    }
    .secStep .icon{
        left: calc(50% - 35px);
        top: -30px;
    }
    .secStep .icon img{
        width: auto;
        height: 30px;
    }
    .secStep .top{
        font-size: var(--spFontSize13);
        border-radius: 15px;
        height: 30px;
        width: 120px;
    }
    .secStep .main{
        font-size: var(--spFontSize15);
        margin-top: 20px;
    }
    .secStep .txt{
        font-size: var(--spFontSize13);
       line-height: var(--spLineHeight24_13);
        margin-top: 13px;
        min-height: auto;
    }
    .secStep .lastTxt{
        font-size: var(--spFontSize13);
        line-height: var(--spLineHeight32_13);
        margin-top: 92px;
        text-underline-offset: 4px;
        letter-spacing: var(--spLetterSpacing13_05);
    }
}
@media only screen and (max-width:359px){
    .secStep .txt {
        font-size: var(--spFontSize12);
    }
}

.secForm{
    margin-top: 0;
}
.secForm .stepList {
    margin: 87px auto 0;
}
@media only screen and (max-width:767px){
    .secForm{
        margin-top: 0;
    }
    .secForm .stepList {
        margin: 30px auto 0;
    }
    #mainwrapper {
        padding-top: 55px;
        position: relative;
      
    }
}