@charset "utf-8";
/* CSS Document */
:root {
--bkColor:#000;
--primaryColor:#C20000;
--secondaryColor:#172758;
--lineColor:#98BBE6;
--yellowColor:#FFFF03;
--whiteColor:#fff;
--aColor:#FF7F00;
--shadowColor:rgba(0, 0, 0, 0.25);
}
/*========= ▼reset ===============*/
/* ブラウザのUAスタイルシートのすべてのスタイルを削除します、displayは除く */
*:where(:not(iframe, canvas, img, svg, video):not(svg *)) {all: unset;display: revert;}
/* box-sizingの優先値 */
*, *::before, *::after {box-sizing: border-box;}
/* リストのスタイル（箇条書き・番号）を削除します */
ol,ul {list-style: none;}
/* 画像がコンテナを超えないようにするため */
img {max-width: 100%;}
/* テーブルのセル間のスペースを削除します */
table {border-collapse: collapse;}
/*========= ▲reset ===============*/
*{box-sizing: border-box;}
a {
transition: all .35s;
-webkit-transition: all .35s;
-moz-transition: all .35s;
text-decoration: none;
cursor: pointer;
}

#PCtrade-in {overflow: hidden;font-family:  "Noto Sans JP", sans-serif;font-optical-sizing: auto; font-weight: 400;font-style: normal;line-break: strict;word-wrap: break-word;word-break: break-all!important;line-height: 1.8;color: var(--bkColor);max-width: 2040px;margin: auto;background: var(--whiteColor);font-feature-settings: "palt";}

.font_small {font-size: 80%;}
.font_ss{font-size: 70%;}
.font_sss{font-size: 62%;}
.font_large {font-size: 130%;}
.font_ll{font-size: 155%;}
.line_center {text-align: center;}
.line_right{text-align: right;}
.line_left{text-align: left;}
.font_bold{font-weight: bold;}
.font_red {color: var(--secondaryColor);}
img {width: auto;max-width: 100%;vertical-align: bottom;}
.font_14 { font-size: clamp(11px, 0.9vw, 14px); }
.font_15 { font-size: clamp(12px, 0.95vw, 15px); }
.font_16 { font-size: clamp(13px, 1vw, 16px); }
.font_17 { font-size: clamp(14px, 1.1vw, 17px); }
.font_18 { font-size: clamp(15px, 1.15vw, 18px); }
.font_19 { font-size: clamp(16px, 1.2vw, 19px); }
.font_20 { font-size: clamp(17px, 1.25vw, 20px); }
.font_20 { font-size: clamp(18px, 1.4vw, 22px); }
.font_24 { font-size: clamp(18px, 1.5vw, 24px); }
.font_26 { font-size: clamp(19px, 1.65vw, 26px); }
.font_30 { font-size: clamp(20px, 1.9vw, 30px); }
.font_32 { font-size: clamp(22px, 2vw, 32px); }
.font_36 { font-size: clamp(22px, 2.25vw, 36px); }
.font_38 { font-size: clamp(24px, 2.4vw, 38px); }
.font_42 { font-size: clamp(24px, 2.65vw, 42px); }

/*========= ▼Salseforce用 ===============*/
#CONTENTS, body:not(.noGlobal) #CONTENTS {margin-left: 0;padding: 0;}
#FOOTER{margin-left: 0;}
#PAGEBODY{padding-bottom: 0;}
.includeSCT .proFlex .item{box-shadow: 0 3px 6px var(--shadowColor);}
.includeSCT .proFlex .item:hover{transform:translateY(-5px);box-shadow: 0 5px 10px var(--shadowColor);}
.includeSCT .name{text-align:left;line-height: 1.5;}
.includeSCT .tag{align-content: flex-start;}
#PCtrade-in ul.action {display: none;}
#PCtrade-in .includeSCT .item{height: auto !important;transition: all .35s;border-radius: 10px;}/*カードの高さ調節*/
#PCtrade-in .includeSCT .maker{display: none;}
#PCtrade-in .includeSCT .tag{display: none;}
#PCtrade-in .includeSCT .kanbai .item:hover{
  transform: none;
}

