/* TABLE OF CONTENTS:
 * 
 * 01 どのサイズでも共通で適用されるスタイル
 *    - イントロ
 *    - 鍵の出張サービス
 *    - 対応状況
 *    - 防犯に関する相談窓口
 *    - -画像化時適用スタイル-
 * 02 幅 480px 未満
 *    - -画像化時適用スタイル-
 * 02 幅 480px 以上
 * 03 幅 768px 以上
 *    - 鍵の出張サービス
 *    - 対応状況
 *    - 防犯に関する相談窓口
 * 04 幅 880px 以上
 * 05 幅 1072px 以上
 *    - 防犯に関する相談窓口
 * 06 幅 1264px 以上
 */

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


/* イントロ */
  .outer.concept {
    background: #80d9f1 url(../img/contents/ci-intro-bg.jpg) center bottom no-repeat;
    background-size: cover;
  }
  .outer.concept h1 {
    margin: 0;
    padding: 30px 0;
  }


/* 鍵の出張サービス */
  .key-trouble {
    background: #f9e5e5 url(../img/contents/ci-key-trouble-bg.png) right center no-repeat;
    background-size: contain;
    border: 5px #cf5454 solid;
    border-radius: 3px;
    margin: 0;
    padding: 1em;
  }
  .key-trouble dt {
    background: #cf5454;
    border-radius: 2em;
    color: #FFF;
    font-size: 1.2em;
    text-align: center;
    margin: 10px auto 20px;
    padding: 0 0.5em;
    max-width: 800px;
  }
  .key-trouble dd {
    font-weight: bold;
    margin: 0 auto 10px;
    max-width: 880px;
    padding-left: 1.8em;
    position: relative;
  }
  .key-trouble dd:before {
    font-family: "Font Awesome 5 free";
    font-weight: 400;
    font-size: 1.4em;
    content: "\f14a";
    color: #cf5454;
    position: absolute;
    top: -0.3em;
    left: 0;
  }


/* 鍵交換 鍵の種類・料金紹介 */


/* 鍵交換の費用と相場 */
  .market-list > div {
    background-color: #f1f1f1;
    padding: 20px;
  }
  .market-list > div p {
    margin-bottom: 0.5em;
  }
  .market-list > div .img-l .image {
    width: 25%;
  }
  .market-list > div .img-l .cont {
    width: 69%;
  }
  .market-list > div li {
    color: #cc3333;
    font-weight: bold;
    list-style: none;
  }
  .market-list .list-box p {
    border-bottom: 1px solid #ccc;
  }



