body {
    width: 100vw;
    overflow-x: hidden;
}

.wrapper{
    width: 100%;
    /* min-height: calc(100dvh) !important; */
    /* min-height: calc(100dvh + 60px) !important; */
}
.pointer {
    cursor: pointer;
}
.cursor-default {
    cursor: default;
}

img {
    user-select: none;
}

input:focus, select:focus {
    outline: none;
}

.select-none {
    user-select: none;
}

.inline-block {
    display: inline-block;
}

.search-modal {
    position: fixed;
    display: flex;
    width: 100vw;
    height: 100dvh;
    top: 0;
    left: 0;
    background-color: rgba(0,0,0,0.3);
    z-index: 5;
}

.modal-back {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100dvh;
    background-color: rgba(0,0,0,0.4);
    transition: 0.4;
    opacity: 1;
}
.modal-back.d-none {
    opacity: 0;
}
.d-nonei {
    display: none !important;
}
.alert-modal-body {
    width: 95%;
    max-width: 700px;
    height: 320px;
    background-color: #FFFFFF;
    border-radius: 7px;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.alert-modal-body .close {
    position: absolute;
    top: 20px;
    right: 20px;
    color: #979797;
    font-weight: bold;
    cursor: pointer;
}

.opacity0 {
    opacity: 0;
}
.event-none {
    pointer-events: none;
}

.w10 {
    width: 10%;
}
.w15 {
    width: 15%;
}
.w20 {
    width: 20%;
}
.w25 {
    width: 25%;
}
.w30 {
    width: 30%;
}
.w32 {
    width: 32%;
}
.w35 {
    width: 35%;
}
.w40 {
    width: 40%;
}
.w45 {
    width: 45%;
}
.w50 {
    width: 50%;
}
.w60 {
    width: 60%;
}
.w70 {
    width: 70%;
}
.w80 {
    width: 80%;
}
.w90 {
    width: 90%;
}
.w95 {
    width: 95%;
}
.w100 {
    width: 100%;
}
.w10px {
    width: 10px;
}
.w13px {
    width: 13px;
}
.w20px {
    width: 20px;
}
.w30px {
    width: 30px;
}
.w40px {
    width: 40px;
}
.w50px {
    width: 50px;
}
.w70px {
    width: 70px;
}
.w100px {
    width: 100px;
}
.w150px {
    width: 150px;
}
.w200px {
    width: 200px;
}
.w250px {
    width: 250px;
}
.w300px {
    width: 300px;
}
.w350px {
    width: 350px;
}
.w400px {
    width: 400px;
}
.w600px {
    width: 600px;
}

.max-w100 {
    max-width: 100%;
}
.max-w500px {
    max-width: 500px;
}
.max-w650px {
    max-width: 650px;
}
.max-w800px {
    max-width: 800px;
}
.max-w1000px {
    max-width: 1000px;
}
.max-w1200px {
    max-width: 1200px;
}
.max-w1300px {
    max-width: 1300px;
}

.h35 {
    height: 35%;
}
.h40 {
    height: 40%;
}
.h100 {
    height: 100%;
}
.h100-50 {
    height: calc(100% - 50px);
}
.h100-120 {
    height: calc(100% - 120px);
}

.h10px {
    height: 10px;
}
.h20px {
    height: 20px;
}
.h25px {
    height: 25px;
}
.h50px {
    height: 50px;
}
.h70px {
    height: 70px;
}
.h100px {
    height: 100px;
}
.h150px {
    height: 150px;
}
.h200px {
    height: 200px;
}
.h230px {
    height: 230px;
}
.h300px {
    height: 300px;
}
.h350px {
    height: 350px;
}
.h150px {
    height: 150px;
}

.h100vh {
    height: 100vh;
}
.h100vh-60 {
    height: calc(100dvh - 60px);
}
.h100vh-80 {
    height: calc(100vh - 80px);
}
.h100vh-120 {
    height: calc(100vh - 120px);
}
.h100vh-200 {
    height: calc(100vh - 200px);
}
.h100vh-250 {
    height: calc(100vh - 250px);
}
.h100vh-300 {
    height: calc(100vh - 300px);
}
.max-h100 {
    max-height: 100%;
}
.max-h200px {
    max-height: 200px;
}

.mauto {
    margin: 0 auto;
}

.mt20 {
    margin-top: 20px;
}
.mt50 {
    margin-top: 50px;
}
.mt80i {
    margin-top: 80px !important;
}
.mt100i {
    margin-top: 100px !important;
}
.mb30 {
    margin-bottom: 30px;
}
.mb50 {
    margin-bottom: 50px;
}
.ml10 {
    margin-left: 10px;
}
.ml100 {
    margin-left: 100px;
}
.mr0 {
    margin-right: 0;
}

.pad2 {
    padding: 2px;
}
.pad3 {
    padding: 3px;
}
.padx15 {
    padding-left: 15px;
    padding-right: 15px;
}
.padx30 {
    padding-left: 30px;
    padding-right: 30px;
}
.pady7 {
    padding-top: 7px;
    padding-bottom: 7px;
}
.pady15 {
    padding-top: 15px;
    padding-bottom: 15px;
}
.pt10 {
    padding-top: 10px;
}
.pt15 {
    padding-top: 15px;
}
.pb1 {
    padding-bottom: 1px;
}
.pb3 {
    padding-bottom: 3px;
}
.pb10 {
    padding-bottom: 10px;
}
.pb70 {
    padding-bottom: 70px;
}

.pl5p {
    padding-left: 5%;
}
.pl10p {
    padding-left: 10%;
}

.pr5p {
    padding-right: 5%;
}
.pr20p {
    padding-right: 20%;
}

.flex {
    display: flex;
}
.gap-2 {
    gap: 2%;
}
.gap-3 {
    gap: 3%;
}
.gap-5 {
    gap: 5%;
}
.items-center {
    align-items: center;
}
.items-end {
    align-items: flex-end;
}
.items-stretch {
    align-items: stretch;
}
.justify-center {
    justify-content: center;
}
.justify-between {
    justify-content: space-between;
}
.justify-end {
    justify-content: flex-end;
}
.d-flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}
.flex-1 {
    flex: 1 1 0%;
}