#PCtrade-in .includeSCT .tag .stockLabel .outStock{
    background: red;
    color: #fff;
}
.includeSCT{
    margin-bottom: 0;
    padding-bottom: 0;
}
.includeSCT .cont{
    padding-bottom: 0;
}
.includeSCT .splide .splide__slide{
    padding-bottom: 0;
    padding-top: 0;
}
.includeSCT .cta a{
    background-color: var(--primaryColor);
}
#PAGEBOTTOM .targetTop{
    z-index: 999;
}
#PCtrade-in h1, #PCtrade-in h2, #PCtrade-in h3, #PCtrade-in h4, #PCtrade-in h5, #PCtrade-in h6{
    font-family:  "Noto Sans JP", sans-serif;
}

/*========= ▲Salseforce用 ===============*/
/*========= LoadingのためのCSS ===============*/
.loader-wrap {
	position: fixed;
	display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100svh;
    background: var(--secondaryColor);
    z-index: 999;
}
.loader {
width: 70px;
aspect-ratio: 1;
display: grid;
border: 4px solid #0000;
border-radius: 50%;
border-right-color: #fff;
animation: l15 1s infinite linear;
}
.loader::before,
.loader::after {    
content: "";
grid-area: 1/1;
margin: 2px;
border: inherit;
border-radius: 50%;
animation: l15 2s infinite;
}
.loader::after {
margin: 8px;
animation-duration: 3s;
}
@keyframes l15{ 
100%{transform: rotate(1turn)}
}
/*========= ▲LoadingのためのCSS ===============*/


section {position: relative;margin: 0 auto;padding: 4% 0 0;}
.sec-inner {position: relative;max-width: 1250px; width: 90%; margin: 0 auto;z-index: 2;}
.white-box01 {padding: 1.2em;max-width: 660px;width: 90%;background: rgba(255,255,255,0.65);text-align: center;margin: auto;}
#sec01 {position: relative;overflow: hidden;padding: 0;z-index: 0;}
#sec01 img {width: 100%;}

.pLead{
    font-size: clamp(19px, 1.75vw, 28px);
    text-align: center;
    width: 60%;
    margin: auto;
}
.leadNotice{
    font-size: clamp(13px, 1vw, 16px);
    display: block;
    text-align: right;
    margin-top: 7px;
}

.benefit{
    position: relative;
    margin: 2% auto 0;
}
.benefitUl{
    display: flex;
    justify-content: center;
    gap:75px;
}
.benefitUl > li{
    flex-basis: 40%;
    border: solid 3px var(--lineColor);
    border-radius: 10px;
    padding: 1em;
}
.flexLi{
    display: flex;
}
.flexIcon{
    flex-basis: 24%;
    text-align: center;
}
.flexIcon > img{
    width: 80%;
}
.flexTxt{
    flex-basis: 74%;
    margin-left: 2%;
}
.flexTxt dt{
    font-size: clamp(18px, 1.4vw, 22px);
    font-weight: 600;
    color: var(--secondaryColor);
    margin-bottom: 0.5em;
}
.flexTxt dd{
    font-size: clamp(14px, 1.1vw, 17px); 
}
hgroup{
    padding: 1em 0;
    text-align: center;
    position: relative;
}
hgroup::after{
    content: "";
    height: 6px;
    background-color: var(--primaryColor);
    width: 70px;
    display: inline-block;
    position: absolute;
    bottom: 5px;
    left: calc(50% - 35px);
}
hgroup h2{
   display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    font-size: clamp(22px, 2vw, 32px);
    font-weight: 600;
}

