@charset "utf-8";
@import url("root.css");

/***************************************
------------- TOP MAIN IMG -------------
***************************************/
#mv {

}

.slider-area {
width: 1200px;
overflow: hidden;
margin: 0 auto;
}

.slider .slick-slide {
display: flex !important;
justify-content: center;
}

.slider img {
display: block;
height: auto;
}

.slick-dots {
text-align: center;
margin: 20px 0 0;
}

.slick-dots li {
display: inline-block;
margin: 0 5px;
}

.slick-dots li button:before {
font-size: 14px;
color: #dddddd; /* 非アクティブ */
}

.slick-dots li.slick-active button:before {
color: var(--base-color04);
}

@media (min-width: 600px) and (max-width: 1024px) {
  #mv {
    width: 100%;
    margin: 60px auto;
  }
  .slider-area {
    width: 100%;
    overflow: visible;
    margin: 0 auto;
  }

  .slider img {
    width: 100%;
    height: auto;
    display: block;
  }
  }
@media (max-width: 599px) {
  #mv {
    width: 100%;
    margin: 60px auto 0;
  }
  .slider-area {
    width: 100%;
    overflow: visible;
    margin: 0 auto;
  }

  .slider img {
    width: 100%;
    height: auto;
    display: block;
  }
}


/***************************************
------------- 相場 -------------
***************************************/
#souba{}

#souba .box{
margin: 50px auto 100px;
background: url("../img/bg.png")top left no-repeat;
background-position: center 30px;
background-size: calc(100% - 40px) auto;
padding:0 0 50px 0;
}

#souba .box_bg{
background: url("../img/souba_bg.png")top left no-repeat;
background-position: center top;
text-align: center;
background-size: 100%;
}

#souba .title_a{padding: 70px 0 0 0;}

#souba span{
font-size: 18px;
font-weight: 600;
color: var(--base-title_01);
text-align: center;
}

#souba .row{
margin: 20px auto 0;
width: 88%;
justify-content: center;
}
#souba .col_03{
width: calc((100% - 100px) / 3);
margin-right: 50px;
}
#souba .col_03:last-child {margin-right: 0;}

#souba .title{
border-radius: 4px 4px 0 0;
text-align: center;
padding: 10px 0;
color: var(--base-color03);
}

#souba .gold{background-color:#cebe80;}
#souba .sv{background-color:#9fa0a0;}
#souba .pt{background-color:#85b4d2;}

#souba .txt{
border-radius: 0 0 4px 4px;
text-align: center;
background-color: var(--base-color03);
font-size: 28px;
font-weight: 600;
padding:10px 0;
}

#souba .txt img{
vertical-align: middle;
margin: -2px 20px 0 0;
}

#souba .txt span{font-size:14px;}

@media (min-width: 600px) and (max-width: 1024px) {

}

@media (max-width: 599px) {
#souba{}

#souba .box{
margin: 30px auto 30px;
background-size:100%;
padding:0 0 30px 0;
}

#souba .box_bg{
background: url("../img/souba_bg_sp.png")top left no-repeat;
text-align: center;
background-size: 98%;
}
#souba .title_a{padding: 50px 0  0;}

#souba span{font-size: 16px;}

#souba .row{
margin: 20px auto 0;
width: 100%;
justify-content: center;
}

#souba .col_03{
width:90%;
margin: 0 auto 10px;
display: flex;
align-items: center;
}
#souba .col_03:last-child {margin: 0 auto;}

#souba .title{
width: 45%;
border-radius: 4px 0 0 4px;
text-align: center;
padding: 10px 0;

}


#souba .txt{
width:55%;
border-radius:0 4px 4px 0;
font-size: 20px;
padding:10px 0;
}

#souba .txt img{
margin: -2px 10px 0 0;
}

#souba .txt span{font-size:14px;}

}


/***************************************
------------- 挨拶 -------------
***************************************/
#greeting{
width: min(94%, 1200px);
margin: 0 auto;
}

#greeting .row{
justify-content: space-between;
}

#greeting .col{width: 42%;}
#greeting .col:nth-child(2){width: 58%;padding:0 0 0 50px; }

@media (min-width: 600px) and (max-width: 1024px) {
}

@media (max-width: 1024px) {
#greeting{
width:90%;
margin: 0 auto;
}


#greeting .col{width: 100%;order: 2;padding:20px 0;text-align: center;}
#greeting .col:nth-child(2){width: 100%;padding:0 0 0 0;order: 1;text-align: left;}


}
/***************************************
------------- アイテム -------------
***************************************/
#item{}