.over-y-auto {
    overflow-y: auto;
}
.over-hidden {
    overflow: hidden;
}

.f10 {
    font-size: 10px;
}
.f12 {
    font-size: 12px;
}
.f13 {
    font-size: 13px;
}
.f14 {
    font-size: 14px;
}
.f16 {
    font-size: 16px;
}
.f18 {
    font-size: 18px;
}

.f20 {
    font-size: 20px;
}
.f23 {
    font-size: 23px;
}
.f25 {
    font-size: 25px;
}
.f28 {
    font-size: 28px;
}
.f32 {
    font-size: 32px;
}
.f60 {
    font-size: 60px;
}
.f70 {
    font-size: 70px;
}
.f96 {
    font-size: 96px;
}

.font-bold {
    font-weight: bold;
}
.font-normal {
    font-weight: normal;
}

.underline {
    text-decoration: underline;
}
.underline:hover {
    text-decoration: underline;
}

.relative {
    position: relative;
}
.absolute {
    position: absolute;
}
.absolute-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.position0 {
    top: 0;
    left: 0;
}
.position-placeholder {
    top: 50px;
    left: 20px;
}
.fixed {
    position: fixed;
}

.event-none {
    pointer-events:none;
}

.inline-block {
    display: inline-block;
}

.border-1 {
    border: solid 1px;
}
.border-2 {
    border: solid 2px;
}

.border-top {
    border-top: solid 1px;
}
.border-top-2 {
    border-top: solid 2px;
}
.border-left {
    border-left: solid 1px;
}
.border-left-2 {
    border-left: solid 2px;
}
.border-left-5 {
    border-left: solid 5px;
}
.border-right {
    border-right: solid 1px;
}

.border-bottom-1 {
    border-bottom: solid 1px;
}
.border-bottom-2 {
    border-bottom: solid 2px;
}

.border-color-229AE6 {
    border-color: #229AE6;
}
.border-color-d4d4d4 {
    border-color: #d4d4d4;
}
.border-color-8e8e93 {
    border-color: #8e8e93;
}
.border-d1d1d6 {
  border-color: #d1d1d6;
}
.border-ffffff {
  border-color: #ffffff;
}

.border-none {
    border: none;
}

.bc-e6f3fc {
    background-color: #e6f3fc;
}
.bc-e6f3fc-hober:hover {
    background-color: #e6f3fc;
}

