@charset "UTF-8";
html, textarea {
  font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
  font-size: 0.8vw;
  letter-spacing: 0.06em;
}
@media screen and (max-width: 1280px) {
  html, textarea {
    font-size: 1.5vw;
  }
}
@media screen and (max-width: 768px) {
  html, textarea {
    font-size: 3vw;
  }
}

body {
  margin: 0;
  display: grid;
  height: 100svh;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
}

h1 {
  font-size: 2.5vw;
}
@media screen and (max-width: 1280px) {
  h1 {
    font-size: 3.75vw;
  }
}
@media screen and (max-width: 768px) {
  h1 {
    font-size: 7.5vw;
  }
}

h2 {
  font-size: 1.8vw;
}
@media screen and (max-width: 1280px) {
  h2 {
    font-size: 2.7vw;
  }
}
@media screen and (max-width: 768px) {
  h2 {
    font-size: 5.4vw;
  }
}

h3 {
  font-size: 1.5vw;
}
@media screen and (max-width: 1280px) {
  h3 {
    font-size: 2.25vw;
  }
}
@media screen and (max-width: 768px) {
  h3 {
    font-size: 4.5vw;
  }
}

h4 {
  font-size: 1.3vw;
}
@media screen and (max-width: 1280px) {
  h4 {
    font-size: 1.95vw;
  }
}
@media screen and (max-width: 768px) {
  h4 {
    font-size: 3.9vw;
  }
}

h5 {
  font-size: 1.15vw;
}
@media screen and (max-width: 1280px) {
  h5 {
    font-size: 1.725vw;
  }
}
@media screen and (max-width: 768px) {
  h5 {
    font-size: 3.45vw;
  }
}

h6 {
  font-size: 1vw;
}
@media screen and (max-width: 1280px) {
  h6 {
    font-size: 1.5vw;
  }
}
@media screen and (max-width: 768px) {
  h6 {
    font-size: 3vw;
  }
}

h1, h2, h3, h4, h5, h6 {
  font-weight: lighter !important;
  letter-spacing: 0.06em;
  margin: 1%;
}

.NonDressChild *, .NonDressChild *, a.NonDress, a.NonDress :link :visited :hover :active {
  text-decoration: none;
  color: inherit;
}

.Hidden {
  display: none !important;
}

.Centering {
  text-align: center;
}

textarea {
  /* ios zoom force 対策 */
  font-size: min(16px, 1.5rem);
}
textarea.LockWidth {
  resize: vertical;
}
textarea.LockHeight {
  resize: horizontal;
}
textarea.LockBoth {
  resize: none;
}

