@charset "utf-8";
/* CSS Document */

/* ====================================
買取の流れ
====================================== */
.flwLink { margin-bottom: 100px;}

.flwLkBtn {
    display: inline-block;
    width: 340px;
    height: 157px;
    margin-right: 25px;
    text-align: center;
}
@media screen and (max-width:1150px) {
    .flwLkBtn {
        width: 32.4%;
        margin-right: 1%;
    }
}
@media screen and (max-width:1000px) {
    .flwLkBtn {
        margin-right: 0.8%;
    }
}
.linkShop { margin-right: 0;}

.flwLkBtn a {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    padding-top: 33px;
    border-bottom: 20px solid #000;
    transition: all .3s ease-in-out;
}
.linkTak a { background-color: #759adf;}
.linkShtc a { background-color: #c5c434;}
.linkShop a { background-color: #ff9616;}

@media screen and (min-width:641px) {
    .flwLkBtn a:hover { opacity: 0.7;}
}

.flwLkBtn a:after {
    position: absolute;
    bottom: -13px;
    left: 50%;
    content: "";
    width: 8px;
    height: 8px;
    border-right-width: 2px;
    border-right-style: solid;
    border-bottom-width: 2px;
    border-bottom-style: solid;
    transform: translateX(-50%) rotate(45deg);
}
.linkTak a:after { border-color: #759adf;}
.linkShtc a:after { border-color: #c5c434;}
.linkShop a:after { border-color: #ff9616;}

.flwLkBtn .tabTtl {
    font-size: 2.2rem;
    font-weight: bold;
    letter-spacing: 0.1em;
}

.flwLkBtn .tabTtl:before {
    content: "";
    display: block;
    height: 44px;
    margin: 0 auto 9px;
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: 100%;
}
.linkTak .tabTtl:before {
    width: 50px;
    background-image: url("../img/common/icon_takuhai02.png");
}
.linkShtc .tabTtl:before {
    width: 50px;
    background-image: url("../img/common/icon_shutcho.png");
}
.linkShop .tabTtl:before {
    width: 44px;
    background-image: url("../img/common/icon_shop.png");
}
.ktrInTtl span {
    color: #fff;
}

/* 共通 */
.flwSeHead { margin-bottom: 20px;}

.flwSeTtl {
    display: inline;
    font-size: 3.4rem;
    font-weight: bold;
    letter-spacing: 0.08em;
}

.flwSeTtl:before {
    content: "";
    display: inline-block;
    height: 44px;
    margin-right: 18px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100%;
    vertical-align: -7px;
}

.flwSeHead .commonBtn {
    width: 272px;
    padding: 15px 15px 15px 30px;
    font-size: 1.6rem;
    letter-spacing: 0.1em;
}

.flwSeHead .commonBtn:after {
    width: 22px;
    height: 22px;
}

.flwSeHead .seHeadBtn { float: right;}

.stpSe {
    padding: 20px;
    margin-bottom: 20px;
    border-width: 4px;
    border-style: solid;
}

.stpSeL {
    float: left;
    width: 272px;
}

.stpSeR {
    float: right;
    width: 730px;
}
@media screen and (max-width:1150px) {
    .stpSeR { width: 66%;}
}

.stpInHead { margin-bottom: 20px;}

.stpNum,
.stpItem {
    display: inline-block;
    vertical-align: middle;
}

.stpNum {
    margin-right: 14px;
    font-size: 2.0rem;
    font-weight: bold;
    letter-spacing: 0.04em;
    color: #fff;
}

.stpItem {
    font-size: 2.4rem;
    font-weight: bold;
    letter-spacing: 0.04em;
}

.stpInTxt {
    font-size: 1.6rem;
    line-height: 1.5;
    letter-spacing: 0.04em;
}

.telGuide .telNum {
    font-size: 3.6rem;
    font-weight: bold;
}
.telGuide .telNum:before {
    content: "";
    display: inline-block;
    width: 20px;
    height: 26px;
    margin-right: 7px;
    background: url("../img/common/icon_phone02.png") no-repeat 0 0;
    background-size: 100%;
}

.telGuide .telGuideTxt {
    font-size: 1.4rem;
    font-weight: bold;
    letter-spacing: 0.06em;
}
@media screen and (max-width:1000px) {
    .telGuide .telNum { font-size: 3.3rem;}
    
    .telGuide .telNum:before {
        width: 18px;
        height: 24px;
    }
    
    .telGuide .telGuideTxt { font-size: 1.3rem;}
    
}

.cvArea .telGuide,
.cvArea > p {
    display: inline-block;
    vertical-align: middle;
}

@media screen and (max-width:1150px) {
    .cvArea  .telGuide {
        display: block;
        margin-bottom: 15px;
    }
}

@media screen and (max-width:1000px) {
    .cvArea  .telGuide {
        display: inline-block;
        margin-bottom: 0;
    }
}

.cvArea .btnLine,
.cvArea .btnMail {
    display: block;
    width: 235px;
    padding-top: 18px;
    padding-bottom: 18px;
    font-size: 2.3rem;
    font-weight: bold;
    color: #fff;
    letter-spacing: 0.14em;
    border-width: 3px;
    border-style: solid;
    border-radius: 6px;
    transition: all .3s ease-in-out;
}
@media screen and (max-width:1100px) {
    .cvArea .btnLine,
    .cvArea .btnMail { width: 242px;}
}
@media screen and (max-width:1000px) {
    .cvArea .btnLine,
    .cvArea .btnMail {
        display: inline-block;
        width: 176px;
        padding: 16px 0 !important;
        text-align: center;
        font-size: 2.0rem;
    }
}

.cvArea .btnLine {
    padding-right: 16px;
    padding-left: 45px;
    background-color: #00b900;
    border-color: #0e770e;
}

@media screen and (min-width: 641px) {
    .cvArea .btnLine:hover { background-color: #00d100;}
}

.cvArea .btnMail {
    padding-right: 16px;
    padding-left: 28px;
    letter-spacing: 0.06em;
    background-color: #da2533;
    border-color: #000;
}
@media screen and (min-width:641px) {
    .cvArea .btnMail:hover { background-color: #f72a3a;}
}

.cvArea .telGuide,
.cvArea > p:nth-of-type(1) { margin-right: 6px;}
@media screen and (max-width:1000px) {
    .cvArea .telGuide,
    .cvArea > p:nth-of-type(1) { margin-right: 3px;}
}

.cvArea .btnLine:after,
.cvArea .btnMail:after {
    content: "";
    display: inline-block;
    width: 22px;
    height: 22px;
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: 100%;
    vertical-align: -2px;
}

.cvArea .btnLine:after {
    margin-left: 20px;
    background-image: url("../img/flow_arrow01.png");
}
.cvArea .btnMail:after {
    margin-left: 15px;
    background-image: url("../img/flow_arrow02.png");
}
@media screen and (max-width:1000px) {
    .cvArea .btnLine:after,
    .cvArea .btnMail:after {
        width: 18px;
        height: 18px;
    }
    
    .cvArea .btnLine:after { margin-left: 10px;}
    
    .cvArea .btnMail:after { margin-left: 8px;}
}

.btnKon {
    width: 270px;
    padding: 13px 14px 13px 27px;
    margin: auto;
    font-size: 1.6rem;
}

.btnKon:after {
    width: 22px;
    height: 22px;
}

.case1 { margin-bottom: 16px;}
.case2 { margin-bottom: 30px;}

.case .caseTtl {
    display: inline-block;
    padding: 10px 15px;
    margin-bottom: 11px;
    font-size: 1.6rem;
    letter-spacing: 0.04em;
    color: #fff;
    background-color: #000;
}

.stpSeKome {
    clear: both;
    line-height: 1.6;
    letter-spacing: 0.04em;
}

.stpSe4Top {
    padding-bottom: 24px;
    margin-bottom: 24px;
    background: url("../img/common/border_dashed.png") repeat-x left bottom;
}
    
.jnbSeIn { margin-top: 30px;}

.jnbSeL,
.jnbSeR { width: 487px;}
@media screen and (max-width:1100px) {
    .jnbSeL,
    .jnbSeR { width: 100%;}
}

.jnbSeL { float: left;}
@media screen and (max-width:1100px) {
    .jnbSeL { margin-bottom: 40px;}
}
.jnbSeR { float: right;}

.jnbBoxTtl {
    margin-bottom: 20px;
    font-size: 2.0rem;
    font-weight: bold;
    letter-spacing: 0.08em;
}

.jnbBox {
    padding: 20px;
    margin-bottom: 20px;
    background-color: #f2f2f2;
}

.jnbBox li {
    font-size: 1.6rem;
    line-height: 1.6;
    letter-spacing: 0.08em;
    text-indent: -1em;
    padding-left: 1em;
}

.junKome { line-height: 1.5;}

.junTxt {
    font-size: 1.6rem;
    line-height: 1.5;
    letter-spacing: 0.08em;
}

.ktrImp {
    margin-bottom: 20px;
    font-size: 2.0rem;
    font-weight: bold;
    letter-spacing: 0.1em;
}

.ktrInBotTxt {
    margin-bottom: 26px;
    font-size: 1.6rem;
    line-height: 1.5;
    letter-spacing: 0.04em;
}

.btnDl {
    width: 270px;
    padding: 13px 14px 13px 27px;
    margin: auto;
    font-size: 1.6rem;
}

.btnDl:after {
    width: 22px;
    height: 22px;
}


.flwNotes {
    padding: 30px 25px;
    background-color: #f2f2f2;
}

.flwNotes .notesTtl {
    margin-bottom: 15px;
    font-size: 2.0rem;
    font-weight: bold;
    letter-spacing: 0.08em;
}

.flwNotes li {
    padding-left: 1em;
    font-size: 1.6rem;
    line-height: 1.8;
    text-indent: -1em;
    letter-spacing: 0.08em;
}

#flwSe1,
#flwSe2 { margin-bottom: 100px;}

#flwSe1 .flwSeTtl { color: #759adf;}
#flwSe2 .flwSeTtl { color: #c5c434;}
#flwSe3 .flwSeTtl { color: #ff9616;}

#flwSe1 .flwSeTtl:before {
    width: 50px;
    background-image: url("../img/flow_icon01.png");
}
#flwSe2 .flwSeTtl:before {
    width: 50px;
    background-image: url("../img/flow_icon02.png");
}
#flwSe3 .flwSeTtl:before {
    width: 44px;
    background-image: url("../img/flow_icon03.png");
}

#flwSe1 .stpSe { border-color: #759adf;}
#flwSe2 .stpSe { border-color: #c5c434;}
#flwSe3 .stpSe { border-color: #ff9616;}

#flwSe1 .stpNum {
    padding: 13px 21px 13px 23px;
    background: url("../img/flow_step_bg01.png") no-repeat center center;
}
#flwSe2 .stpNum {
    padding: 13px 21px 13px 23px;
    background: url("../img/flow_step_bg02.png") no-repeat center center;
}
#flwSe3 .stpNum {
    padding: 13px 21px 13px 23px;
    background: url("../img/flow_step_bg03.png") no-repeat center center;
}

.stpSe1 .stpInTxt { margin-bottom: 19px;}
    
.stpSe3 .stpSeR > p.stpInTxt { margin-bottom: 22px;}

#flwSe1 .stpSe3 .stpImg { margin-bottom: 20px;} 

#flwSe1 .stpSe3 .commonBtn {
    padding: 15px;
    font-size: 1.6rem;
    letter-spacing: 0.1em;
}

#flwSe1 .stpSe3 .commonBtn:after {
    width: 22px;
    height: 22px;
    margin-left: 8px;
}

#flwSe1 .stpSe4 .stpInTxt { margin-bottom: 16px;}

.ktrInTop { margin-bottom: 60px;}

#flwSe1 .stpSe5 .stpInTxt { margin-bottom: 18px;}

#flwSe1 .stpSe5 .stpSeKome { margin-bottom: 18px;}

.btnSgw {
    width: 270px;
    padding: 13px 14px 13px 27px;
    margin: auto;
    font-size: 1.6rem;
}

.btnSgw:after {
    width: 22px;
    height: 22px;
}

#flwSe1 .stpSe6 .stpInTxt { margin-bottom: 15px;}

#flwSe1 .stpSe6 .txtBox {
    padding: 12px 0;
    font-size: 1.6rem;
    font-weight: bold;
    text-align: center;
    letter-spacing: 0.04em;
    border: 4px solid #ffc815;
}

.stpSe7 .stpInTxt { margin-bottom: 16px;}

.stpInTxt .assist { font-size: 1.3rem;}

.tabMark {
    position: absolute;
    top: 12px;
    right: 16px;
    width: 50px;
    height: 50px;
}

.markImg {
    width: 100%;
    height: auto;
}