.bc-e5e5ea {
    background-color: #e5e5ea;
}
.bc-d1d1d6 {
    background-color: #d1d1d6;
}
.bc-f6723e {
    background-color: #f6723e;
}
.bc-f3f4f5 {
    background-color: #f3f4f5;
}
.bc-f8f8f8 {
    background-color: #f8f8f8;
}
.bc-f9f9f9 {
    background-color: #f9f9f9;
}
.bc-black {
    background-color: #222222;
}
.bc-229AE6 {
  background-color: #229AE6;
}

.radius3 {
    border-radius: 3px;
}
.radius5 {
    border-radius: 5px;
}
.radius7 {
    border-radius: 7px;
}
.radius10 {
    border-radius: 10px;
}
.radius20 {
    border-radius: 20px;
}
.radius50 {
    border-radius: 50px;
}
.radius100p {
    border-radius: 100%;
}

.no-wrap {
    white-space: nowrap;
}

ul.disc li {
    list-style: disc;  /* ● (デフォルト) */
}

ul, ol {
    padding-inline-start: 15px;
    counter-reset: list-counter;
}
ul.none li {
    list-style: none;
}

ol.tab {
    padding-inline-start: 15px;
}
ol.none {
    padding-inline-start: 0px;
}
ol.none li, ol.tab li {
    list-style: none;
}
ol.lower-roman li {
    list-style: lower-roman;
}
ol.origin-brackets li {
    counter-increment: list-counter;
}
ol.origin-brackets {
    list-style: none;
    padding-inline-start: 20px;
}
ol.origin-brackets li::before {
    content: "(" counter(list-counter, circled-decimal) ")";
    position: absolute;
    left: 50px;
}
ul.disc li::before {
    content: "";
}

input[type="checkbox"] {
    width: 15px;
    height: 15px;
    border: 1px solid gray; /* 外枠をグレーに */
    border-radius: 4px; /* 角を少し丸く */
    box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3); /* 影をつける */
    appearance: none; /* デフォルトのスタイルを消す */
    cursor: pointer;
    background-color: white;
}
input[type="checkbox"]:checked {
    background-color: rgb(36, 96, 207); /* チェック時の背景をグレーに */
    border-color: darkgray; /* チェック時の枠色を少し濃く */
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4); /* 影を濃く */
}
input[type="checkbox"]::before {
    content: "✔"; /* チェックマークを追加 */
    display: block;
    text-align: center;
    line-height: 14px;
    font-size: 12px;
    color: white;
    visibility: hidden;
  }
  input[type="checkbox"]:checked::before {
    visibility: visible;
  }

  .shadow1 {
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
  }

  .bc-image {
    background-size: cover;
    background-position: center top;
  }

  .clickCategory.selected {
    background-color: #229AE6;
    color: #FFFFFF;
  }

  .clickSkill.selected {
    background-color: #cccccc;
    color: #FFFFFF;
  }

  .check-holiday input[type=checkbox] {
    appearance: none;
    width: 40px !important;
    height: 40px !important;
    display: inline-block;
    position: relative;
    margin-left: 10px;
    margin-right: 10px;
  }
  .check-holiday input[type=checkbox]:checked {
    background-color: #ddd !important;
  }
  .check-holiday input[type=checkbox]:checked::before {
    background-color: #ddd !important;
    content: '✔' !important;
    color: white !important;
    font-size: 18px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .detail-hader-back {
    background-image: url('/images/background/lawyer-detail-head02.png');
    background-position: left bottom;
    background-size: cover;
  }

  .lawyer-plan-alert {
    font-size: 14px !important;
    color: #ff0000;
  }
  #descriptionDiv {
    font-size: 14px;
    padding-left: 20px;
  }

  .stopButton {
    
  }

  .robot_gif {
    left: -130px;
    bottom: -30px;
  }

  .loading {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-top:10px;
    gap: 4px;
  }
  .loading.pad {
    padding-left: 70px;
    margin-top: 25px;
  }
  
  .loading span {
    width: 7px;
    height: 7px;
    background-color: #ecf8ff;
    border-radius: 50%;
    animation: bounce 0.3s infinite ease-in-out alternate;
  }
  
  .loading span:nth-child(2) {
    animation-delay: 0.2s;
  }
  
  .loading span:nth-child(3) {
    animation-delay: 0.4s;
  }
  
  @keyframes bounce {
    0% {
      transform: translateY(0);
    }
    100% {
      transform: translateY(-10px);
    }
  }

  .custom-select {
    appearance: none;
    background-image: 
      url('/images/icons/vector.png'), 
      url('/images/icons/place.png');
    background-position: right 10px center, left 13px center;
    background-repeat: no-repeat, no-repeat;
    background-size: 10px 10px, 15px 15px;
    padding-right: 30px;
    padding-left: 30px;
  }

  .custom-textbox {
    appearance: none;
    background-image: 
      url('/images/icons/search-gray.png');
    background-position: left 13px center;
    background-repeat: no-repeat, no-repeat;
    background-size: 15px 15px;
    padding-left: 35px;
  }

