@charset "UTF-8";

:root {
  --windowHeight: 0;
  --headingT: #323a46;
  --inputT: #69686f;
  --inputI: #c6c6c6;
  --border: #a9a9a9;
  --inputBg: #f6f6f6;
  --inputBorder: #afaeb2;
  --inputP: #adadaf;
  --btnT: #fefefe;
  --iconRed: #b30808;
  --tagBg: #e8ebef;
  --hoverBg: #eef6fd;
}
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: 24px;
  height: 24px;
  aspect-ratio: 1 / 1;
  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: 8px;
  right: -15px;
}

.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%;
}

.table--member {
  height: 400px;
}

.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;
}
.Daily_report_confirm {
  padding-bottom: 30px;
}
.Daily_report_confirm .info_texts {
  padding-bottom: 2em;
}
.Daily_report_confirm .info_title {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 36px;
}
.Daily_report_confirm .info_title_icon {
  display: flex;
  max-width: 40px;
  width: 100%;
}
.Daily_report_confirm .info_title_icon img {
  width: 100%;
}
.Daily_report_confirm .info_text {
  font-size: 18px;
}
.Daily_report_confirm .InfoBoxItem:not(:first-of-type) {
    margin-top: 2em;
}
.Daily_report .Daily_report_confirm .InputTimeBox {
  padding-bottom: 0;
}
.transport_expense_cols {
  display: grid;
  grid-template-columns: 64% 1fr 20px;
  gap: 10px;
}
.transport_expense_box h3:last-of-type {
  margin-top: 1em;
}
.transport_expense_box h3 {
  font-size: 22px;
  font-weight: bold !important;
}
.Daily_report_confirm .transport_expense_box p {
  padding-left: 0;
}
.transport_expense_cols label:last-of-type p {
  text-align: center;
}
.transport_expense_box input {
  box-sizing: border-box;
  width: 100%;
  border-radius: 7px;
  border: 2px solid #ccc;
  font-size: 20px;
  padding: 10px;
}
.transport_expense_box .price_unit {
  align-self: flex-end;
  padding-bottom: 8px;
}
@media (max-width: 480px) {
  .Daily_report_confirm .info_title {
    font-size: 28px;
  }

  .Daily_report_confirm .info_title_icon {
    max-width: 32px;
  }
}
.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;
}

.Content:has(.talk-wrapper) {
  display: block;
}

