/* line 1, app/assets/stylesheets/box.scss */
.box-new {
  background-color: #fffab2;
  padding: 24px;
  min-height: 100vh;
  box-sizing: border-box;
}

/* line 6, app/assets/stylesheets/box.scss */
.box-new .logo {
  font-weight: 700;
  font-size: 50px;
  color: #feef01;
  -webkit-text-stroke: 3px #002a3b;
  text-align: center;
}

/* line 13, app/assets/stylesheets/box.scss */
.box-new .description {
  font-size: 24px;
  color: #002a3b;
  border: 3px solid #002a3b;
  border-radius: 10px;
  padding: 10px;
  margin-top: 30px;
  background-color: white;
  box-shadow: 3px 3px 0px #002a3b;
  font-weight: 600;
}

/* line 24, app/assets/stylesheets/box.scss */
.box-new .form-group {
  margin-top: 60px;
  font-weight: 600;
  font-size: 24px;
}

/* line 28, app/assets/stylesheets/box.scss */
.box-new .form-group .form {
  margin-top: 10px;
}

/* line 30, app/assets/stylesheets/box.scss */
.box-new .form-group .form input {
  box-sizing: border-box;
  font-size: 24px;
  padding: 10px;
  border: 3px solid #002a3b;
  border-radius: 10px;
  margin-top: 10px;
  width: 100%;
}

/* line 41, app/assets/stylesheets/box.scss */
.box-new .actions {
  margin-top: 30px;
  display: flex;
  justify-content: center;
}

/* line 45, app/assets/stylesheets/box.scss */
.box-new .actions .primary-button {
  background-color: #31aa8b;
  color: white;
  border: 3px solid #0c7d7d;
  border-radius: 10px;
  width: 100%;
  padding: 10px;
  font-size: 24px;
  font-weight: 600;
  cursor: pointer;
}

/* line 55, app/assets/stylesheets/box.scss */
.box-new .actions .primary-button:hover {
  background-color: #0c7d7d;
}

