/* TABLE OF CONTENTS:
 *
 * 00 どのサイズでも共通で適用されるスタイル
 *    - ビルボード
 *    - イントロ調整
 *    - 買取サービスのタイプ
 *    - 全域対応
 *    - 近くの店舗
 *    - ゆかりのある作家紹介
 *    - 関連情報
 * 01 幅 768px 未満
 *    - ビルボード
 *    - 関連情報
 * 02 幅 480px 以上
 * 03 幅 768px 以上
 *    - ビルボード
 *    - 関連情報
 * 04 幅 880px 以上
 * 05 幅 1072px 以上
 * 06 幅 1264px 以上
 */

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

  /* イントロ調整 */
  .outer:has( [id$="-intro"] ) {
    padding-bottom: 0 !important;
  }

  /* ビルボード */
  #primary .site-main #mainImg {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    padding: 1em;
  }

  /* 買取サービスのタイプ */
  .service-head {
    text-align: center;
    margin-top: 1.5rem;
  }
  .service-type {
    display: flex;
    justify-content: center;
    gap: min( 4vw, 2rem);
  }
  .service-type li {
    list-style: none;
  }

  /* 全域対応 */
  .zen-iki {
    background-color: #efefef;
    padding: 1rem;
  }
  .zen-iki h3 {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
  }
  .zen-iki h3:before {
    content: "";
    background-color: #666;
    display: block;
    height: 1px;
    flex: 1;
    margin-right: 1em;
  }
  .zen-iki h3:after {
    content: "";
    background-color: #666;
    display: block;
    height: 1px;
    flex: 1;
    margin-left: 1em;
  }
  .city-list {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 0;
    max-height: 6em;
    overflow-y: auto;
  }
  .city-list li:not(:last-child):after {
    content: "、";
  }

  /* 近くの店舗 */
  .nearby-store {
    margin-top: 2rem !important;
  }
  .nearby-store h3 {
    background-color: #316745;
    color: #FEFEFE;
    text-align: center;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
  }
  .nearby-store .message {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
  }
  .nearby-store .staff-avatar {
    aspect-ratio: 1 / 1;
    background-color: #EEE;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    margin-right: 0.5rem;
    width: 60px;
  }
  .nearby-store .staff-avatar:before {
    content: "";
    font-family: "Font Awesome 5 free";
    font-weight: 900;
    content: "\f007";
    font-size: 30px;
    opacity: 0.5;
  }

  .nearby-store .col-1-2 th {
    background-color: #316745;
    border: 2px #fff solid;
    color: #f5f5f5;
    font-weight: 400;
    font-size: 1rem;
    text-align: center;
    padding: 1rem;
    width: 8em;
  }
  .nearby-store .col-1-2 td {
    background-color: #f7f7f7;
    border: 2px #fff solid;
    font-size: 1rem;
    padding: 1rem;
  }



  /* ゆかりのある作家紹介 */
  .conne-item {
    background-color: #FFF;
    padding-bottom: 1rem;
    height: 100%;
  }
  .conne-item h3 {
    background-color: #D5C8A0;
    font-weight: normal !important;
    text-align: center;
    margin-bottom: 1rem;
    padding: 1rem;
  }
  .conne-item h3 .name {
    font-size: 1.5em;
  }
  .conne-item h3 .b-d {
    font-size: 0.5em;
  }
  .conne-item h3 + div.img-c {
    margin-bottom: 0;
  }
  .conne-item h3 + div.img-c img {
    vertical-align: bottom;
  }
  .conne-item h3 ~ * {
    margin-right: 1rem;
    margin-left: 1rem;
  }
  .conne-item h4 {
    background-color: #D5C8A0;
    border-radius: 0.25em;
    font-weight: normal !important;
    margin-top: 1rem;
    padding: 0.5em;
  }
  .conne-item dt {
    font-size: 1rem;
  }
  .conne-item dd {
    margin: 0;
  }



  /* 関連情報 */
  section[id$="-local-information"] h3 {
    background: #e9e4d4;
    border-radius: 5px;
    padding: .5em;
  }
  section[id$="-local-information"] ul {
    list-style: none;
    margin: 0 auto 2rem !important;
    width: calc( 100% - 2rem );
  }



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

  /* ビルボード */
  #primary .site-main #mainImg {
    background-image: url(../img/bg/pre-bilbg-sp.webp);
    aspect-ratio: 39 /35;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }
  .site-main #mainImg p.message {
    margin-top: 1.5em;
    margin-bottom: 0;
    width: 100%;
  }



  /* 関連情報 */
  section[id$="-local-information"] ul li {
    border-bottom: 1px rgba( 0,0,0,0.3 ) dashed;
    padding-bottom: .8rem;
  }


}/* End max767px */



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

    /* ここにスタイル */


}/* End 620px Mobile Large */



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

  /* ビルボード */
  #primary .site-main #mainImg {
    background-image: url(../img/bg/pre-bilbg-pc.webp);
  }

  /* 関連情報 */
  .outer:has( [id$="-local-information"] ) {
    background-image: url(../img/bg/ci-local-information-l.png), url(../img/bg/ci-local-information-r.png);
    background-position: left center, right center;
    background-repeat: no-repeat;
    background-size: auto 100%;
  }

}/* End 740px Tablet Small */



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

    /* ここにスタイル */

}/* 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 */