@charset "utf-8";

    :root {
      --smrj-red: #e0481d;
      --esd-yellow: #fff951;
/*      --esd-blue: #58b8e0;*/
      --esd-blue: #2E3D8A;
      --esd-blue-dark: #3583a9;
      --esd-blue-light: #e7fcfd;
      --esd-blue-soft: #def1f9;
      --mamoru-blue: #00b7ff;
    }

    body {
      overflow: hidden;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      touch-action: none;
      position: fixed;
      right: 0;
      left: 0;
      top: 0;
      bottom: 0;
      font-family: 'Roboto', 'Kosugi Maru', -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
    }

    p, .field, textarea, .font-aa {
      transform: rotate(0.001deg) !important;
    }

    .navbar {
      background-color: var(--esd-blue);
      box-shadow: 0 0 2px 0.125rem #80808024;
    }

    .navbar-item, .navbar-item:hover {
      background-color: var(--esd-blue);
      color: #fff;
    }

    .navbar-link {
      background-color: var(--esd-blue) !important;
      color: #fff;
    }

    .navbar-item.is-large {
      font-size: 1.2rem;
      font-weight: 700;
    }
    @media screen and (max-width: 800px) {
    .navbar-item.is-large {
      font-size: 0.95rem;
    }
    }
    #navbarRightColumn {
      margin-left: auto;
      max-height: 55px;
      padding-left: 0;
    }

    #navbarRightColumn .navbar-item {
      margin: 0 5px;
    }

    .restart-button {
      font-size: 0.75rem;
      border-style: solid;
      border-color: white;
      border-width: 1px;
    }

    .button.is-primary {
      background-color: var(--smrj-red);
      border-color: var(--smrj-red);
      color: #fff;
    }

    .button.is-primary.is-disabled,
    .button.is-primary[disabled] {
      background-color: #dbdbdb;
      border-color: #dbdbdb;
      color: #7a7a7a;
      box-shadow: none;
    }

    .button.is-primary.is-inverted.is-outlined {
      background-color: transparent;
      border-color: #fff;
      color: #fff;
    }

    .button.is-primary.is-inverted.is-outlined:hover {
      background-color: rgba(255, 255, 255, 0.15);
      color: #fff;
    }

    .button.is-disabled,
    .button[disabled] {
/*      opacity: 0.6;*/
      opacity: 0.9;
      cursor: not-allowed;
      pointer-events: none;
    }

    .section {
      padding: 2rem 1.5rem;
    }

    .pin {
      position: fixed;
      right: 0;
      left: 0;
    }

    .pin-to-top {
      top: 0;
      z-index: 10;
    }

    .column {
      padding: .75rem 3rem;
    }

    @media screen and (max-width: 800px) {
      .column {
        padding: .75rem;
      }
    }

    .pin-to-center {
      position: fixed;
      right: 0;
      left: 0;
      top: 3.25rem;
      bottom: calc(var(--vh, 1vh) * 4);
      max-width: 920px;
    }

    @media screen and (min-width: 920px) {
      .pin-to-center {
        margin-left: calc((100vw - 920px) / 2);
      }
    }

    .media.has-content-center {
      align-items: center !important;
    }

    .title.is-4 {
      font-size: 1.5rem;
      line-height: 1;
    }

    .box {
      padding: 0.5rem;
    }

    #chatContentCenter {
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    .chat-area-format {
      overflow: auto;
      margin-top: 5px;
      background-color: rgba(255, 255, 255, 0.96);
      -webkit-overflow-scrolling: touch;
      flex: 1;
      min-height: 320px;
    }

    .textarea-parts {
      display: flex;
      margin-bottom: 10px;
    }

    .parts-input {
      flex-grow: 1;
      margin-right: 10px;
    }

    .parts-button {
      margin-left: auto;
      margin-top: -2px;
    }

    .mobi {
      display: inline;
      margin-left: 0;
    }

    .textarea.is-focused {
/*      border-color: var(--smrj-red);
      box-shadow: 0 0 0 0.125em var(--smrj-red);*/
border-color: #666;
box-shadow: 0 0 0 0.125em #666;
    }

    .textarea#chatInput {
      overflow: hidden;
      font-size: 16px;