/* line 60, app/assets/stylesheets/box.scss */
.box-new .created-box-link {
  margin-top: 60px;
  font-size: 24px;
  font-weight: 600;
  word-break: break-all;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* line 68, app/assets/stylesheets/box.scss */
.box-new .created-box-link a {
  color: #31aa8b;
  text-decoration: none;
}

/* line 71, app/assets/stylesheets/box.scss */
.box-new .created-box-link a:hover {
  text-decoration: underline;
}

/* line 75, app/assets/stylesheets/box.scss */
.box-new .created-box-link .copy-button {
  background-color: #31aa8b;
  color: white;
  border: 3px solid #0c7d7d;
  border-radius: 10px;
  padding: 10px;
  font-size: 24px;
  font-weight: 600;
  cursor: pointer;
  margin-left: 10px;
}

/* line 85, app/assets/stylesheets/box.scss */
.box-new .created-box-link .copy-button:hover {
  background-color: #0c7d7d;
}

/* line 90, app/assets/stylesheets/box.scss */
.box-new .footer {
  position: sticky;
  top: 100vh;
  width: 100%;
}

/* line 94, app/assets/stylesheets/box.scss */
.box-new .footer .footer-line {
  margin-top: 60px;
  color: gray;
}

/* line 98, app/assets/stylesheets/box.scss */
.box-new .footer .select-language {
  color: gray;
}

/* line 101, app/assets/stylesheets/box.scss */
.box-new .footer .language-links {
  font-size: 16px;
  margin-top: 4px;
}

/* line 104, app/assets/stylesheets/box.scss */
.box-new .footer .language-links a {
  margin-right: 8px;
  margin-bottom: 6px;
  display: inline-block;
  color: #31aa8b;
}

/* line 109, app/assets/stylesheets/box.scss */
.box-new .footer .language-links a:hover {
  text-decoration: underline;
}

/* line 114, app/assets/stylesheets/box.scss */
.box-new .footer .copyright {
  margin-top: 8px;
  color: gray;
}
/* line 1, app/assets/stylesheets/room.scss */
.room-new {
  background-color: #fffab2;
  padding: 24px;
  min-height: 100vh;
  box-sizing: border-box;
}

/* line 6, app/assets/stylesheets/room.scss */
.room-new .logo {
  font-weight: 700;
  font-size: 50px;
  color: #feef01;
  -webkit-text-stroke: 3px #002a3b;
  text-align: center;
}

/* line 13, app/assets/stylesheets/room.scss */
.room-new .description {
  font-size: 24px;
  color: #002a3b;
  border: 3px solid #002a3b;
  border-radius: 10px;
  padding: 10px;
  margin-top: 30px;
  background-color: white;
  box-shadow: 3px 3px 0px #002a3b;
  font-weight: 600;
}

/* line 24, app/assets/stylesheets/room.scss */
.room-new .form-group {
  margin-top: 60px;
  font-weight: 600;
  font-size: 24px;
}

/* line 28, app/assets/stylesheets/room.scss */
.room-new .form-group .form {
  margin-top: 10px;
}

/* line 30, app/assets/stylesheets/room.scss */
.room-new .form-group .form input {
  box-sizing: border-box;
  font-size: 24px;
  padding: 10px;
  border: 3px solid #002a3b;
  border-radius: 10px;
  margin-top: 10px;
  width: 100%;
}

/* line 41, app/assets/stylesheets/room.scss */
.room-new .actions {
  margin-top: 30px;
  display: flex;
  justify-content: center;
}

/* line 45, app/assets/stylesheets/room.scss */
.room-new .actions .primary-button {
  background-color: #31aa8b;
  color: white;
  border: 3px solid #0c7d7d;
  border-radius: 10px;
  width: 100%;
  padding: 10px;
  font-size: 24px;
  font-weight: 600;
  cursor: pointer;
}

/* line 55, app/assets/stylesheets/room.scss */
.room-new .actions .primary-button:hover {
  background-color: #0c7d7d;
}

/* line 60, app/assets/stylesheets/room.scss */
.room-new .created-room-link {
  margin-top: 60px;
  font-size: 24px;
  font-weight: 600;
  word-break: break-all;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* line 68, app/assets/stylesheets/room.scss */
.room-new .created-room-link a {
  color: #31aa8b;
  text-decoration: none;
}

/* line 71, app/assets/stylesheets/room.scss */
.room-new .created-room-link a:hover {
  text-decoration: underline;
}

/* line 75, app/assets/stylesheets/room.scss */
.room-new .created-room-link .copy-button {
  background-color: #31aa8b;
  color: white;
  border: 3px solid #0c7d7d;
  border-radius: 10px;
  padding: 10px;
  font-size: 24px;
  font-weight: 600;
  cursor: pointer;
  margin-left: 10px;
}

/* line 85, app/assets/stylesheets/room.scss */
.room-new .created-room-link .copy-button:hover {
  background-color: #0c7d7d;
}

/* line 90, app/assets/stylesheets/room.scss */
.room-new .qrcode {
  display: flex;
  margin-top: 24px;
  justify-content: center;
}

/* line 95, app/assets/stylesheets/room.scss */
.room-new .footer {
  position: sticky;
  top: 100vh;
  width: 100%;
}

/* line 99, app/assets/stylesheets/room.scss */
.room-new .footer .footer-line {
  margin-top: 60px;
  color: gray;
}

/* line 103, app/assets/stylesheets/room.scss */
.room-new .footer .select-language {
  color: gray;
}

/* line 106, app/assets/stylesheets/room.scss */
.room-new .footer .language-links {
  font-size: 16px;
  margin-top: 4px;
}

/* line 109, app/assets/stylesheets/room.scss */
.room-new .footer .language-links a {
  margin-right: 8px;
  margin-bottom: 6px;
  display: inline-block;
  color: #31aa8b;
}

/* line 114, app/assets/stylesheets/room.scss */
.room-new .footer .language-links a:hover {
  text-decoration: underline;
}

/* line 119, app/assets/stylesheets/room.scss */
.room-new .footer .copyright {
  margin-top: 8px;
  color: gray;
}

/* line 125, app/assets/stylesheets/room.scss */
.room-show {
  touch-action: pan-x pan-y;
  background-color: #f6f9fd;
  height: 100vh;
  box-sizing: border-box;
  width: 100vw;
}

/* line 131, app/assets/stylesheets/room.scss */
.room-show .header {
  z-index: 100;
  display: flex;
  gap: 18px;
  align-items: center;
  position: fixed;
  background-color: rgba(255, 255, 255, 0.7);
  width: 100vw;
  box-sizing: border-box;
  color: #002a3b;
  padding: 12px 24px 12px 24px;
  box-shadow: 0px 5px 10px #0000002e;
}

/* line 143, app/assets/stylesheets/room.scss */
.room-show .header .name {
  font-size: 24px;
  font-weight: 600;
}

/* line 147, app/assets/stylesheets/room.scss */
.room-show .header .date {
  font-size: 18px;
}

/* line 150, app/assets/stylesheets/room.scss */
.room-show .header a.logo {
  font-size: 50px;
  text-decoration: none;
}

/* line 154, app/assets/stylesheets/room.scss */
.room-show .header :last-child {
  margin-left: auto;
}

/* line 158, app/assets/stylesheets/room.scss */
.room-show .message-form {
  box-sizing: border-box;
  position: fixed;
  display: flex;
  flex-direction: row;
  gap: 12px;
  bottom: 0;
  background-color: white;
  padding: 12px;
  width: 100%;
}

/* line 168, app/assets/stylesheets/room.scss */
.room-show .message-form .hidden {
  display: none;
}

/* line 171, app/assets/stylesheets/room.scss */
.room-show .message-form textarea {
  box-sizing: border-box;
  font-size: 18px;
  padding: 12px 12px 12px 24px;
  border-radius: 32px;
  background-color: #f0f1f2;
  border: none;
  width: 100%;
  min-height: 50px;
}

/* line 181, app/assets/stylesheets/room.scss */
.room-show .message-form button {
  border-radius: 32px;
  border: none;
  padding: 5px;
  width: 50px;
  height: 40px;
}

/* line 188, app/assets/stylesheets/room.scss */
.room-show .message-form #image-uploadable {
  display: inline-block;
}

/* line 191, app/assets/stylesheets/room.scss */
.room-show .message-form #image-uploading {
  display: none;
}