.talk-wrapper {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  height: 100%;
}
.talk-wrapper > .header {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  row-gap: 24px;
  padding: 24px 16px 8px 16px;
  background: #f6f6f6;
}
.talk-wrapper > .header > .back {
  text-decoration: none;
  position: absolute;
  left: 24px;
  top: 50%;
  transform: translateY(-50%);
}
.talk-wrapper > .header > .back > img {
  width: 16px;
}
.talk-wrapper > .header > .room-name {
  text-align: center;
  max-width: 70%;
  font-size: 24px;
  color: #323a46;
}
.talk-wrapper > .header > .deco-line {
  grid-row: 2;
  grid-column: 1/3;
  background: -moz-linear-gradient(-143deg, rgb(19, 200, 236) 0%, rgb(51, 171, 220) 100%);
  background: -webkit-linear-gradient(-143deg, rgb(19, 200, 236) 0%, rgb(51, 171, 220) 100%);
  background: -ms-linear-gradient(-143deg, rgb(19, 200, 236) 0%, rgb(51, 171, 220) 100%);
  width: 100%;
  height: 2px;
}
.talk-wrapper > .chat-wrapper {
  height: 100%;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
}
.talk-wrapper > .chat-wrapper > .chat {
  height: calc(100% - 48px);
  padding: 16px;
  display: flex;
  flex-direction: column;
  overflow-y: scroll;
  row-gap: 16px;
}
.talk-wrapper > .chat-wrapper > .chat > .messages-each-dates {
  display: flex;
  flex-direction: column;
  row-gap: 4px;
}
.talk-wrapper > .chat-wrapper > .chat > .messages-each-dates > .received-date {
  text-align: center;
}
.talk-wrapper > .chat-wrapper > .chat > .messages-each-dates > .messages {
  display: flex;
  flex-direction: column;
  row-gap: 8px;
}
.talk-wrapper > .chat-wrapper > .chat > .messages-each-dates > .messages > .message {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 8px;
  align-self: flex-start;
  align-items: center;
  max-width: 60%;
}
.talk-wrapper > .chat-wrapper > .chat > .messages-each-dates > .messages > .message.partner {
  align-self: flex-start;
}
.talk-wrapper > .chat-wrapper > .chat > .messages-each-dates > .messages > .message.myself {
  align-self: flex-end;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  row-gap: 8px;
}
.talk-wrapper > .chat-wrapper > .chat > .messages-each-dates > .messages > .message > .icon {
  width: 32px;
  height: 32px;
  color: white;
  background: -moz-linear-gradient(35deg, rgba(255, 224, 116, 0.99608) 0%, rgb(51, 51, 214) 0%, rgb(19, 106, 215) 100%);
  background: -webkit-linear-gradient(35deg, rgba(255, 224, 116, 0.99608) 0%, rgb(51, 51, 214) 0%, rgb(19, 106, 215) 100%);
  background: -ms-linear-gradient(35deg, rgba(255, 224, 116, 0.99608) 0%, rgb(51, 51, 214) 0%, rgb(19, 106, 215) 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  border-radius: 64px;
  font-weight: bold;
}
.talk-wrapper > .chat-wrapper > .chat > .messages-each-dates > .messages > .message.partner > .body {
  background: #f6f6f6;
}
.talk-wrapper > .chat-wrapper > .chat > .messages-each-dates > .messages > .message.myself > .body {
  background: -moz-linear-gradient(-143deg, rgb(19, 200, 236) 0%, rgb(51, 171, 220) 100%);
  background: -webkit-linear-gradient(-143deg, rgb(19, 200, 236) 0%, rgb(51, 171, 220) 100%);
  background: -ms-linear-gradient(-143deg, rgb(19, 200, 236) 0%, rgb(51, 171, 220) 100%);
  color: white;
}
.talk-wrapper > .chat-wrapper > .chat > .messages-each-dates > .messages > .message.myself > .read-users {
  display: flex;
  column-gap: 4px;
  padding-right: 8px;
  align-items: center;
  position: relative;
  cursor: pointer;
  border-radius: 8px;
  padding: 4px;
}
.talk-wrapper > .chat-wrapper > .chat > .messages-each-dates > .messages > .message.myself > .read-users:hover {
  background: #f0f0f0;
}
.talk-wrapper > .chat-wrapper > .chat > .messages-each-dates > .messages > .message.myself > .read-users > .other-user-count {
  background: #f6f6f6;
  padding: 2px 4px;
  border-radius: 10px;
  display: block;
  font-size: 10px;
}
.talk-wrapper > .chat-wrapper > .chat > .messages-each-dates > .messages > .message.myself > .read-users > .icons {
  display: flex;
  column-gap: 4px;
}
.talk-wrapper > .chat-wrapper > .chat > .messages-each-dates > .messages > .message.myself > .read-users > .icons > .icon {
  width: 18px;
  height: 18px;
  border-radius: 24px;
  color: white;
  background: -moz-linear-gradient(35deg, rgba(255, 224, 116, 0.99608) 0%, rgb(51, 51, 214) 0%, rgb(19, 106, 215) 100%);
  background: -webkit-linear-gradient(35deg, rgba(255, 224, 116, 0.99608) 0%, rgb(51, 51, 214) 0%, rgb(19, 106, 215) 100%);
  background: -ms-linear-gradient(35deg, rgba(255, 224, 116, 0.99608) 0%, rgb(51, 51, 214) 0%, rgb(19, 106, 215) 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 10px;
  font-weight: bold;
}
.talk-wrapper > .chat-wrapper > .chat > .messages-each-dates > .messages > .message.myself > .read-users > .read-user-list {
  display: none;
  position: absolute;
  left: 0px;
  padding: 8px;
  border-radius: 8px;
  width: 100%;
  box-shadow: 0px 5px 40px 0px rgba(0, 0, 0, 0.25);
  z-index: 1;
  background: white;
}
.talk-wrapper > .chat-wrapper > .chat > .messages-each-dates > .messages > .message.myself > .read-users > .read-user-list.show {
  display: block;
}
.talk-wrapper > .chat-wrapper > .chat > .messages-each-dates > .messages > .message.myself > .read-users > .read-user-list:focus {
  outline: none;
}
.talk-wrapper > .chat-wrapper > .chat > .messages-each-dates > .messages > .message.myself > .read-users > .read-user-list > .read-user {
  padding: 8px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 8px;
  align-items: center;
  border-radius: 8px;
}
.talk-wrapper > .chat-wrapper > .chat > .messages-each-dates > .messages > .message.myself > .read-users > .read-user-list > .read-user > .icon {
  width: 18px;
  height: 18px;
  color: white;
  background: -moz-linear-gradient(35deg, rgba(255, 224, 116, 0.99608) 0%, rgb(51, 51, 214) 0%, rgb(19, 106, 215) 100%);
  background: -webkit-linear-gradient(35deg, rgba(255, 224, 116, 0.99608) 0%, rgb(51, 51, 214) 0%, rgb(19, 106, 215) 100%);
  background: -ms-linear-gradient(35deg, rgba(255, 224, 116, 0.99608) 0%, rgb(51, 51, 214) 0%, rgb(19, 106, 215) 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 10px;
  border-radius: 36px;
  font-weight: bold;
}
.talk-wrapper > .chat-wrapper > .chat > .messages-each-dates > .messages > .message.myself > .read-users > .read-user-list > .read-user > .name {
  color: #69686f;
  font-size: 12px;
}
.talk-wrapper > .chat-wrapper > .chat > .messages-each-dates > .messages > .message > .body {
  border-radius: 16px;
  padding: 8px;
}
.talk-wrapper > .chat-wrapper > .new-message {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  padding: 0 16px 16px;
  column-gap: 8px;
  align-items: center;
}
.talk-wrapper > .chat-wrapper > .new-message > .btn-select-image {
  width: fit-content;
  height: 100%;
  padding-bottom: 24px;
  cursor: pointer;
  display: flex;
  align-items: flex-end;
}
.talk-wrapper > .chat-wrapper > .new-message > .btn-select-image > input {
  display: none;
}
.talk-wrapper > .chat-wrapper > .new-message > .btn-select-image > img {
  width: 24px;
  height: 24px;
}
.talk-wrapper > .chat-wrapper > .new-message > .message-input {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 10px 16px;
  background: #f6f6f6;
  border-radius: 24px;
  align-items: flex-end;
}
.talk-wrapper > .chat-wrapper > .new-message > .message-input > textarea {
  resize: none;
  background: transparent;
  border: none;
  font-size: 16px;
  height: 2rem;
  max-height: 10rem;
}
.talk-wrapper > .chat-wrapper > .new-message > .message-input > textarea:focus {
  outline: none;
}
.talk-wrapper > .chat-wrapper > .new-message > .message-input > .btn-send {
  width: fit-content;
  height: fit-content;
  background: transparent;
  border: none;
  outline: none;
}
.talk-wrapper > .chat-wrapper > .new-message > .message-input > .btn-send > img {
  width: 20px;
  height: 20px;
}

.Content:has(.chat-rooms-wrapper) {
  display: block;
}

.chat-rooms-wrapper {
  display: flex;
  flex-direction: column;
  row-gap: 24px;
  padding: 32px;
}
.chat-rooms-wrapper > .chat-room {
  text-decoration: none;
  cursor: pointer;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: minmax(0, 1fr) 16px auto;
  grid-template-columns: minmax(0, 1fr) auto;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  text-align: center;
  font-size: 16px;
  position: relative;
  padding: 24px 16px 24px 32px;
  -webkit-column-gap: 16px;
  -moz-column-gap: 16px;
  column-gap: 16px;
  border-radius: 80px;
  background: -moz-linear-gradient(-143deg, rgb(19, 200, 236) 0%, rgb(51, 171, 220) 100%);
  background: -webkit-linear-gradient(-143deg, rgb(19, 200, 236) 0%, rgb(51, 171, 220) 100%);
  background: -ms-linear-gradient(-143deg, rgb(19, 200, 236) 0%, rgb(51, 171, 220) 100%);
  box-shadow: 0px 13px 13px 0px rgba(0, 0, 0, 0.15);
}
.chat-rooms-wrapper > .chat-room:hover {
  opacity: 0.7;
}
.chat-rooms-wrapper > .chat-room > .badge {
  font-size: 12px;
  color: white;
  background: #c1272d;
  height: 18px;
  min-width: 18px;
  border-radius: 36px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 8px;
  position: absolute;
  top: 0;
  left: 0;
}
.chat-rooms-wrapper > .chat-room > .name {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  color: white;
  font-size: 18px;
}

[v-cloak] {
  display: none;
}

#threadApp {
  width: 100%;
  box-sizing: border-box;
}

/* messageRoom
-----------------------------------------------
------------------ */
.messageRoom {
  padding: 28px 34px 0 41px;
}
@media screen and (max-width: 768px) {
  .messageRoom {
    padding: calc(68 / 7.68 * 1vw) calc(32 / 7.68 * 1vw) 0;
  }
}

.messageRoom__header {
  width: 100%;
}

.messageRoom__body {
  max-height: calc(var(--windowHeight) - 167.5px);
  min-height: 400px;
  overflow-y: auto;
  position: relative;
  margin-top: 58.5px;
}
@media screen and (max-width: 1280px) {
  .messageRoom__body {
    max-height: calc(var(--windowHeight) - 237.5px);
  }
}
@media screen and (max-width: 768px) {
  .messageRoom__body {
    max-height: calc(var(--windowHeight) - (68 / 7.68 * 1vw) - (81 / 7.68 * 1vw) - (40 / 7.68 * 1vw) - 70px);
    margin-top: calc(30 / 7.68 * 1vw);
  }
}

.messageRoom__loading {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  max-width: 25px;
  width: 100%;
}

.messageRoom__loadingIcon {
  width: 100%;
  height: auto;
}

.messageRoom__errMessage {
  text-align: center;
  font-size: 26px;
  line-height: 1;
  color: var(--inputT);
}
@media screen and (max-width: 768px) {
  .messageRoom__errMessage {
    font-size: calc(26 / 7.68 * 1vw);
  }
}

.messageRoom__item {
  display: flex;
  align-items: center;
  border-radius: 5px;
  cursor: pointer;
  transition: background .3s ease;
  padding: 18.5px 8px;
}
@media screen and (max-width: 768px) {
  .messageRoom__item {
    width: calc(100% - 20px);
    padding: calc(18.5 / 7.68 * 1vw) calc(8 / 7.68 * 1vw);
  }
}

.messageRoom__item.is-disabled {
  pointer-events: none;
  background: var(--inputBg);
}

.messageRoom__item:hover {
  background: var(--hoverBg);
}

.messageRoom__icon, .messageRoom__icon--group, .messageRoom__icon--member {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(100 / 18.8 * 1vw);
  aspect-ratio: 1/1;
  border-radius: 100%;
  background: #65cde0;
  font-size: calc(44 / 18.8 * 1vw);
  line-height: 0.56818182;
  letter-spacing: 0;
  font-weight: bold;
  color: #fff;
}
@media screen and (max-width: 1280px) {
  .messageRoom__icon, .messageRoom__icon--group, .messageRoom__icon--member {
    width: calc(100 / 12.8 * 1vw);
    font-size: calc(44 / 12.8 * 1vw);
  }
}
@media screen and (max-width: 768px) {
  .messageRoom__icon, .messageRoom__icon--group, .messageRoom__icon--member {
    width: calc(100 / 7.68 * 1vw);
    font-size: calc(44 / 7.68 * 1vw);
  }
}

.messageRoom__icon--group {
  background: #5f8fdf;
}

.messageRoom__icon--member {
  background: #9e9e9e;
}

.messageRoom__iconText {}

.messageRoom__readNum {
  position: absolute;
  top: calc(-10 / 18.8 * 1vw);
  right: calc(-27 / 18.8 * 1vw);
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(45 / 18.8 * 1vw);
  height: calc(45 / 18.8 * 1vw);
  border-radius: 100%;
  background: var(--iconRed);
  font-size: calc(30.29 / 18.8 * 1vw);
  line-height: 0.8253549;
  font-weight: bold;
  color: #fff;
}
@media screen and (max-width: 1280px) {
  .messageRoom__readNum {
    top: calc(-10 / 12.8 * 1vw);
    right: calc(-27 / 12.8 * 1vw);
    width: calc(45 / 12.8 * 1vw);
    height: calc(45 / 12.8 * 1vw);
    font-size: calc(30.29 / 12.8 * 1vw);
  }
}
@media screen and (max-width: 768px) {
  .messageRoom__readNum {
    top: calc(-7 / 7.68* 1vw);
    right: calc(-13 / 7.68* 1vw);
    width: calc(45 / 7.68 * 1vw);
    height: calc(45 / 7.68 * 1vw);
    font-size: calc(30.29 / 7.68 * 1vw);
  }
}

.messageRoom__content {
  flex: 1;
  margin-left: 4.02771065%;
}
@media screen and (max-width: 768px) {
  .messageRoom__content {
    margin-left: calc(28 / 7.68 * 1vw);
  }
}

.messageRoom__threadNameWrap {
  display: flex;
  align-items: center;
  font-size: 30px;
  line-height: 1;
  letter-spacing: 0;
  font-weight: bold;
  color: var(--inputT);
}

.messageRoom__threadName {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 1;
  max-width: 100%;
  font-size: 30px;
  line-height: 1;
  letter-spacing: 0;
  font-weight: bold;
  color: var(--inputT);
}
@media screen and (max-width: 768px) {
  .messageRoom__threadName {
    font-size: calc(30 / 7.68 * 1vw);
    width: 100%;
  }
}

.messageRoom__memberNum {
  display: inline-block;
  padding-left: 5px;
}
@media screen and (max-width: 768px) {
  .messageRoom__memberNum {
    font-size: calc(30 / 7.68 * 1vw);
  }
}

.messageRoom__threadContent {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  width: 100%;
  font-size: 26px;
  line-height: 1.38461538;
  letter-spacing: 0;
  font-weight: normal;
  color: var(--inputT);
  margin-top: 5px;
}
@media screen and (max-width: 768px) {
  .messageRoom__threadContent {
    font-size: calc(26 / 7.68 * 1vw);
  }
}

.messageRoom__time {
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 103px;
  width: 100%;
  font-size: 18px;
  line-height: 1.33333333;
  letter-spacing: 0.025em;
  font-weight: normal;
  color: var(--inputT);
  margin-left: 6.90464683%;
}
@media screen and (max-width: 768px) {
  .messageRoom__time {
    max-width: calc(82 / 7.68* 1vw);
    font-size: calc(18 / 7.68 * 1vw);
    margin-left: calc(26 / 7.68 * 1vw);
  }
}

/* c-inputSearch
-----------------------------------------------
------------------ */
.c-inputSearch {
  position: relative;
}

.c-inputSearch__input {
  position: relative;
  width: calc(100% - 59px);
  background-color: var(--inputBg);
  border: none;
  border-radius: 15px;
  font-size: 26px;
  line-height: 1;
  color: var(--inputT);
  padding: 26.5px 30px 23.5px 26.5px;
}
@media screen and (max-width: 768px) {
  .c-inputSearch__input {
    width: calc(100% - (59 / 7.68 * 1vw));
    font-size: 16px;
    border-radius: calc(15 / 7.68 * 1vw);
    padding: calc(26.5 / 7.68 * 1vw) calc(30 / 7.68 * 1vw) calc(23.5 / 7.68 * 1vw) calc(26.5 / 7.68 * 1vw);
  }
}

.c-inputSearch__input::placeholder {
  color: var(--inputT);
}

.c-inputSearch__input:focus {
  outline: none;
}

.c-inputSearch__iconBox {
  border: none;
  background: transparent;
  display: flex;
  position: absolute;
  top: 50%;
  right: 0px;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 81px;
  height: 81px;
  padding: 24px;
  cursor: pointer;
  transition: .3s opacity ease;
}
@media screen and (max-width: 768px) {
  .c-inputSearch__iconBox {
    width: calc(81 / 7.68 * 1vw);
    height: calc(81 / 7.68 * 1vw);
    padding: calc(24 / 7.68 * 1vw);
  }
}
.c-inputSearch__iconBox:hover {
  opacity: 0.6;
}
.c-inputSearch__icon {
  width: 100%;
  height: auto;
}
/*# sourceMappingURL=style.css.map */