/* 対応状況 */
  .visit > div > div {
    margin-bottom: 0.8em;
  }
  .visit .list-wrap {
    background: #cde8ff;
    border: 3px #2b88d9 solid;
    border-radius: 3px;
    padding: 1em 1em 1.5em;
    position: relative;
  }
  .visit .list-wrap h3 {
    text-align: center;
    margin-bottom: 0;
  }
  .visit .list-wrap h3:before {
    font-family: "Font Awesome 5 free";
    font-weight: 900;
    font-size: 1.2em;
    color: #004b8c;
    display: inline-block;
    margin-right: 0.5em;
    vertical-align: middle;
  }
  .visit .list-wrap.area h3:before {
    content: "\f5b6";
    -webkit-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    transform: rotateY(180deg);
  }
  .visit .list-wrap.station h3:before {
    content: "\f239";
  }
  .visit .list-wrap h3.sbtitle:hover,
  .visit .list-wrap h3.sbtitle3:hover {
    cursor: pointer;
  }
  .visit .list-wrap h3.sbtitle:after,
  .visit .list-wrap h3.sbtitle3:after {
    font-family: "Font Awesome 5 free";
    font-weight: 900;
    font-size: 18px;
    content: "\f13a";
    color: #004b8c;
    line-height: 1em;
    margin: 0 auto;
    position: absolute;
    bottom: 2px;
    right: 0;
    left: 0;
    height: 1em;
    width: 1em;
  }
  .visit .list-wrap h3.sbtitle.open:after,
  .visit .list-wrap h3.sbtitle3.open:after {
    -webkit-transform: rotateX(180deg);
    -ms-transform: rotateX(180deg);
    transform: rotateX(180deg);
  }
  .visit .list-wrap ul {
    background: #FFF;
    border-radius: 5px;
    padding: 10px;
  }
  .visit .list-wrap ul li {
    border-bottom: 1px #333 dotted;
    display: inline-block;
    text-align: center;
    list-style: none;
    padding: 0 0.5em;
    min-width: 32%;
  }

  .visit .local {
    background: #FFF;
    margin-bottom: 1.6em;
    text-shadow: 
      #fff 1px 0px,  #fff -1px 0px,
      #fff 0px -1px, #fff 0px 1px,
      #fff 1px 1px , #fff -1px 1px,
      #fff 1px -1px, #fff -1px -1px,
      #fff 1px 1px,  #fff -1px 1px,
      #fff 1px -1px, #fff -1px -1px,
      #fff 1px 1px,  #fff -1px 1px,
      #fff 1px -1px, #fff -1px -1px;
  }
  .visit .local h3 {
    font-size: 18px;
    margin: 0;
    text-align: center;
  }
  .visit .local .city-about {
    background: url(../img/bg/town-bg.png) no-repeat;
    background-size: cover;
    padding: 1em;
  }
  .visit .local .city-about h3 {
    font-size: 24px;
  }
  .visit .local .city-about h3 + p {
    font-size: 18px;
    margin-bottom: 0.5em;
    text-align: center;
  }
  .visit .local .city-about h3 + p:first-letter {
    text-transform: uppercase;
  }
  .visit .local .city-about h3 + p:before,
  .visit .local .city-about h3 + p:after {
    content: "-";
    margin: 0 0.3em;
  }

/* 防犯に関する相談窓口 */
  .visit .local .city-bouhan {
    background: url(../img/bg/police-bg.png) no-repeat;
    background-position: top left;
    background-size: 125%;
    border-top: 1px dashed #333;
    padding: 1em;
  }
  .visit .local .city-bouhan.key {
    background: url(../img/bg/key-bg.jpg) no-repeat;
    background-position: 60% top;
  }
  .visit .local .city-bouhan h3 {
    font-size: 24px;
    margin-bottom: 0.5em;
  }
  .visit .local .city-bouhan div section {
    background: rgba(255,255,255,0.6);
    border: 1px solid;
    border-radius: 8px;
    padding: 15px;
  }
  .visit .local .city-bouhan div section h4 {
    border-bottom: 2px solid #2082d7;
    margin-bottom: 0.8em;
  }
  .visit .local .city-bouhan div section ul li {
    font-size: 14px;
    list-style: none;
    padding-left: 2.6em;
  }
  .visit .local .city-bouhan div section ul li i {
    background: #2b88d9;
    border-radius: 5px;
    color: #fff;
    padding: 5px 7px;
    margin: 0 0.6em 0 -2.4em;
    text-shadow: none;
  }
  .visit .local .city-bouhan div section ul li.tell i {
    padding: 5px;
  }
.visit .local #tanashi-po {
    border-bottom: 2px solid #2082d7;
    margin-bottom: 0.8em;
    text-align: left;
    font-size: larger;
}
#tanashicho-visit .city-bouhan{
    border-top: 0;
    margin-bottom: 0px;
}

/* 鍵屋紹介 */
    #main .shop h3 {
      font-size: 24px;
      text-align: center;
    }
    #main .shop h3:before {
      content: "\f54e";
      color: #2b88d9;
      font-family: "Font Awesome 5 free";
      font-weight: bold;
      margin-right: 0.3em;
    }
    #main .shop table {
      border-collapse: collapse;
      margin-bottom: 15px;
      padding: 0;
      table-layout: fixed;
    }
    #main .shop table th,
    #main .shop table td {
      border: none;
      box-sizing: border-box;
      display: block;
      line-height:1.6em;
      padding: 5px 0;
      width: 100%;
    }
    #main .shop table th {
      display: none;
    }
    #main .shop table td {
      line-height:1.6em;
      text-align:left;
      vertical-align:middle;
    }
    #main .shop table td:first-child {
      font-weight: bold;
    }
    #main .shop table td:last-child {
      padding-bottom: 15px;
    }
    #main .shop table a {
      font-weight:normal;
    }