/* line 193, app/assets/stylesheets/room.scss */
.room-show .message-form #image-uploading svg {
  animation: rotate_anime 1.5s infinite;
}

@keyframes rotate_anime {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* line 206, app/assets/stylesheets/room.scss */
.room-show .messages {
  background-color: #f6f9fd;
  padding-top: 100px;
  padding-bottom: 100px;
}

/* line 210, app/assets/stylesheets/room.scss */
.room-show .messages .message-image, .room-show .messages .message-video, .room-show .messages .message-audio {
  max-width: 100%;
  border-radius: 10px;
}

/* line 214, app/assets/stylesheets/room.scss */
.room-show .messages .my-message {
  text-align: end;
  padding: 12px;
}

/* line 217, app/assets/stylesheets/room.scss */
.room-show .messages .my-message .message-info {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}

/* line 221, app/assets/stylesheets/room.scss */
.room-show .messages .my-message .message-info .name {
  font-size: 12px;
  font-weight: 600;
  color: #002a3b;
  margin-right: 5px;
}

/* line 226, app/assets/stylesheets/room.scss */
.room-show .messages .my-message .message-info .name .creator-id {
  font-size: 10px;
  color: gray;
}

/* line 231, app/assets/stylesheets/room.scss */
.room-show .messages .my-message .message-info .date {
  font-size: 10px;
  color: gray;
}

/* line 236, app/assets/stylesheets/room.scss */
.room-show .messages .my-message .content {
  display: inline-block;
  background-color: #c9d8f3;
  color: #002a3b;
  border-radius: 10px;
  padding: 12px;
  margin-top: 12px;
  max-width: 70%;
  word-break: break-all;
  text-align: start;
}

/* line 247, app/assets/stylesheets/room.scss */
.room-show .messages .my-message .content:has(img), .room-show .messages .my-message .content:has(video), .room-show .messages .my-message .content:has(audio) {
  background-color: transparent;
  padding: 0;
}

/* line 251, app/assets/stylesheets/room.scss */
.room-show .messages .my-message .delete-message-button {
  border: none;
  background-color: transparent;
  text-align: end;
  vertical-align: bottom;
}

/* line 256, app/assets/stylesheets/room.scss */
.room-show .messages .my-message .delete-message-button svg {
  color: gray;
  cursor: pointer;
}

/* line 262, app/assets/stylesheets/room.scss */
.room-show .messages .other-message {
  text-align: start;
  padding: 12px;
}

/* line 265, app/assets/stylesheets/room.scss */
.room-show .messages .other-message .message-info {
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
}

/* line 269, app/assets/stylesheets/room.scss */
.room-show .messages .other-message .message-info .name {
  font-size: 12px;
  font-weight: 600;
  color: #002a3b;
  margin-right: 5px;
}

/* line 274, app/assets/stylesheets/room.scss */
.room-show .messages .other-message .message-info .name .creator-id {
  font-size: 10px;
  color: gray;
}

/* line 279, app/assets/stylesheets/room.scss */
.room-show .messages .other-message .message-info .date {
  font-size: 10px;
  color: gray;
}

/* line 284, app/assets/stylesheets/room.scss */
.room-show .messages .other-message .content {
  display: inline-block;
  background-color: #cbedd4;
  color: #002a3b;
  border-radius: 10px;
  padding: 12px;
  margin-top: 12px;
  max-width: 70%;
  word-break: break-all;
  text-align: start;
}

/* line 295, app/assets/stylesheets/room.scss */
.room-show .messages .other-message .content:has(img), .room-show .messages .other-message .content:has(video), .room-show .messages .other-message .content:has(audio) {
  background-color: transparent;
  padding: 0;
}

/* line 299, app/assets/stylesheets/room.scss */
.room-show .messages .other-message .delete-message-button {
  border: none;
  background-color: transparent;
  text-align: end;
  vertical-align: bottom;
}

/* line 304, app/assets/stylesheets/room.scss */
.room-show .messages .other-message .delete-message-button svg {
  color: gray;
  cursor: pointer;
}

/* line 311, app/assets/stylesheets/room.scss */
.room-show dialog {
  width: 70%;
  max-height: 80vh;
  border-radius: 10px;
  border: 3px solid #002a3b;
}

/* line 312, app/assets/stylesheets/room.scss */
.room-show dialog::backdrop {
  background: rgba(94, 94, 94, 0.5);
  backdrop-filter: blur(4px);
}

/* line 320, app/assets/stylesheets/room.scss */
.room-show dialog .title {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 40px;
  display: flex;
  gap: 10px;
}

/* line 326, app/assets/stylesheets/room.scss */
.room-show dialog .title :last-child {
  margin-left: auto;
}

/* line 330, app/assets/stylesheets/room.scss */
.room-show dialog .sections {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

/* line 335, app/assets/stylesheets/room.scss */
.room-show dialog .forms {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* line 340, app/assets/stylesheets/room.scss */
.room-show dialog .form {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

/* line 344, app/assets/stylesheets/room.scss */
.room-show dialog .form input {
  box-sizing: border-box;
  font-size: 15px;
  padding: 10px;
  border: 3px solid #002a3b;
  border-radius: 10px;
  width: 100%;
}

/* line 351, app/assets/stylesheets/room.scss */
.room-show dialog .form input:focus {
  outline: none;
  border-color: orange;
}

/* line 357, app/assets/stylesheets/room.scss */
.room-show dialog button {
  background-color: #31aa8b;
  color: white;
  border: 3px solid #0c7d7d;
  border-radius: 10px;
  padding: 10px;
  font-size: 15px;
  font-weight: 600;
  width: 100%;
  cursor: pointer;
  margin-top: 30px;
}

/* line 368, app/assets/stylesheets/room.scss */
.room-show dialog button:hover {
  background-color: #0c7d7d;
}

/* line 373, app/assets/stylesheets/room.scss */
.room-show #qr-code {
  display: flex;
  justify-content: center;
}

/* line 376, app/assets/stylesheets/room.scss */
.room-show #qr-code img {
  max-width: 150px;
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */
html {
  font-family: 'Noto Sans JP', sans-serif;
  body {
    margin: 0;
  }
  font-size: 16px;
}