.SpBar {
  z-index: 1000;
  width: 100%;
  height: 70px;
  position: fixed;
  left: 0;
  bottom: 0;
}
@media screen and (min-width: 1281px) {
  .SpBar {
    display: none;
  }
}
.SpBar ul {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-around;
  padding: 0;
  margin: 0;
  background: transparent linear-gradient(90deg, #37BACA 0%, #0191B6 100%) 0% 0% no-repeat padding-box;
}
.SpBar ul li {
  list-style: none;
  position: relative;
  display: flex;
  align-items: center;
  /* NotificationIcon */
}
.SpBar ul li a {
  display: block;
}
.SpBar ul li a img {
  width: auto;
  height: 30px;
}
.SpBar ul li span {
  width: 15px;
  height: 15px;
  font-size: 12px;
  letter-spacing: 0;
  position: absolute;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #C1272D;
  border-radius: 50%;
  top: 10px;
  right: -5px;
}

.CMP_OneMonthCalender {
  width: 90%;
  margin: 15px 0;
}
.CMP_OneMonthCalender table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  table-layout: fixed;
}
.CMP_OneMonthCalender .C_Month {
  margin: 0;
  font-size: 2.2rem;
}
.CMP_OneMonthCalender .C_Selector {
  width: 100%;
  display: flex;
  justify-content: space-around;
}
.CMP_OneMonthCalender .C_Selector .C_Selected {
  background-color: #299faf;
}
.CMP_OneMonthCalender .C_Selector .Cell {
  margin: 3%;
  padding: 2%;
  width: 20%;
  text-align: center;
  border-radius: 10%;
  border: solid 1px gray;
}
.CMP_OneMonthCalender .C_Selector .Cell * {
  display: block;
  margin: 10% auto;
}
.CMP_OneMonthCalender .C_Month_Header {
  width: 90%;
  margin: 2% 5%;
  display: table;
  font-size: 1.5em;
}
.CMP_OneMonthCalender .C_Month_Header * {
  display: table-cell;
  color: #333;
}
.CMP_OneMonthCalender .C_Month_Header :first-child {
  text-align: left;
}
.CMP_OneMonthCalender .C_Month_Header p {
  text-align: center;
}
.CMP_OneMonthCalender .C_Month_Header p input {
  border: 1px solid #ddd;
  font: inherit;
  font-size: 1.8rem;
  background-color: rgba(0, 0, 0, 0);
  text-align: center;
}
.CMP_OneMonthCalender .C_Month_Header :last-child {
  text-align: right;
}
.CMP_OneMonthCalender .C_Main, .CMP_OneMonthCalender .C_Week {
  width: 100%;
}
.CMP_OneMonthCalender .C_Main .C_Disabled, .CMP_OneMonthCalender .C_Week .C_Disabled {
  opacity: 0.2;
}
.CMP_OneMonthCalender .C_Main .Cell, .CMP_OneMonthCalender .C_Week .Cell {
  margin: 0;
  text-decoration: none;
  color: black;
  text-align: center;
  vertical-align: top;
}
.CMP_OneMonthCalender .C_Main .Cell *, .CMP_OneMonthCalender .C_Week .Cell * {
  display: block;
  max-width: 25px;
  margin: 10% auto;
}
.CMP_OneMonthCalender .C_Main .Cell.Saturday, .CMP_OneMonthCalender .C_Week .Cell.Saturday {
  color: #5252ff;
}
.CMP_OneMonthCalender .C_Main .Cell.Sunday, .CMP_OneMonthCalender .C_Week .Cell.Sunday {
  color: #fc4c4c;
}
.CMP_OneMonthCalender .C_Main .Cell {
  user-select: none;
  border: solid 1px gray;
}
.CMP_OneMonthCalender .C_Main .Cell img {
  height: 58px;
}
@media screen and (max-width: 1280px) {
  .CMP_OneMonthCalender .C_Main .Cell img {
    height: 38px;
  }
}
.CMP_OneMonthCalender .C_TextAreaBox {
  width: 90%;
}
.CMP_OneMonthCalender .C_TextAreaBox textarea {
  font: inherit;
  resize: vertical;
  width: 100%;
  height: 100px;
  margin: 0 5% 5% 15px;
}