/* -画像化時適用スタイル- */
.tmp-replace img {
  width: 100%;
}

.heading-w {
    margin-right: calc((50vw - 50%)*-1);
    margin-left: calc((50vw - 50%)*-1);
    width: 100vw;
}

/*
.outer.tmp-concept {
    background: #80d9f1 url(//www.key-unlock.jp/wp-content/themes/twentyseventeench/css/../img/contents/ci-intro-bg.jpg) center top no-repeat;
    background-size: cover;
    margin-bottom: 3rem;
}
    */
/*.outer.conceptと置き換え（背景なしスタイル）*/
.outer.tmp-concept {
  padding-bottom: 0;
  background: none;
}

h3[id*=-heading],
p[id*=-heading] {
    background-color: #2082d7;
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.05' fill-rule='evenodd'%3E%3Cpath d='M0 20L20 0H10L0 10M20 20V10L10 20'/%3E%3C/g%3E%3C/svg%3E");
    color: #fff;
    text-align: center;
    margin-right: calc((50vw - 50%)*-1);
    margin-left: calc((50vw - 50%)*-1);
    padding-top: 32px;
    padding-bottom: 24px;
    width: 100vw;
}

div.outer>section.qa{
  margin-top: 0;
}

  /* -地域の情報内sectionをdiv.area-infoに置き換えたことによるスタイル- */
  .visit .local .city-bouhan div div.area-info h4 {
      border-bottom: 2px solid #2082d7;
      margin-bottom: .8em;
  }

  .visit .local .city-bouhan div div.area-info ul li {
      font-size: 14px;
      list-style: none;
      padding-left: 2.6em;
  }

  .visit .local .city-bouhan div div.area-info ul li i {
      background: #2b88d9;
      border-radius: 5px;
      color: #fff;
      padding: 5px 7px;
      margin: 0 .6em 0 -2.4em;
      text-shadow: none;
  }

  .visit .local .city-bouhan div div.area-info ul li.tell i {
      padding: 5px;
  }

  .visit .local .city-bouhan div div.area-info {
      background: rgba(255,255,255,.6);
      border: 1px solid;
      border-radius: 8px;
      padding: 15px;
  }

  .visit>div>div.area-info {
      margin-bottom: 0;
  }


  /* H4からpに格下げした見出し（防犯窓口／ホームセンター） */
    .visit .local .city-bouhan div div.area-info p {
      border-bottom: 2px solid #2082d7;
      margin-bottom: .8em;
      font-weight: 700;
      font-size: 1.125rem;
      line-height: 1.4;
  }

  /* H2からpに格下げした見出し（対応エリア） */
  p[id*=-area-heading] {
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 1.3;
  }

  /* H3からpに格下げした見出し（対応エリア） */
  .visit .list-wrap p {
      text-align: center;
      margin-bottom: 0;
      font-weight: 700;
      padding-top: 0;
  }

  .visit .list-wrap.area p:before {
      content: "\f5b6";
      -webkit-transform: rotateY(180deg);
      -ms-transform: rotateY(180deg);
      transform: rotateY(180deg);
  }

  .visit .list-wrap.station p:before {
      content: "\f239";
  }

  .visit .list-wrap p:before {
      font-family: "Font Awesome 5 free";
      font-weight: 900;
      font-size: 1.2em;
      color: #004b8c;
      display: inline-block;
      margin-right: .5em;
      vertical-align: middle;
  }

  .visit .list-wrap p.sbtitle:after,
  .visit .list-wrap p.sbtitle3:after {
      font-family: "Font Awesome 5 free";
      font-weight: 900;
      font-size: 18px;
      content: "\f13a";
      color: #004b8c;
      line-height: 1em;
      margin: 0 auto;
      position: absolute;
      bottom: 2px;
      right: 0;
      left: 0;
      height: 1em;
      width: 1em;
}

/* --------------------------------------------------------------------------------------------------------
   02
 *
 * 幅 480px 未満
 */