.create-profile-back {
    background-image: url('/images/background/create-back.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.input-error {
    width: 100%;
    margin-top: .25rem;
    font-size: 80%;
    color: #dc3545;
}

.robot-position {
    padding-bottom: 5%;
    left: 0px;
}

.main-bg-size {
    background-size: cover;
}

.card-bottom1 {
    bottom:3.1%;
}
.card-child-bottom1 {
    margin-bottom:2%;
}
.max-h-robot {
    max-height: 100%;
}


.chat-area {
    top: 80px;
    height:68%;
}

@media screen and (max-width: 1600px) {
    .flex-column-1600 {
        flex-direction: column;
        /* display: block; */
    }
    .w90-1600 {
        width: 90%;
    }
    .mauto-1600 {
        margin: 0 auto;
    }
    .mt10-1600 {
        margin-top: 10px;
    }
}

@media screen and (max-width: 1200px) {
    .w45-1200 {
        width: 45%;
    }
    .chat-area {
        width: 70% !important;
        left: 0 !important;
        margin: 0 auto;
    }
}

@media screen and (max-width: 1050px) {
    .f50-1050 {
        font-size: 50px;
    }
    .f40-1050 {
        font-size: 40px;
    }
    .f30-1050 {
        font-size: 30px;
    }
    .tab-f26 {
        font-size: 26px;
    }
    .tab-f20 {
        font-size: 20px;
    }
    .tab-justify-between {
        justify-content: space-between;
    }
    .tab-flex-column-reverse {
        flex-direction: column-reverse;
    }
    .tab-flex-column {
        flex-direction: column;
    }
    .tab-flex-initial {
        flex: initial;
    }

    .ml20-1050 {
        margin-left: 20px !important;
    }
    .tab-mt15 {
        margin-top:15px;
    }
    .tab-p15 {
      padding: 15px !important;
    }
    .tab-m0 {
        margin: 0px;
    }
    .tab-w50 {
        width: 50%;
    }
    .tab-w80 {
        width: 80%;
    }
    .tab-w100 {
        width: 100%;
    }
    .tab-h20 {
        height: 20%;
    }
    .tab-h30 {
        height: 30%;
    }
    .tab-h40i {
        height: 40% !important;
    }
    .tab-h45i {
        height: 45% !important;
    }
    .tab-h50i {
        height: 50% !important;
    }
    .tab-h55i {
        height: 55% !important;
    }
    .tab-h60 {
        height: 60%;
    }
    .tab-h60i {
        height: 60% !important;
    }
    .tab-h70i {
        height: 70% !important;
    }
    .tab-max-h20 {
        max-height: 20%;
    }
    .tab-h100-60 {
        height: calc(100% - 60px);
    }
    .tab-none {
        display: none !important;
    }
    
    .sp-position-robot {
        left: 50% !important;
        bottom: -3% !important;
        transform: translate(-50%, -50%) !important;
        width: 50% !important;
    }

    .robot-position {
        width: 50% !important;
        margin: 0 auto;
    }
    .max-h-robot {
        max-height: 110%;
    }
    .msg-text {
        font-size: 15px !important;
    }

    .chat-area {
        top: 30px;
    }
}

@media screen and (max-width: 970px) {
    .flex-column-970 {
        flex-direction: column;
    }
    .items-start-970 {
        align-items: flex-start;
    }
    .f12-970 {
        font-size: 12px;
    }
    .f14-970 {
        font-size: 14px;
    }
}

@media screen and (max-width: 768px) {
    .chat-area {
        width: 90% !important;
        top: 15px !important;
        left: 0 !important;
        margin: 0 auto !important;
    }

    .main-bg-size {
        background-size: 350%;
    }
    .custom-select {
        padding-left: 35px !important;
    }
    /* .wrapper{
        padding-bottom: 80px !important;
    } */
    .wrapper, body, html {
        min-height: 100dvh;
        overflow: hidden;
    }
    .sp-mt0 {
        margin-top: 0px;
    }
    .sp-mt20 {
        margin-top: 20px !important;
    }
    .sp-mx10 {
        margin-left: 10px !important;
        margin-right: 10px !important;
    }
    .sp-p10 {
      padding: 10px !important;
    }
    .sp-p0 {
        padding: 0 !important;
    }
    .sp-sticky {
        position: sticky !important;
        top: 10px !important;
    }
    .sp-absolute {
        position: absolute !important;
    }
    .sp-position-x-center {
        left: 50%;
        transform: translate(-50%, 0);
    }

    .sp-top10 {
        top : 10px !important;
    }
    .sp-top20 {
        top : 20px !important;
    }

    .sp-f22 {
        font-size: 22px !important;
    }
    .sp-f20 {
        font-size: 20px !important;
    }
    .sp-f18 {
        font-size: 18px;
    }
    .sp-f14 {
        font-size: 14px;
    }
    .sp-f12 {
        font-size: 12px;
    }
    .sp-w10i {
        width: 10% !important;
    }
    .sp-w15i {
        width: 15% !important;
    }
    .sp-w50i {
        width: 50% !important;
    }
    .sp-w60i {
        width: 60% !important;
    }
    .sp-w85i {
        width: 85% !important;
    }
    .sp-w95 {
        width: 95% !important;
    }
    .sp-h20i {
        height: 20% !important;
    }
    .sp-h30i {
        height: 30% !important;
    }
    .sp-h35i {
        height: 35% !important;
    }
    .sp-h40i {
        height: 40% !important;
    }
    .sp-h50i {
        height: 50% !important;
    }
    .sp-h60 {
        height: 60% !important;
    }

    .sp-h100-150 {
        height: calc(100vh - 150px);
    }
    .sp-h100-240 {
        height: calc(100vh - 240px);
    }
    .sp-h100-250 {
        height: calc(100vh - 250px);
    }
    .sp-z10 {
        z-index: 10 !important;
    }

    .sp-robot-anime {
        height: 30% !important;
        margin-top: -10%;
    }
    .sp-mt5 {
        margin-top: 5px;
    }
    .sp-mt-20 {
        margin-top: -20%;
    }
    .sp-pl0 {
        padding-left: 0 !important;
    }
    .sp-px10 {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
    .sp-pl10 {
        padding-left: 10px !important;
    }
    .max-h-robot {
        max-height: 150%;
        height: 150%;
    }

    .sp-flex-row {
        flex-direction: row;
    }
    
    .sp-justify-start {
        justify-content: flex-start;
    }
    .sp-justify-end {
        justify-content: flex-end;
    }
    .sp-items-start {
        align-items: flex-start;
    }

    .robot-position {
        padding-bottom: 0;
        width: 250px !important;
        left: 0px;
        margin: 50px auto 0;
    }
    .msg-text {
        font-size: 13px !important;
    }

    .card-bottom1 {
        bottom:3%;
    }
    .card-child-bottom1 {
        margin-bottom:-2%;
    }
}

.speech-bubble {
    position: absolute;
    top: 40px;
    left: 250px;
    background: #2196F3;
    color: white;
    padding: 20px;
    border-radius: 10px;
    width: 300px;
  }
  
  .speech-bubble::before {
    content: "";
    position: absolute;
    left: -25px; /* 位置調整 */
    top: 20px;
    width: 30px;  /* 横幅を長めに */
    height: 15px; /* 高さ */
    background: #2196F3;
    clip-path: polygon(100% 0%, 0% 50%, 100% 100%);
  }

  .overlay, .overlay2 {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.2);
    /* pointer-events: none; */
    z-index:10;
  }
  
.bubble2 {
    position: absolute;
    top: 21%;
    right: 7%;
    background: #2196F3;
    color: white;
    padding: 20px;
    border-radius: 10px;
    width: 250px;
  }
  
  .bubble2::before {
    content: "";
    position: absolute;
    left: -25px; /* 位置調整 */
    top: 20px;
    width: 30px;  /* 横幅を長めに */
    height: 15px; /* 高さ */
    background: #2196F3;
    clip-path: polygon(100% 0%, 0% 50%, 100% 100%);
  }