hgroup h2::before,
hgroup h2::after{
    background-color: var(--secondaryColor);
    content: "";
    height: 2px;
    flex-grow: 1;
}
hgroup h2::before{
    margin-right: 0.5em;
}
hgroup h2::after{
    margin-left: 0.5em;
}
.flow{
    margin: 3% auto;
}
.flowUl{
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap:60px;
}
.flowUl > li{
    position: relative;
    flex-basis: calc((100% - 210px) / 3);
    border: solid 5px var(--lineColor);
    padding: 1em 1.5em;
    border-radius: 10px;
}
.flowUl > li:not(:last-child)::after{
    position: absolute;
    content: "";
    border-left: solid 40px var(--primaryColor);
    border-top: solid 60px transparent;
    border-bottom: solid 60px transparent;
    top: 50%;
    transform: translateY(-50%);
    right: -55px;
}
.stepNo figure{
    width: 28%;
    margin: 1% auto;
}
.stepTxt{
    margin: 5% auto;
    font-size: clamp(14px, 1.25vw, 20px);
    line-height: 1.5;
    display: flex;
    align-items: center;
}
.stepIllust figure{
    width: 90%;
    margin: auto;
}
.flowUl > li:nth-last-child(3) .stepIllust figure{
    width: 80%;
}
.stepLink{
    text-align: center;
    font-size: clamp(15px, 1.25vw, 20px);
    font-weight: 500;
}
.stepLink a{
    color: var(--primaryColor);
    text-decoration: underline;
    display: inline-block;
}
.btnArea{
    margin: 7% auto;
}
.btnArea a{
    width: 85%;
    display: block;
    background: transparent linear-gradient(179deg, #ED1717 0%, #9D0000 100%);
    padding: 0.7em;
    box-shadow: 0px 3px 6px var(--shadowColor);
    color: var(--whiteColor);
    font-size: clamp(23px, 2.4vw, 38px);
    font-weight: 600;
    text-align: center;
    border-radius: 50vh;
    margin: auto;
    max-width: 1000px;
}
.btnArea a figure{
    display: inline-block;
    width: 7%;
    vertical-align: text-bottom;
    margin-right: 1%;
}
.btnArea a .fa-circle-chevron-right{
    margin-left: 2%;
}

#sec04{
    padding: 2.5% 0 5%;
    background: var(--primaryColor);
}
#sec04 hgroup::after{
    content: "";
    height: 6px;
    background-color: var(--yellowColor);
    width: 70px;
    display: inline-block;
    position: absolute;
    bottom: 5px;
    left: calc(50% - 35px);
}
#sec04 hgroup h2{
    color: var(--whiteColor);
}

#sec04 hgroup h2::before,
#sec04 hgroup h2::after{
    background-color: var(--whiteColor);
    content: "";
    height: 2px;
    flex-grow: 1;
}
.aboutDelete{
    background: var(--whiteColor);
    border-radius: 5px;
    padding: 2em 3em;
    position: relative;
    margin-top: 5%;
}
.aboutDelete_inner{
    font-size: clamp(16.5px, 1.45vw, 23px);
    width: 80%;
}
.abIllust{
    position: absolute;
    width: 15%;
    top: 10%;
    right: 3%;
}
#sec05{
    background: url("feature_PCtrade-in/bg1.jpg?$staticlink$");
    padding-bottom: 5%;
}
.FAQ{
    margin: 5% auto;
}
.FAQ_inner{
    background: var(--whiteColor);
    border-radius: 5px;
    padding: 2em 3em;
    box-shadow: 3px 6px 10px var(--shadowColor);
}
.FAQ_inner dl{
    margin: 1.7em;
    padding-bottom: 1.7em;
}
.FAQ_inner dl:not(:last-child){
    border-bottom: solid 1px var(--lineColor);
}
.FAQ_inner dt{
    position: relative;
    font-size: clamp(15px, 1.5vw, 24px);
    font-weight: 500;
    padding-left: 2em;
    margin-bottom: 0.6em;
}
.FAQ_inner dd{
    position: relative;
    margin-left: 2em;
    font-size: clamp(14px, 1.4vw, 22px);
    padding-left: 2em;
}
.FAQ_inner dt::before{
    content: "Q.";
    padding: 5px;
    color: var(--primaryColor);
    display: inline-block;
    position: absolute;
    left: 0;
    top: -12px;
    font-weight: 500;
    font-size: clamp(20px, 1.9vw, 30px);
}
.FAQ_inner dd::before{
    content: "A.";
    padding: 5px;
    color: var(--aColor);
    display: inline-block;
    position: absolute;
    left: 0;
    top: -6px;
    line-height: 1.4;
    font-size: clamp(19px, 1.75vw, 28px);
}
.btnArea2{
    margin: 8% auto 3%;
}
.btnUl{
    display: flex;
    justify-content: center;
    gap:30px;
}
.btnUl > li{
    max-width: 520px;
    flex-basis: calc((100% - 30px) / 2);
}
.btnUl > li img {
    filter: drop-shadow(3px 3px 6px var(--shadowColor));
}
.btnArea2 a{
    display: block;
}




