/* =========================================================
 PC用
========================================================= */
@media screen and (min-width: 769px) {

  /* Chatアイコン */

  .chatBox {
    clear: both;
    display: block;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    width: 1040px;
    z-index: 10;
  }

  .chat-icon {
    display: inline-block;
    padding: 20px;
    background-color: #0f0f0f;
    border-radius: 50%;
    /* position: fixed;
    right: 30px; */
    /* bottom: 60px; */
    position: absolute;
    left: 1063px;
    bottom: 220px;
    /* cursor: pointer;
    transition: ease-in-out 0.2s; */
    z-index: 1000;
    /* border: 3px solid #fff8aa; */
  }

  .chat-icon i {
    /* font-size: 35px;
    color: #fff8aa;
    cursor: pointer;
    transform: scale(0.95);
    transition: ease-in-out 0.2s; */
    font-size: 35px;
    color: #fff8aa;
    cursor: pointer;
    transform: scale(0.95);
    transition: ease-in-out 0.2s;
    position: fixed;
    /* bottom: 50px; */
    /* bottom: 210px; */
    /* right: 5%; */
    padding: 20px;
    background-color: #0f0f0f;
    border-radius: 50%;
    border: 3px solid #fff8aa;
  }

  .chat-icon i.show-bottom {
    bottom: 50px;
  }

  .chat-icon i.show-up {
    bottom: 210px;
  }

  .chat-icon:hover {
    box-shadow: 0px 10px 10px -6px rgba(0, 0, 0, 0.3);
  }

  .chat-icon:hover i {
    transform: scale(1.1);
  }

  .chat-frame {
    /* opacity: 0;
    visibility: hidden; */
    display: none;
    height: 550px;
  }

  .chat-frame.show-frame {
    display: block;
    position: fixed;
    /* bottom: 125px; */
    bottom: 5%;
    right: 30px;
    /* height: 550px; */
    height: 665px;
    /* width: 350px; */
    width: 399px;
    box-shadow: 0px 0px 24px -8px rgba(93,93,93,0.6);
    z-index: 9999;
    border-radius: 8px;
  }

  .chat-frame.show-frame .container {
    height: 380px!important;
  }

  #middleWrapper {
    z-index: unset;
  }

}

/* =========================================================
 スマホ用
========================================================= */
@media screen and (max-width: 768px) {
 .isFixed {
  overflow: hidden;
 }
  /* チャット部分 */
  .chat-icon {
    display: inline-block;
    padding: 4%;
    background-color: #0f0f0f;
    border-radius: 50%;
    position: fixed;
    right: 2vw;
    bottom: 20vw;
    cursor: pointer;
    z-index: 19;
    border: 3px solid #fff8aa;
  }

  .chat-icon i {
    color: #fff8aa;
    font-size: 6vw;
  }

  .chat-frame {
    display: none;
  /*
    height: 97%;
    position: fixed;
    width: 96%;
    right: 2%;
    top: 1rem;
    box-shadow: 0px 0px 24px -8px rgb(93 93 93 / 60%);
    z-index: 20;
  */
  }

  .chat-frame.show-frame {
    display: block;

    position: fixed;
    width: 96vw;
    right: 2vw;
    height: 98%;
    top: 1%;
    box-shadow: 0px 0px 24px -8px rgb(93 93 93 / 60%);
    z-index: 20;
    /* bottom: 125px; */
    /* bottom: 0; */
    /* right: 30px; */
    /* height: 550px; */
    /* height: 600px; */
    /* width: 350px; */
    /* width: 95%; */
    /* height: 90vh; */
  }

  .chat-frame.show-frame .page-title {
    display: block;
    position: fixed;
    /* bottom: 125px; */
    top: 0;
    right: 30px;
    height: 550px;
    width: 350px;
    box-shadow: 0px 0px 24px -8px rgb(93 93 93 / 60%);
  }

  .chat-frame.show-frame .content-wrapper {
    display: block;
    position: fixed;
    /* bottom: 125px; */
    bottom: 0;
    right: 30px;
    height: 550px;
    width: 350px;
    box-shadow: 0px 0px 24px -8px rgb(93 93 93 / 60%);
  }
  /* チャット部分ここまで */

}