/* TABLE OF CONTENTS:
 * 
 * 00 どのサイズでも共通で適用されるスタイル
 *    - ビルボード
 *    - 新着情報
 *    - 買取速報
 *    - バナー スライダー
 *    - CTA
 *    - 買取方法
 *    - 買取価格スライダー表示 切り替えタブ
 *    - 買取価格スライダー表示（kaitori-item.cssと同じもの）
 * 01 幅 768px 未満
 *    - 見た目調整
 *    - 買取速報
 *    - 買取方法
 * 02 幅 480px 以上
 * 03 幅 768px 以上
 *    - 買取速報
 *    - 買取方法
 * 04 幅 880px 以上
 *    - ヘッダ仕様変更
 * 05 幅 1072px 以上
 * 06 幅 1264px 以上
 * 07
 *    - ヘッダ仕様変更
 */

/* --------------------------------------------------------------------------------------------------------
   00
 *
 * どのサイズでも共通で適用されるスタイル
 */


  /* ビルボード */
  .site-main #mainImg {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 0;
  }
  .site-main #mainImg > div:nth-of-type(2) {
    background: #000034;
    padding: 1rem;
  }
  .site-main #mainImg > div:nth-of-type(2) * {
    color: #FFF;
  }
  /*ビルボード下の注釈*/
  div.bnr-caption{
    margin-top: 0.5em !important;
  }

  /* 新着情報 */
  #news dl {
    border: 3px #a59678 solid;
    border-radius: 6px;
  }
  #news dl dt {
    background: #a59678;
    color: #FFF;
    text-align: center;
    padding: 0.5em;
  }
  #news dl dd {
  }
  #news dl dd ul li {
    border-bottom: 1px #a59678 dotted;
    list-style: none;
    margin-top: 0.8em;
    padding-bottom: 0.8em;
  }
  #news dl dd ul li span {
    background: #8a7958;
    border-radius: 5px;
    color: #FFF;
    font-size: 0.8em;
    margin-right: 0.5em;
    padding: 0.1em 0.5em;
  }
  #news dl dd ul li a {
    color: #775d2c;
    text-decoration: none;
  }
  #news dl dd.more {
    font-size: 0.8em;
  }

    @media screen and (max-width: 767px) {
      #news dl dd ul li a {
        display: block;
      }
    } /* Eo max 767px */



  /* 買取速報 */
#newsflash {
  margin-bottom: 1em;
}
#newsflash h2 {
  background: #222;
  border-radius: 5px 5px 0 0;
  outline: 3px #E5E5E5 solid;
  color: #FFF;
  font-weight: bold;
  font-size: 18px;
  text-align: center;
  margin-bottom: 0;
  padding: 0.5em 0.3em;
}
#content .newsflash {
  background: #FFF;
  border: 3px #222 solid;
  border-radius: 0 0 5px 5px;
  outline: 3px #E5E5E5 solid;
  padding: 5px 10px;
}
#content .newsflash ul li {
  border-bottom: 1px #CCC dotted;
  list-style: none;
  padding: 5px 0;
}
#content .newsflash ul li .date span {
  font-size: 0.9em;
}
#content .newsflash ul li .type {
  border: 1px rgba( 0, 0, 0, 1 ) solid;
  border-radius: 5px;
  color: #FFF;
  display: inline-block;
  font-size: 0.9em;
  margin-right: 10px;
  padding: 0 5px;
}

/* 出張 */
#content .newsflash ul li .type.method1 {
  background: #c33;
}

/* 宅配 */
#content .newsflash ul li .type.method2 {
  background: #177db7;
}

/* 店頭 */
#content .newsflash ul li .type.method3 {
  background: #509f40;
}


/* 2023-07 改修--------------------------------------------------------------- */

/* バナー スライダー */
.priceup ul {
  list-style: none;
}

/* CTA */
.cta-bg {
  background-color: #ffe372;
}

/* 買取方法 */
/* 宅配買取 */
section.takuhai iframe {
  margin-bottom: 0;
}
/* 出張買取 */
section.syuccho .kanto {
  background-color: #909EA6;
  padding: 1rem 0.5rem;
} 
section.syuccho .kanto-text h4 {
  text-align: center;
  color: #213C4C;
  font-size: 1.3rem;
}
section.syuccho .kanto-text div {
  text-align: center;
}
section.syuccho .kanto-text a {
  background-color: #213C4C;
  padding: 0.5rem 1rem;
  color: #fff;
  text-decoration: none;
}
section.syuccho .kanto-area .area-link {
  display: block;
}
section.syuccho .kanto-area .area-link > div {
  width: auto;
}

/* 買取価格表 */
#content .price-list .dataTables_wrapper select,
#content .price-list td {
  color: initial;
}


/* 買取価格スライダー表示 切り替えタブ */
#price-list .choice-tab {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
}
#price-list .choice-tab li {

  background-color: #6b8a53;
  border-left: 5px #7a9c5f solid;
  border-top: 5px #7a9c5f solid;
  border-right: 5px #27361c solid;
  border-bottom: 5px #27361c solid;

  padding: 0.5em;
  cursor: pointer;
  font-size: min(4vw,1.5em);
  text-align: center;
  list-style: none;
  width: min( 45vw, 10em );
}
#price-list .choice-tab li h3 {
  margin-bottom: 0;
  color: #FFF;
}
#price-list .choice-tab li.active,
#price-list .choice-tab li:hover {
  opacity: 0.8;
}