.button, .button:link :visited :hover :active {
  background: transparent linear-gradient(90deg, #37BACA 0%, #0191B6 100%) 0 0 no-repeat padding-box;
  box-shadow: 0.36458vw 0.36458vw 0.26042vw rgba(0, 0, 0, 0.4509803922);
  border-radius: 9999px;
  text-decoration: none;
  color: white;
  padding: 10px;
  letter-spacing: 0.06em;
  display: inline-block;
  min-width: 40%;
  text-align: center;
  margin-top: 30px;
  margin-bottom: 30px;
  border: none;
  font-size: 1.6rem;
}
.button.Back, .button:link :visited :hover :active.Back {
  background: white;
  color: #1a1e21;
  border-radius: 0;
  border: 2px solid #ddd;
  margin-bottom: 20px;
  padding-top: 3px;
  padding-bottom: 3px;
}
.button.NonMargin, .button:link :visited :hover :active.NonMargin {
  margin-top: 0;
  margin-bottom: 0;
}
.button.Square, .button:link :visited :hover :active.Square {
  border-radius: 0;
}
.button.AltColor, .button:link :visited :hover :active.AltColor {
  background: red;
  color: white;
}
.button.Disabled, .button:link :visited :hover :active.Disabled {
  opacity: 0.2;
}
.button.Center, .button:link :visited :hover :active.Center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.button.w1, .button:link :visited :hover :active.w1 {
  width: 10%;
}
.button.w2, .button:link :visited :hover :active.w2 {
  width: 20%;
}
.button.w3, .button:link :visited :hover :active.w3 {
  width: 30%;
}
.button.w4, .button:link :visited :hover :active.w4 {
  width: 40%;
}
.button.w5, .button:link :visited :hover :active.w5 {
  width: 50%;
}
.button.w6, .button:link :visited :hover :active.w6 {
  width: 60%;
}
.button.w7, .button:link :visited :hover :active.w7 {
  width: 70%;
}
.button.w8, .button:link :visited :hover :active.w8 {
  width: 80%;
}
.button.w9, .button:link :visited :hover :active.w9 {
  width: 90%;
}
.button.w10, .button:link :visited :hover :active.w10 {
  width: 100%;
}
.button.m10, .button:link :visited :hover :active.m10 {
  margin: 10px auto;
}
.button.NonShadow, .button:link :visited :hover :active.NonShadow {
  box-shadow: none;
}

.CMP_MessageList a p {
  margin-top: 9px;
  margin-bottom: 0;
}
.CMP_MessageList a {
  border-top: 1px solid #ddd;
  color: black;
  margin: 2px;
  font-size: 1rem;
  display: flex;
  align-items: flex-start;
}
.CMP_MessageList a:not(.Unread) span {
  opacity: 0;
}
.CMP_MessageList a img {
  max-height: 75px;
  margin: auto 10px auto 0;
  padding: 10px 0;
}
@media screen and (max-width: 1280px) {
  .CMP_MessageList a img {
    max-height: 45px;
  }
}
.CMP_MessageList a span {
  width: 40px;
  font-size: 40px;
  color: #21aac2;
  margin: auto 0;
}
.CMP_MessageList a div {
  max-height: 150px;
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.CMP_MessageList a:last-child {
  border-bottom: 1px solid #ddd;
}
.CMP_MessageList .Message_Date {
  font-size: 1.1rem;
  font-family: "Roboto", sans-serif;
}
.CMP_MessageList .Message_NotFound {
  margin: 40px 0;
  text-align: center;
}
.CMP_MessageList .hidden_data {
  display: none !important;
}

.CMP_Modal {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: rgba(153, 153, 153, 0.8);
}
.CMP_Modal .ScrollDisabledImp {
  overflow: hidden !important;
}
.CMP_Modal .Modal_Inner {
  margin: 5svh 5%;
  height: 90%;
  width: 90%;
  background-color: white;
  transition: all 0.3s ease-in-out;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.CMP_Modal .Modal_TitleBar {
  position: sticky;
  top: 0;
  display: flex;
  justify-content: space-between;
  background: transparent linear-gradient(90deg, #37BACA 0%, #0191B6 100%) 0% 0% no-repeat padding-box;
}
.CMP_Modal .Modal_TitleBar p {
  display: inline-block;
  margin: auto 0;
  color: white;
  font-size: 20px;
  padding-left: 15px;
}
.CMP_Modal .Modal_TitleBar a, .CMP_Modal .Modal_TitleBar a:link :visited :hover :active {
  display: inline-block;
  min-height: 65px;
  width: 65px;
  font-size: 40px;
  color: black;
  text-decoration: none;
  background-color: white;
  text-align: center;
}
.CMP_Modal .Modal_Content {
  display: inline-block;
  height: 100%;
  padding: 0 2.5%;
  font-size: 18px;
}
.CMP_Modal .Modal_ContentYCentering {
  display: flex;
  justify-content: center;
  flex-direction: column;
}
.CMP_Modal .Modal_Content.Centering {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}
.CMP_Modal .Modal_Content .pdf_link {
  display: block;
}
.CMP_Modal .Modal_Content .img_preview {
  width: 100%;
  max-width: 1280px;
  height: auto;
}
.CMP_Modal .Modal_Content .youtube_embed {
  width: 100%;
  max-width: 1280px;
  aspect-ratio: 16/9;
}
.CMP_Modal.FullSize {
  padding: 0;
  margin: 0;
  border: none;
  max-width: 100svw;
  width: 100svw;
  max-height: 100svh;
  height: 100svh;
}
.CMP_Modal.FullSize .Modal_Inner {
  margin: 0;
  max-height: 100%;
  max-width: 100%;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.CMP_Modal.FullSize .Modal_Content {
  padding: 0;
  width: 100%;
  max-height: calc(100% - 65px);
  overflow-x: auto;
}
.CMP_Modal.FullSize .Modal_Content embed {
  width: 100%;
  height: 100%;
}
.CMP_Modal.FullSize .Modal_Content img {
  width: 100%;
  height: auto;
}
.CMP_Modal.FullSize .Modal_Content table {
  max-width: 100svw;
  height: 100%;
}
.CMP_Modal.FullSize .Modal_Content table th, .CMP_Modal.FullSize .Modal_Content table td {
  border: 1px gray solid;
}

.MainMenu, .Login {
  background: transparent linear-gradient(90deg, #37BACA 0%, #0191B6 100%) 0 0 no-repeat padding-box;
  transition: all 0.3s ease-in-out;
  height: 100vh;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.MainMenu .MainMenu__Icon, .Login .MainMenu__Icon {
  margin: 0 auto;
  width: 5vw;
  text-align: center;
  user-select: none;
}
@media screen and (max-width: 1280px) {
  .MainMenu .MainMenu__Icon, .Login .MainMenu__Icon {
    width: 15%;
  }
}
.MainMenu .MainMenu__Title, .Login .MainMenu__Title {
  user-select: none;
  white-space: nowrap;
  font: inherit;
  font-size: 54px;
  color: white;
  display: flex;
  justify-content: center;
  width: 100%;
}
@media screen and (max-width: 1280px) {
  .MainMenu .MainMenu__Title, .Login .MainMenu__Title {
    font-size: 28px;
  }
}
.MainMenu .MainMenu__Title > img, .Login .MainMenu__Title > img {
  padding: 0 10px;
  display: inline-block;
  width: 250px;
}
@media screen and (max-width: 1280px) {
  .MainMenu .MainMenu__Title > img, .Login .MainMenu__Title > img {
    width: 150px;
  }
}
.MainMenu form, .Login form {
  width: 80%;
}
.MainMenu form input, .Login form input {
  border: none;
}
.MainMenu form .Input_Block, .Login form .Input_Block {
  margin: 20px;
}
.MainMenu form p, .Login form p {
  text-align: left;
  margin: 0;
  margin-left: 25%;
  font-size: 20px;
}
@media screen and (max-width: 1280px) {
  .MainMenu form p, .Login form p {
    margin-left: 0;
  }
}
.MainMenu form .Login_Input, .Login form .Login_Input {
  border-radius: 5px;
  height: 30px;
  width: 50%;
  font-size: 25px;
}
@media screen and (max-width: 1280px) {
  .MainMenu form .Login_Input, .Login form .Login_Input {
    width: 100%;
  }
}
.MainMenu .MainMenu__Nav, .Login .MainMenu__Nav {
  display: flex;
  flex-wrap: wrap;
  padding-left: 0;
}
.MainMenu .MainMenu__Nav > li, .Login .MainMenu__Nav > li {
  width: 40%;
  list-style: none;
  padding: 3% 5%;
  text-align: center;
  font-size: 1.6rem;
}
.MainMenu .MainMenu__Nav li a, .MainMenu .MainMenu__Nav li a :link :visited :hover :active, .Login .MainMenu__Nav li a, .Login .MainMenu__Nav li a :link :visited :hover :active {
  color: white;
  text-decoration: none;
  border-bottom: white solid 1px;
  padding: 5px;
  transition: all 0.3s ease-in-out;
  letter-spacing: 0.06em;
  overflow-wrap: break-word;
  word-break: keep-all;
  width: 100%;
}

@media screen and (max-width: 1280px) {
  .MainMenu {
    display: none;
  }
  body {
    grid-template-columns: 1fr !important;
  }
}
.Content {
  scroll-behavior: smooth;
  height: 100%;
  background-color: white;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  /* モバイルバー配慮 */
}
.Content:not(.NonTopMargin)::before {
  content: "";
  width: 100%;
  height: 30px;
}
@media screen and (max-width: 1280px) {
  .Content {
    max-height: calc(100svh - 70px);
  }
}

/* 縦センタリングオーバーフロー対策 */
.Content {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.Content.Centering {
  justify-content: center;
}
.Content.NonCentering {
  height: 100svh;
}

.Content_NotificationBox {
  width: 88%;
  position: relative;
  margin-bottom: 20px;
}

.Content_NotificationBox a::before {
  content: url(../img/common/icon_cale-black.svg);
  margin-left: 20px;
  padding-top: 10px;
}

.Content_NotificationBox a, .Content_NotificationBox a :link :visited :hover :active {
  margin: 5px 0;
  height: 80px;
  background: #F2F2F2;
  box-shadow: 3px 3px 4px rgba(0, 0, 0, 0.4509803922);
  color: black;
  display: flex;
  align-items: center;
  text-decoration: none;
}

.Content_NotificationBox p {
  margin: 0 auto;
  font-size: 1.6rem;
}

.Content .JS_ReplaceDate::before, .Content .JS_ReplaceDate::after {
  content: "・";
}

.UI_Menu {
  width: 85%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.UI_Menu > a {
  margin: 15px 0;
  display: block;
  width: 100%;
}

.Content.News .CMP_MessageList {
  width: 80%;
  margin-bottom: 20px;
}
.Content.News .News_Tab {
  display: flex;
  width: 80%;
  border: #ddd 1px solid;
}
.Content.News .News_Tab .Checked {
  background-color: #0493b7;
  color: white;
}
.Content.News .News_Tab a, .Content.News .News_Tab a:link :visited :hover :active {
  width: 50%;
  text-align: center;
  text-decoration: none;
  color: #515151;
  padding: 20px 0;
}

.Content.Profile hr {
  width: 80%;
  margin: 10px 0;
}
.Content.Profile .Profile_StatusList {
  display: flex;
  flex-wrap: wrap;
  margin: 0 5%;
}
.Content.Profile .Profile_StatusList dd, .Content.Profile .Profile_StatusList dt {
  font-size: 1.2em;
  margin: 10px 0;
  width: 50%;
}
.Content.Profile .Profile_StatusList dt {
  width: 40%;
  padding-left: 10%;
}

.Report_List {
  width: 98%;
}

.Report_List > div {
  padding: 10px 0;
  margin: 10px 0;
  border-top: 1px solid #333;
  text-align: center;
}
.Report_List > div:last-child {
  border-bottom: 1px solid #333;
}

.Report_Block {
  text-align: center;
  width: 100%;
  padding: 20px 0;
}
.Report_Block p, .Report_Block a {
  margin: 0 auto;
  text-align: center;
}

.Content.Daily_report, .Content.Shift_Detail {
  position: relative;
}
.Content.Daily_report .InfoMain, .Content.Shift_Detail .InfoMain {
  width: 90%;
}
.Content.Daily_report .InfoMain .SaveAndLoad, .Content.Shift_Detail .InfoMain .SaveAndLoad {
  position: sticky;
  bottom: 5px;
  width: 104%;
  pointer-events: none;
}
.Content.Daily_report .InfoMain .SaveAndLoad button, .Content.Shift_Detail .InfoMain .SaveAndLoad button {
  margin: 5px 0 5px auto;
  display: block;
  font-size: 0.8rem;
  min-width: 25%;
  pointer-events: auto;
}
.Content.Daily_report .InfoMain .SaveAndLoad :first-child, .Content.Shift_Detail .InfoMain .SaveAndLoad :first-child {
  background: #198754 !important;
}
.Content.Daily_report .InfoMain .SaveAndLoad :last-child, .Content.Shift_Detail .InfoMain .SaveAndLoad :last-child {
  background: #0d6efd !important;
}
.Content.Daily_report h1, .Content.Daily_report h2, .Content.Daily_report h3, .Content.Daily_report h4, .Content.Daily_report h5, .Content.Daily_report h6, .Content.Daily_report p, .Content.Shift_Detail h1, .Content.Shift_Detail h2, .Content.Shift_Detail h3, .Content.Shift_Detail h4, .Content.Shift_Detail h5, .Content.Shift_Detail h6, .Content.Shift_Detail p {
  margin: 3px 0;
}
.Content.Daily_report .InfoBox, .Content.Shift_Detail .InfoBox {
  padding-left: 5%;
  font-size: 1.5em;
  margin-bottom: 20px;
}
.Content.Daily_report .InfoBox .equipment_box select, .Content.Shift_Detail .InfoBox .equipment_box select {
  width: 80%;
  font: inherit;
  box-sizing: border-box;
}
.Content.Daily_report .InfoBox .equipment_box p, .Content.Shift_Detail .InfoBox .equipment_box p {
  width: 20%;
  font: inherit;
  padding: 5px 10px;
  box-sizing: border-box;
  background: transparent linear-gradient(90deg, #37BACA 0%, #0191B6 100%) 0 0 no-repeat padding-box;
  display: inline;
  color: white;
  border-radius: 9999px;
}
.Content.Daily_report .InputTimeBox, .Content.Shift_Detail .InputTimeBox {
  display: flex;
  justify-content: space-between;
  width: 92%;
  margin-left: 2%;
  gap: 5px;
  padding-bottom: 20px;
}
.Content.Daily_report .InputTimeBox div, .Content.Shift_Detail .InputTimeBox div {
  margin-left: 2%;
}
.Content.Daily_report .InputTimeBox input, .Content.Shift_Detail .InputTimeBox input {
  font-size: 1.2rem;
}
.Content.Daily_report .InputTimeBox label, .Content.Shift_Detail .InputTimeBox label {
  text-align: center;
}
.Content.Daily_report .InputTimeBox label p, .Content.Shift_Detail .InputTimeBox label p {
  margin: 0;
}
@media screen and (max-width: 768px) {
  .Content.Daily_report .InputTimeBox.sp-wrap, .Content.Shift_Detail .InputTimeBox.sp-wrap {
    flex-wrap: wrap;
  }
  .Content.Daily_report .InputTimeBox.sp-wrap label:first-child, .Content.Shift_Detail .InputTimeBox.sp-wrap label:first-child {
    width: 80%;
    text-align: left;
  }
  .Content.Daily_report .InputTimeBox.sp-wrap label:not(:first-child), .Content.Shift_Detail .InputTimeBox.sp-wrap label:not(:first-child) {
    width: 20%;
  }
}
.Content.Daily_report textarea, .Content.Shift_Detail textarea {
  width: 88%;
  margin-left: 5%;
  height: 100px;
}
.Content.Daily_report #confirm_box, .Content.Shift_Detail #confirm_box {
  opacity: 0.2;
  width: 100%;
}
.Content.Daily_report #confirm_box canvas, .Content.Daily_report #confirm_box img, .Content.Shift_Detail #confirm_box canvas, .Content.Shift_Detail #confirm_box img {
  width: 100%;
  aspect-ratio: 4/2;
  border: black solid 1px;
}

.Content.Messages ._NewDM_Btn {
  display: block;
  width: auto;
  margin-top: -20px;
  margin-left: auto;
  margin-right: 10px;
  font-size: 5.5rem;
  color: #0a98b9;
}
.Content.Messages .CMP_MessageList {
  width: 90%;
  margin-bottom: 20px;
}
.Content.Messages .Modal_Content > a {
  font-size: 1.5rem;
}

.Content.Message_Talking {
  position: relative;
  overflow: hidden;
}
.Content.Message_Talking .DM_Header {
  z-index: 99;
  position: absolute;
  background-color: white;
  top: 0;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  height: 80px;
  border-bottom: black solid 1px;
}
.Content.Message_Talking .DM_Header .BackButton {
  flex: 0 0 auto;
  width: 100px;
  text-align: center;
  font-size: 1.75rem;
  color: black;
  position: absolute;
  left: 0;
}
.Content.Message_Talking .DM_Header .UserInfo {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 18px;
}
.Content.Message_Talking .DM_Header .UserInfo img {
  width: auto;
  max-height: 40px;
  aspect-ratio: 1;
}
.Content.Message_Talking .DM_Header .UserInfo p {
  margin: 0;
}
.Content.Message_Talking #Message_Main {
  width: 98%;
  height: calc(100svh - 90px - 70px);
  overflow-y: auto;
  margin-top: 95px;
  /* JS側で使います */
  position: relative;
}
@media screen and (max-width: 1280px) {
  .Content.Message_Talking #Message_Main {
    height: calc(100svh - 230px);
  }
}
.Content.Message_Talking #Message_Main .TimeStamp {
  text-align: center;
  color: gray;
  margin: 10px 0 0;
}
.Content.Message_Talking #Message_Main div {
  font-size: 1.5rem;
}
.Content.Message_Talking #Message_Main div p {
  position: relative;
  display: inline-block;
  max-width: 70%;
  overflow-wrap: break-word;
  background-color: #1ea7c1;
  border-radius: 10px;
  padding: 10px 15px;
  line-height: 1.8rem;
  color: white;
  margin: 0;
}
.Content.Message_Talking #Message_Main div.me::before {
  position: relative;
  content: "";
  width: 20px;
  height: 12px;
  background-color: #1ea7c1;
  clip-path: polygon(100% 0%, 0% 50%, 100% 100%);
  display: inline-block;
  left: 6px;
}
.Content.Message_Talking #Message_Main div.partner {
  text-align: right;
  margin-left: 20%;
}
.Content.Message_Talking #Message_Main div.partner p {
  background-color: #f2eded;
  color: black;
}
.Content.Message_Talking #Message_Main div.partner::after {
  position: relative;
  content: "";
  width: 20px;
  height: 12px;
  background-color: #f2eded;
  clip-path: polygon(0% 0%, 0% 100%, 100% 50%);
  display: inline-block;
  right: 6px;
}
.Content.Message_Talking footer {
  padding: 0 2.5%;
  font-size: 1.5rem;
  width: 95%;
  position: absolute;
  bottom: 5px;
  background-color: white;
}
.Content.Message_Talking footer #PickFilePOP {
  font-size: 1rem;
  text-align: center;
}
.Content.Message_Talking footer div {
  margin-bottom: 5px;
  text-align: center;
  display: flex;
  align-items: end;
  justify-content: center;
  gap: 5px;
}
.Content.Message_Talking footer div textarea {
  flex: 1;
  border-radius: 5px;
  padding: 10px;
  /* ここを変更する際はJSも変更すること */
  height: min(18px, 1.5rem + 2px);
  line-height: min(18px, 1.5rem + 2px);
}
.Content.Message_Talking footer div img {
  width: auto;
  height: 30px;
  margin-bottom: 4px;
}

/*# sourceMappingURL=style.css.map */