@media (any-hover: hover) {
/*:hover はここに書く*/
.stepLink a:hover{
    color: var(--aColor);
        transform: translateY(-2px);

}
    .btnArea a:hover{
        transform: translateY(-3px);
        opacity: 0.9;
        box-shadow: 0px 6px 12px var(--shadowColor);
    }
        .btnArea2 a:hover{
        transform: translateY(-3px);
        opacity: 0.9;
    }
    .btnUl > li a:hover img {
    filter: drop-shadow(3px 6px 12px var(--shadowColor));
}




}

.pad-sp {display: none !important;}
.sp-only {display: none!important;}
.pad-cam {display: none !important;}


/************************************************************/@media screen and (max-width: 820px) {
    .pLead{
        width: 82%;
    }
    .benefitUl{
        gap:30px;
    }
    .benefitUl > li{
        flex-basis: 48%;
    }
    .flowUl{
        gap:30px;
    }
    .flowUl > li{
        flex-basis: calc((100% - 90px) / 3);
    }
    .flowUl > li:not(:last-child)::after{
        border-left: solid 20px var(--primaryColor);
        border-top: solid 40px transparent;
        border-bottom: solid 40px transparent;
        right: -31px;
    }
    .abIllust{
        width: 18%;
        top: 16%;
    }
    
    
.pad-only {display: block !important;}
.pad-pc {display: block !important;}
.pc-only {display: none !important;}
.sp-only {display: none !important;}
}
/************************************************************/@media screen and (max-width: 768px) {

}
/************************************************************/@media screen and (max-width: 700px) {

    .pLead{
        width: 100%;
        text-align: left;
    }
    .benefitUl{
        gap:20px;
        flex-direction: column;
    }
    .flow{
        margin: 9% auto;
    }
    .flowUl{
        gap:20px;
    }
    .flowUl > li {
        flex-basis: calc((100% - 40px) / 2);
        padding: 0.7em;
    }
    .stepNo figure{
        width: 42%;
    }
    .flowUl > li:not(:last-child)::after{
        border-left: solid 15px var(--primaryColor);
        border-top: solid 30px transparent;
        border-bottom: solid 30px transparent;
        right: -23px;
    }
    .benefit{
        width: 92%;
    }
    .btnArea a{
        width: 100%;
        border-radius: 20px;
        line-height: 1.4;
    }
    .btnArea a figure{
        width: 12%;
    }
    .aboutDelete{
        padding: 1em 1.5em;
    }
    .aboutDelete_inner{
        width: 100%;
        line-height: 1.5;
        margin-bottom: 30%;
    }
    .abIllust{
        top: auto;
        bottom: 1%;
        width: 29%;
        left: 50%;
        transform: translate(-50%, 0);
    }
    .FAQ_inner{
        padding: 2em 1.5em;
    }
    .FAQ_inner dl{
        margin: 0;
        margin-bottom: 1.7em;
    }
    .FAQ_inner dt{
        line-height: 1.6;
    }
    .FAQ_inner dd{
        line-height: 1.5;
    }
    .FAQ_inner dl:last-child{
        margin-bottom: 0;
        padding-bottom: 0;
    }
    #sec04{
        padding: 2.5% 0 12%;
    }
    .btnArea{
        margin-bottom: 12%;
    }
    .btnArea2{
        margin: 12% auto 8%;
    }
    .btnUl{
        flex-direction: column;
    }

    
.pad-sp {display: block !important;}
.pc-only {display: none !important;}
.sp-only {display: block !important;}
.pad-cam {display: none !important;}
.pad-pc {display: none !important;}
}