/* 買取価格スライダー表示（kaitori-item.cssと同じもの） */
  .item-slider ul li {
    list-style: none;
  }
  .item-slider .item-wrapper {
    background: #e9e3d6;
    padding: min( 2vw, 1em );
    height: 100%;
  }
  .item-slider .item-wrapper .photo {
    text-align: center;
  }
  .item-slider .item-wrapper .maker {
    font-size: 0.8em;
    margin-top: 0.5em;
  }
  .item-slider .item-wrapper .product {
    line-height: 1.2em;
    margin-bottom: 0.5em;
  }
  .item-slider .item-wrapper .price {
    color: #b81a22;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .item-slider .item-wrapper .price > span {
    margin-left: 0.5em;
  }
  .item-slider .item-wrapper .price > span span {
    font-weight: bold;
    margin-left: auto;
  }

/* --------------------------------------------------------------------------------------------------------
   01
 *
 * 幅 768px 未満
 */
@media screen and (max-width: 767px) {

    /* 見た目調整 */
    #top-reason {
      margin-top: -2em !important;
    }

    /* 買取速報 */
    #content .newsflash ul {
      height: 270px;
    }

    /* 2023-07 改修--------------------------------------------------------------- */

    /* 買取方法 */
    /* 出張買取 */
    section.syuccho .kanto-text h4 {
      margin-top: 1rem;
    }
    section.syuccho .kanto-text div {
      padding-bottom: 1rem;
    }


}/* End max 767px */




/* --------------------------------------------------------------------------------------------------------
   02
 *
 * 幅 480px 以上
 */
@media screen and (min-width: 30em) {

    /* ここにスタイル */

}/* End 620px Mobile Large */



/* --------------------------------------------------------------------------------------------------------
   03
 *
 * 幅 768px 以上
 */
@media screen and (min-width: 48em) {

    /* 買取速報 */
    #newsflash {
      background: url(/img/top/topics-bg.gif);
      padding: 5px;
    }
    #content .newsflash h2 {
      font-size: 20px;
      font-size: 1.25rem;
    }
    #content .newsflash ul {
      height: 300px;
    }
    #content .newsflash ul li .nf-wrap {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
    }
    #content .newsflash ul li .nf-wrap > div + div {
      margin-left: 10px;
    }

    /* 2023-07 改修--------------------------------------------------------------- */

    /* 買取方法 */

    /* 宅配買取 */
    section.takuhai div:nth-of-type(2) {
      margin-left: 2rem;
    }
    /* 出張買取 */
    section.syuccho .kanto {
      display: flex;
      align-items: center;
      margin-left: 1rem;
    } 
    section.syuccho .kanto-area .area-link > div {
      margin-right: 1rem;
    }
    section.syuccho .kanto-text {
      width: 80%;
      margin: 0 1rem;
    }

    /* 店頭買取 */
    section.tento div:nth-child(2) {
      margin-left: 1rem;
    }
    
    




}/* End 740px Tablet Small */



/* --------------------------------------------------------------------------------------------------------
   04
 *
 * 幅 880px 以上
 */
@media screen and (min-width: 55em) {


    /* ヘッダ仕様変更 */
    #masthead .site-branding > .wrap .site-branding-any img,
    #masthead .site-branding > .wrap #mainImg img {
      vertical-align: bottom;
    }

    #masthead {
      position: relative;
    }
    #masthead .site-branding {
      padding: 0;
    }
    #masthead .custom-header {
      width: 342px;
      position: absolute;
      top: 0;
      left: 0;
    }
    #masthead .custom-header .wrap {
      max-width: 100%;
      padding: 0;
    }
    #masthead .site-branding > .wrap .site-branding-any {
      background: #FFF;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      text-align: center;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
    }
    #masthead .site-branding > .wrap .site-branding-any .site-util {
      -ms-flex-item-align: stretch;
          -ms-grid-row-align: stretch;
          align-self: stretch;
      background: #000034;
      padding: 0 0.5rem 1rem;
      width: 50%;
    }
    #masthead .site-branding > .wrap .site-branding-any .site-util * {
      color: #FFF;
    }
    #masthead .site-branding > .wrap .site-branding-any .site-logo {
      padding: 1.5rem 1rem;
      width: 100%;
    }
    #masthead .site-branding > .wrap .site-branding-any .site-logo + div {
      padding: 1rem;
      width: 100%;
    }
    #masthead .site-branding > .wrap .site-branding-text {
      display: none;
    }
    .navigation-top nav {
      margin-left: 0;
    }
    #masthead .navigation-top .wrap {
      max-width: 100%;
      margin-right: 0;
      margin-left: 0;
    }
    #top-menu {
      margin-right: 0;
      margin-left: 0;
    }
    #top-menu span.parent + div {
      margin-left: 0;
    }

}/* End 880px Tablet Large */



/* --------------------------------------------------------------------------------------------------------
   05
 *
 * 幅 1072px 以上
 */
@media screen and (min-width: 67em) {

    /* ここにスタイル */

}/* End 955px Desktop Small */



/* --------------------------------------------------------------------------------------------------------
   06
 *
 * 幅 1264px 以上
 */
@media screen and (min-width: 79em) {

    /* ここにスタイル */

}/* End 1100px Desktop Medium */



/* --------------------------------------------------------------------------------------------------------
 * Design
 */

  /* ヘッダ仕様変更 */
  @media screen and (min-width: 880px) and (max-width: 1300px) {
    #top-menu > li:nth-of-type(n+5) {
        display: none;
    }
    .site-branding-any .site-logo img {
      height: 12vh;
      max-height: 100%;
      width: auto;
    }
    #masthead .custom-header {
      width: 32vw;
    }
    .site-main #mainImg {
      min-height: 350px;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: end;
          -ms-flex-align: end;
              align-items: end;
    }
  } /* min880 - max1300 */


  /* ヘッダ仕様変更 */
  @media screen and (min-width: 1480px) {
    .site-branding-any .site-logo {
      padding-top: 3.6rem !important;
      padding-bottom: 3.6rem !important;
    }
  }/* End min 1480px */