#item .row{
justify-content:flex-start;
margin: 50px auto 0;
width: min(94%, 1200px);
}

#item .col_05{
border:3px solid var(--base-color03);
background: linear-gradient(to bottom, #fffcf6 0%, #fff8f8 100%);
position: relative;
text-align: center;
padding:15px  0;
}

#item .col_05 a{
padding:15px 0;
}

#item .col_05::before {
content: "";
position: absolute;
top: -3px;
left: -3px;
width: 0;
height: 0;
border-top: 43px solid var(--base-color04);
border-right: 43px solid transparent;
}

#item h4{
font-size: 24px;
font-weight: 900;
color: var(--base-color04);
}
#item img{
width: 80%;
padding: 15px 0;
}

#item p{font-weight: 600;}
#item .link_a{margin: 20px auto 0;}


@media (min-width: 600px) and (max-width: 1024px) {
#item .row{width:90%;}
#item h4{font-size: 18px;}
#item p{font-size: 16px;}
}


@media (max-width: 599px) {
#item{}

#item .row{
margin: 30px auto 0;
width: 90%;
}

#item .col_05{
padding:10px  0;
}

#item .col_05 a{
padding:15px 0;
}


#item .col_05::before {
border-top: 20px solid var(--base-color04);
border-right: 20px solid transparent;
}

#item h4{font-size: 20px;}

#item img{
width: 80%;
padding: 15px 0;
}

#item p{line-height: 1.6;}
#item .link_a a{width: 80%; margin: 20px auto 0;}

}

/***************************************
------------- 買取方法 -------------
***************************************/
#kaitori {
width: min(94%, 1200px);
margin: 0 auto 0;
padding: 100px 0 0 0;
}

#kaitori .row {
margin: 50px auto;
}

#kaitori .col_03 {
flex: 1;
display: flex;
flex-direction: column;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
border-radius: 4px;
padding: 0 0 20px 0;
}

#kaitori .col_03 img{
border-radius: 4px 4px 0 0;
padding: 0 0 10px 0;
}

#kaitori .col_03 p{
width: 90%;
margin: 0 auto;
font-weight: 600;
}
#kaitori .service-text {flex: 1;}


#kaitori .link_a a{
width: 90%;
font-size: 18px;
margin: 30px auto 20px;
}


@media (min-width: 600px) and (max-width: 1024px) {
#kaitori .link_a a{
font-size: 16px;
margin:15px auto 10px;
}



}

@media (max-width: 1024px) {
#kaitori {
width:90%;
margin: 0 auto 0;
padding:50px 0 0 0;
}

#kaitori .row {
margin: 30px auto 15px;
}

#kaitori .col_03 {
flex: none;
width: 100%;
margin:0 0 15px 0; 
}

#kaitori .col_03 img{
border-radius: 4px 4px 0 0;
padding: 0 0 10px 0;

}

#kaitori .col_03 p{
width: 90%;
margin: 0 auto;
font-weight: 600;
}
#kaitori .service-text {flex: 1;}


#kaitori .link_a a{
width: 98%;
font-size: 18px;
margin: 0 auto 10px;
}

#kaitori .link_a a{
font-size: 18px;
}
}

/***************************************
------------- 買取実績 -------------
***************************************/
#result{}

#result .row{
margin: 50px auto 0;
width: min(94%, 1200px);
padding: 0 0;
}


#result .col_04{
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
border-radius: 4px;
background-color: var(--base-color03);
padding: 0 0 15px 0;
}

#result .col_04 img{
border-radius: 4px 4px 0 0;
padding: 0 0 10px 0;
width: 100%;
height: auto;
aspect-ratio: 19 / 12;
object-fit: cover;
}

#result .data{
color: var(--base-title_01);
font-size: 14px;
text-align: right;
width: 90%;
margin: 0 auto;
}

#result .cate{
color: var(--base-color03);
background-color: var(--base-color04);
font-size: 14px;
text-align:center;
width: 90%;
margin: 0 auto;
font-family: 'Noto Sans JP', sans-serif;
font-weight: 600;
}

#result .txt{
width: 90%;
margin: 15px auto 0;
line-height: 1.5; 
max-height: calc(1.5em * 4); 
overflow-y: auto;
color: var(--base-title_01);
}

#result i{
padding: 0 5px 0 0;
font-size: 90%;
}

#kaitori .link_a{
width: 90%;
font-size: 18px;
margin: 30px auto 0;
}

@media (min-width: 600px) and (max-width: 1024px) {
#result .row{
width: 90%;
padding: 0 0;
}

#result .link_a a{
width: 90%;
}
}