@media screen and (max-width: 479px) {

    /* ここにスタイル */
    /* -画像化時適用スタイル- */
    /* -画像化サービス料金ブロックのmargin調整- */
    .tmp-price-sp {
      margin-top: -3em;
    }

}



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

    /* ここにスタイル */

}/* End 620px Mobile Large */


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

  /* #mainImg {
    min-height: 590px!important;
  } */

    /* ビルボード */
      #mainImg > div {
        padding: 20px;
        text-align: center;
      }
      .exchange #mainImg > div {
        background-image: url(../img/contents/ci-exchange-bil-bg.png);
        background-repeat: no-repeat;
        background-size: contain;
      }


    /* イントロ */
      .outer.concept.nocontact {
        background: linear-gradient(rgba(255, 255, 255, .6), rgba(255, 255, 255, .2)), url(//www.key-unlock.jp/wp-content/themes/twentyseventeench/css/../img/contents/ci-intro-bg.jpg) center bottom no-repeat;
        background-size: cover;
      }


    /* 鍵交換 鍵の種類・料金紹介 */
      .outer.price.price-table {
        background: linear-gradient(rgba(255, 255, 255, .2), rgba(255, 255, 255, .8)), url(//www.key-unlock.jp/wp-content/themes/twentyseventeench/img/contents/price-bgl.jpg) left center no-repeat,url(//www.key-unlock.jp/wp-content/themes/twentyseventeench/img/contents/price-bgr.jpg) right center no-repeat;
      }


    /* 鍵の出張サービス */
      .key-trouble dt {
        font-size: 1.8em;
      }
      .key-trouble dd {
        font-size: 1.2em;
      }


    /* サービス料金表 */
      .key-price + .catch {
        font-size: 1.2rem;
      }


    /* 鍵交換の費用と相場 */
      .market-list > div p.accent {
        font-size: 18px;
      }


    /* 対応状況 */
      .visit > div > div {
        margin-bottom: 1.6em;
      }
      .visit .list-wrap ul li {
        min-width: 18.8%;
      }
      .visit .local .img-r .image {
        margin-bottom: 0;
      }
      .visit .local {
        border: 3px #2b88d9 solid;
        border-radius: 3px;
        margin-bottom: 1.6em;
      }
      .visit .local h3 {
        font-size: 32px;
        text-align: center;
      }
      .visit .local .city-bouhan div section h4 {
        font-size: 20px;
      }

/* 鍵屋紹介 */
      #main .shop table th,
      #main .shop table td,
      #main .shop table td:last-child {
        border: 1px solid #ccc;
        display: table-cell;
        padding:10px 15px;
      }
      #main .shop table th {
        background-color: #f0f8ff;
        display: table-cell;
        text-align: center;
        vertical-align:middle;
        width:43%;
      }
      #main .shop table th:first-child {
        max-width: 300px;
        width: 25%;
      }
      #main .shop table td {
        background: #fff;
      }
      #main .shop table td:first-child {
        font-weight: normal;
      }



/* 防犯に関する相談窓口 */
      .visit .local .city-bouhan {
        background-position: top right;
        background-size: auto;
      }
      .visit .local .city-bouhan.key {
        background-position: top left;
      }
      .visit .local .city-bouhan h3 br {
        display: none;
      }

    /* 出張サービス一覧の隙間埋め */
    .key-service {
        position: relative;
    }
    .key-service:before {
        height: 240px;
    }


}/* End 768px 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) {

    /* ビルボード */
      #mainImg > div {
        background-image: url(../img/contents/ci-bil-bg.png),url(../img/top/bil-1-bgr.png);
        background-position: left center, right center;
        background-repeat: no-repeat;
      }
      .exchange #mainImg > div {
        background-image: url(../img/contents/ci-exchange-bil-bg.png),url(../img/top/bil-1-bgr.png);
      }


}/* End 1100px Desktop Medium */



/* --------------------------------------------------------------------------------------------------------
   07
 *
 * その他 任意幅
 */
 
@media screen and (min-width: 1500px) {
  .qa {
    position: relative;
  }
  .qa:after {
    content: "";
    background: url(../img/contents/qa-image.png) center top no-repeat;
    display: block;
    height: 400px;
    width: 262px;
    position: absolute;
    bottom: -3.5em;
    right: -262px;
  }
}/* End min 1500px */