/**/border-radius: 0;
      color:#000;
      background-color:#fff;

      transform: none !important;
    }

    @media screen and (max-width: 414px) {
      .textarea#chatInput {
        padding-left: 5px;
      }
      .textarea#chatInput::placeholder {
        font-size: 0.8rem;
        white-space: nowrap;
        line-height: 2;
      }
    }

    .inputNote {
      margin-top: 0.5%;
      font-size: 16px;
    }

    @media screen and (max-width: 910px) {
      .inputNote {
        font-size: 15px;
      }
    }

    @media screen and (max-width: 414px) {
      .inputNote {
        font-size: 10px;
      }
    }

    #inputTextInfo {
      display: flex;
      justify-content: center;
      margin-top: 3px;
      -webkit-user-select: none; /* Safari, Chrome, Edge */
      -moz-user-select: none;    /* Firefox */
      user-select: none;
    }

    #submitChat {
      height: 50px;
    }

    img#shibaAdvisor {
      width: 475px;
      margin-top: 15px;
    }

    img#mobiImg {
      right: -15px;
      z-index: 1;
      position: relative;
      width: 65px;
      height: 65px;
      display: inline-block;
      vertical-align: middle;
    }

    img#mobiImgMobile {
      right: -10px;
      z-index: 1;
      position: relative;
      width: 45px;
      height: 45px;
      max-height: 45px;
      display: none;
    }

    .button#mobiBtn {
      border-style: solid;
      border-color: white;
      border-width: 1px;
      display: inline-block;
      vertical-align: middle;
    }

    .button#mobiBtnMobile {
      font-size: 0.75rem;
      border-style: solid;
      border-color: white;
      border-width: 1px;
      display: none;
      margin-right: 2%;
    }

    @media screen and (max-width: 751px) {
      img#mobiImg {
        display: none;
      }

      .button#mobiBtn {
        display: none;
      }

      img#mobiImgMobile,
      .button#mobiBtnMobile {
        display: inline-block;
        vertical-align: middle;
      }
    }

    .typing-indicator span {
      height: 15px;
      width: 15px;
      float: left;
      margin: 0 1.5px;
      background-color: #9E9EA1;
      display: block;
      border-radius: 50%;
      opacity: 0.4;
    }

    .typing-indicator span:nth-child(1) { animation: 1s blink infinite .3333s; }
    .typing-indicator span:nth-child(2) { animation: 1s blink infinite .6666s; }
    .typing-indicator span:nth-child(3) { animation: 1s blink infinite .9999s; }

    @keyframes blink {
      50% { opacity: 1; }
    }

    .balloon-ancestor {
      overflow: hidden;
      min-height: 96px;
    }

    .balloon-parent--response {
      position: relative;
      top: calc(96px * 0.4);
      margin-bottom: calc(96px * 0.5);
      margin-left: calc(96px + 16px);
    }

    .balloon-parent--customer {
      position: relative;
/*      top: calc(96px * 0.4);*/
      top: 12px;
      margin-bottom: calc(96px * 0.5);
/*      margin-right: calc(96px + 16px);*/
      margin-right: 120px;
      text-align: right;
    }

    .balloon-parent--customer > * {
      text-align: initial;
    }

    @media screen and (max-width: 751px) {
      .balloon-parent--response {
        top: 8px;
        margin-bottom: 13px;
        margin-left: 8px;
        clear: both;
      }
      .balloon-parent--customer {
        top: 8px;
        margin-bottom: 13px;
        margin-right: 8px;
        clear: both;
      }
    }

    .balloon--response,
    .balloon--mobiop,
    .balloon--customer {
      display: inline-block;
      position: relative;
      color: black;
      filter: drop-shadow(4px 4px 6px rgb(128,128,128));
      border: solid 1px;
      border-radius: 12px;
      overflow-wrap: break-word;
      padding: 20px;
/*      max-width: calc(100% - 113px);*/
      max-width: calc(100% - 16px);
    }

    .balloon--response {
      border-color: gray;
      background-color: white;
    }

    .balloon--mobiop {
      border-color: var(--esd-blue);
      background-color: var(--esd-blue-soft);
/**/      min-height: 70px;
background-color: #FFF;
    }

    .balloon--customer {
      max-width: calc(100% - 10px - 96px);
      border-color: var(--smrj-red);
      background-color: #FFF;
      text-align: left;
/**/      min-height: 70px;
      display: inline-flex;
      align-items: center;
    }

    .balloon--response::after {
      content: "";
      display: inline-block;
      position: absolute;
      top: 2px;
      width: 11px;
      height: 22px;
      border: solid 1px gray;
      transform: scale(1.3, 0.5) rotate(-26deg);
      border-right-width: 0;
      border-bottom-width: 0;
      background-color: white;
      left: -7px;
    }

    .balloon--mobiop::after {
      content: "";
      display: inline-block;
      position: absolute;
      top: 6px;
      width: 48px;
      height: 55px;
      background-image: url(../../public/images/balloontip_sp.svg);
      background-repeat: no-repeat;
      left: -48px;
    }

    .balloon--customer::after {
      content: "";
      display: inline-block;
      position: absolute;
      top: 6px;
      width: 48px;
      height: 55px;
      background-image: url(../../public/images/balloontip_cs.svg);
      background-repeat: no-repeat;
      right: -48px;
    }

    @media screen and (max-width: 414px) {
      .balloon--response {
        padding: 9px;
      }
      .balloon--response::after {
        top: -7px;
        width: 23px;
        height: 13px;
        transform: scale(0.7, 1) rotate(27deg);
        left: 12px;
      }
      .balloon--mobiop::after {
        top: -7px;
        width: 23px;
        height: 13px;
        transform: scale(0.7, 1) rotate(27deg);
        left: 12px;
      }
      .balloon--customer::after {
        top: -12px;
        width: 13px;
        height: 23px;
        transform: scale(0.7, 1) rotate(-120deg);
        right: 12px;
      }
    }

    .balloon__timestamp--response {
      font-size: 0.7rem;
      margin-top: 5px;
      margin-bottom: calc(5px - 0.7rem);
      margin-left: 11px;
    }

    .balloon__timestamp--customer {
      font-size: 0.7rem;
      margin-top: 5px;
      margin-bottom: calc(5px - 0.7rem);
      position: relative;
      left: -12px;
      text-align: right;
    }

    .chatIcon {
      height: 96px;
      width: 96px;
      max-height: 96px;
      max-width: 96px;
    }

    .chatIcon--response {
      float: left;
    }

    .chatIcon--customer {
      float: right;
    }

    .chatIcon--customer__name {
      text-align: center;
      position: relative;
      top: -40px;
      color: rgb(121, 121, 121);
/**/      font-size: 0.75rem;
/**/      color: #FFFFFF;
    }

    .is-96x50 {
      height: 50px;
      width: 96px;
    }

    .system-message {
      display: flex;
      justify-content: center;
      margin: 16px 0;
    }

    .system-message__pill {
      padding: 8px 16px;
      background: #f3f6f8;
      border-radius: 999px;
      color: #6b6f73;
      font-size: 0.9rem;
    }

    .image-thumb img {
      max-width: 220px;
      border-radius: 8px;
      border: 1px solid #d6d6d6;
    }

    @media screen and (max-width: 414px) {
      .chatIcon--customer__name {
        font-size: 0.5rem;
        top: -25px;
      }
    }

#closeBtn{
border-radius: 0;
height: 30px;
width: 30px;
position: relative;
overflow: hidden;
}
#closeBtn::before,
#closeBtn::after{
content: "";
display: block;
width: 44px;
height: 1px;
background-color: #FFFFFF;
position: absolute;
top: 50%;
left: 50%;
transform-origin: center;
transform: translate(-50%, -50%) rotate(45deg);
z-index: 1;
}
#closeBtn::after{
transform: translate(-50%, -50%) rotate(-45deg);
}
@media screen and (min-width: 1088px) {
.navbar {
display: block;
}
}


.chatIcon--operator__name{
font-size: 0.75rem;
line-height: 1.2;
margin-top: 4px;
text-align: center;
white-space: nowrap;
text-align: center;
position: relative;
top: -40px;
color: #FFFFFF;
}



.button.is-primary.is-disabled, .button.is-primary[disabled] {
background-color: #dbdbdb;
border-color: #dbdbdb;
color: #7a7a7a;
box-shadow: none;
}
.button.is-primary.is-hovered, .button.is-primary:hover {
background-color: #eb6100;
border-color: transparent;
color: #fff;
}

.button.is-primary {
background-color: var(--smrj-red);
border-color: var(--smrj-red);
color: #fff;
}