@media (max-width: 599px) {
#result{}

#result .row{
margin:30px auto 0;
width:90%;
padding: 0 0;
}


#result .col_04{
padding: 0 0 10x 0;
}

#result .col_04 img{}
#result .data{}
#result .cate{}

#result .txt{
margin: 10px auto 0;
}

#result i{}

#result .link_a a{
width: 80%;
}

}

/***************************************
------------- よくある質問 -------------
***************************************/
#faq {
width: min(94%, 1200px);
margin: 0 auto 0;
padding: 100px 0 0 0;
}

#faq .row {
margin: 50px auto;
}

#faq .col_03 {
border: 5px solid var(--base-color03);
background: linear-gradient(to bottom, #fffcf6 0%, #fff8f8 100%);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
border-radius: 4px;
padding: 15px 0;
}

#faq dl {
display: flex;
justify-content: space-between;
align-items:stretch;
margin: 0 auto;
width: 90%;
}
#faq dt {width: 14%;}
#faq dd {width: 86%;}


#faq .qa_q {border-bottom: 2px solid var(--base-color04);margin: 0 auto 20px;padding: 0 0 10px 0;}
#faq .qa_q dt{
font-size: 42px;
font-weight: 900;
color: var(--base-color04);
line-height: 1;
}

#faq .qa_q dd p{
color: var(--base-color04);
line-height: 1.6;
font-weight: 900;
}


#faq .qa_a dt{
font-size: 42px;
font-weight: 900;
color: var(--base-title_01);
line-height: 1;
}

#faq .qa_a dd p{
color: var(--base-title_01);
font-weight: 600;
}

@media (max-width: 1024px) {
#faq {
width:90%;
margin: 0 auto 0;
padding: 50px 0 0 0;
}

#faq .row {
margin: 30px auto;
}

#faq .col_03 {
width: 100%;
margin: 0 auto 20px;
}

#faq .col_03:last-child {margin: 0 auto 0;}


#faq dl {}
#faq dt {width: 14%;}
#faq dd {width: 86%;}


}

/***************************************
------------- news -------------
***************************************/

#news{}

#news .news_box{
width: min(94%, 1200px);
margin: 50px auto 0;
padding:50px 0 50px 0;
background-color: var(--base-color03);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

#news dl{
width: 92%;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-content: center;
border-bottom: 2px dotted #dddddd;
margin: 0 auto;
}

#news dt{
width: 12%;
text-align: left;
padding:20px 0;
box-sizing: border-box;
font-size: 16px;
font-family: 'Noto Sans JP', sans-serif;
text-align: center;
color: var(--base-title_01);
white-space: nowrap;
overflow: hidden;
text-overflow: clip;
}

#news dt i{
font-size:90%;
padding: 0 5px 0 0;
}

#news dd{
width:12%;
text-align: left;
padding: 20px;
box-sizing: border-box;
}
#news dd:nth-of-type(2n){
width:76%;
text-align: left;
padding: 20px 0 20px 20px;
box-sizing: border-box;
white-space: nowrap;
overflow: hidden;  
text-overflow: ellipsis; 
}

#news dd .cate{
display: inline-block;
color: var(--base-color03);
background-color: var(--base-color04);
font-size: 14px;
text-align: center;
margin: 0 auto;
font-family: 'Noto Sans JP', sans-serif;
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: clip;
padding: 0 20px;
}

#news dd a{transition: .25s ease;font-size: 18px;color: var(--base-title_01);}
#news dd a:hover{color: var(--base-color01);}

#news dd .cate01{background-color: var(--base-color01);}
#news dd .cate02{background-color: #00C495;}
#news dd .cate03{background-color: #0086AE}

@media (max-width: 1024px) {
#news{}

#news .news_box{
width:90%;
margin: 30px auto 0;
padding:10px 0 30px 0;
background-color: var(--base-color03);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

#news dl{
width: 90%;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
border-bottom: 2px dotted #dddddd;
margin: 0 auto;
min-width: 80px;
}

#news dt{
flex: 0 0 auto; 
min-width:120px;
text-align: left;
padding:10px 0 5px 0;
box-sizing: border-box;
font-size: 16px;
font-family: 'Noto Sans JP', sans-serif;
text-align:left;
}

#news dt i{}

#news dd{
flex: 1 1 auto; 
text-align: left;
padding:10px 0 5px 0;
box-sizing: border-box;
}
#news dd:nth-of-type(2n){
width:100%;
text-align: left;
padding:0 0 10px 0;
box-sizing: border-box;
white-space: nowrap;
overflow: hidden;  
text-overflow: ellipsis; 
}



}