@charset "UTF-8";
/*
variable.scss
変数
*/
:root {
  --color-1: 255, 186, 10;
  --color-2: 31, 233, 255;
  --color-3: 111, 235, 132;
  --color-4: 255, 123, 71;
  --color-5: 216, 245, 0;
  --color-6: 242, 233, 228;
  --color-7: 201, 173, 167;
  --color-8: 154, 140, 152;
  --color-9: 148, 152, 179;
  --color-10: 22, 22, 32;
  --color-background-color: 255, 255, 255;
  --color-primary: 31, 233, 255;
  --color-primary-background: 31, 233, 255;
  --color-primary-inverse: 255, 255, 255;
  --color-secondary: 154, 140, 152;
  --color-secondary-background: 154, 140, 152;
  --color-secondary-inverse: 255, 255, 255;
  --color-contrast: 22, 22, 32;
  --color-contrast-background: 22, 22, 32;
  --color-contrast-inverse: 255, 255, 255;
  --color-text: 34, 34, 59;
  --color-muted-text: 201, 173, 167;
  --color-muted-contrast: 242, 233, 228;
  --color-mark-background-color: 216, 245, 0;
  --color-highlight: 255, 186, 10;
  --color-alert: 216, 245, 0;
  --color-important: 255, 123, 71;
  --color-error: 255, 123, 71;
  --color-channel1: 247, 152, 36;
  --color-channel2: 118, 120, 237;
  --color-channel3: 142, 202, 230;
  --color-unpaid: 31, 233, 255;
  --color-paid: 255, 123, 71;
  --color-canceled: 22, 22, 32;
  --color-danger: 255, 123, 71;
  --color-warning: 216, 245, 0;
  --color-success: 111, 235, 132;
  --color-info: 31, 233, 255;
  --color-disable: 201, 173, 167;
  --color-enable: 111, 235, 132;
  --color-active: 31, 233, 255;
  --color-inactive: 154, 140, 152;
  --color-pending: 216, 245, 0;
  --color-processing: 31, 233, 255;
  --color-complete: 111, 235, 132;
  --color-neutral: 154, 140, 152;
  --color-accent: 255, 186, 10;
  --color-muted: 201, 173, 167;
  --color-link: 1, 114, 173;
  --color-hover-text: 1, 168, 255;
  --color-hover-background: 2, 154, 232;
  --border-radius: 5px;
}
:root[data-theme=dark] {
  --color-1: 216, 154, 0;
  --color-2: 0, 184, 204;
  --color-3: 74, 201, 119;
  --color-4: 232, 92, 47;
  --color-5: 184, 214, 0;
  --color-6: 58, 53, 64;
  --color-7: 139, 123, 133;
  --color-8: 184, 176, 188;
  --color-9: 122, 126, 159;
  --color-10: 232, 232, 240;
  --color-background-color: 26, 26, 36;
  --color-primary: 0, 196, 219;
  --color-primary-background: 0, 196, 219;
  --color-primary-inverse: 26, 26, 36;
  --color-secondary: 184, 176, 188;
  --color-secondary-background: 184, 176, 188;
  --color-secondary-inverse: 26, 26, 36;
  --color-contrast: 232, 232, 240;
  --color-contrast-background: 232, 232, 240;
  --color-contrast-inverse: 26, 26, 36;
  --color-text: 232, 232, 240;
  --color-muted-text: 168, 168, 188;
  --color-muted-contrast: 58, 53, 64;
  --color-mark-background-color: 184, 214, 0;
  --color-highlight: 216, 154, 0;
  --color-alert: 184, 214, 0;
  --color-important: 232, 92, 47;
  --color-error: 232, 92, 47;
  --color-channel1: 232, 138, 28;
  --color-channel2: 102, 104, 217;
  --color-channel3: 107, 181, 216;
  --color-unpaid: 0, 196, 219;
  --color-paid: 74, 201, 119;
  --color-canceled: 168, 168, 188;
  --color-danger: 232, 92, 47;
  --color-warning: 184, 214, 0;
  --color-success: 74, 201, 119;
  --color-info: 0, 196, 219;
  --color-disable: 139, 123, 133;
  --color-enable: 74, 201, 119;
  --color-active: 0, 196, 219;
  --color-inactive: 184, 176, 188;
  --color-pending: 184, 214, 0;
  --color-processing: 0, 196, 219;
  --color-complete: 74, 201, 119;
  --color-neutral: 184, 176, 188;
  --color-accent: 216, 154, 0;
  --color-muted: 168, 168, 188;
  --color-link: 1, 170, 255;
  --color-hover-text: 121, 192, 255;
  --color-hover-background: 1, 127, 192;
}

:root {
  --mr-kennel-font-family-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --mr-kennel-font-family-jp: YakuHanJPs, Roboto, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3",
  Arial, nc3Jp, var(--mr-kennel-font-family-emoji), sans-serif;
  --mr-kennel-font-family-en: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace, var(--mr-kennel-font-family-emoji);
  --mr-kennel-font-family: var(--mr-kennel-font-family-jp);
  --mr-kennel-line-height: 14px;
  --mr-kennel-font-weight: 400;
  --mr-kennel-font-size: 1.2rem;
  --mr-kennel-text-underline-offset: 0.1rem;
  --mr-kennel-primary-focus: rgba(1, 170, 255, 0.375);
  --mr-kennel-form-element-border-color: #2a3140;
  --mr-kennel-border-radius: 0.25rem;
  --mr-kennel-border-width: 0.0625rem;
  --mr-kennel-outline-width: 0.125rem;
  --mr-kennel-transition: 0.2s ease-in-out;
  --mr-kennel-spacing: 0.5rem;
  --mr-kennel-typography-spacing-vertical: 1rem;
  --mr-kennel-block-spacing-vertical: var(--mr-kennel-spacing);
  --mr-kennel-block-spacing-horizontal: var(--mr-kennel-spacing);
  --mr-kennel-grid-column-gap: var(--mr-kennel-spacing);
  --mr-kennel-grid-row-gap: var(--mr-kennel-spacing);
  --mr-kennel-form-element-spacing-vertical: 0.75rem;
  --mr-kennel-form-element-spacing-horizontal: 1rem;
  --mr-kennel-group-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  --mr-kennel-group-box-shadow-focus-with-button: 0 0 0 var(--mr-kennel-outline-width) var(--mr-kennel-primary-focus);
  --mr-kennel-group-box-shadow-focus-with-input: 0 0 0 0.0625rem var(--mr-kennel-form-element-border-color);
  --mr-kennel-modal-overlay-backdrop-filter: blur(0.375rem);
  --mr-kennel-nav-element-spacing-vertical: 1rem;
  --mr-kennel-nav-element-spacing-horizontal: 0.5rem;
  --mr-kennel-nav-link-spacing-vertical: 0.5rem;
  --mr-kennel-nav-link-spacing-horizontal: 0.5rem;
  --mr-kennel-nav-breadcrumb-divider: ">";
}

/*
mdPreview.css
マークダウン用CSS

.mdParse クラスに反映するスタイル
*/
.mdParse {
  font-size: 1.5rem;
  line-height: 1.5rem;
}
.mdParse h1,
.mdParse h2,
.mdParse h3,
.mdParse h4,
.mdParse h5,
.mdParse h6 {
  margin: 20px 0 10px;
  padding: 0;
  font-weight: bold !important;
  -webkit-font-smoothing: antialiased;
  cursor: text;
  position: relative;
}
.mdParse a {
  height: auto;
  display: inline-block;
  overflow-wrap: anywhere;
  text-decoration: underline;
}
.mdParse a:hover {
  text-decoration: underline;
}
.mdParse h1 tt,
.mdParse h1 code {
  font-size: inherit;
}
.mdParse h2 tt,
.mdParse h2 code {
  font-size: inherit;
}
.mdParse h3 tt,
.mdParse h3 code {
  font-size: inherit;
}
.mdParse h4 tt,
.mdParse h4 code {
  font-size: inherit;
}
.mdParse h5 tt,
.mdParse h5 code {
  font-size: inherit;
}
.mdParse h6 tt,
.mdParse h6 code {
  font-size: inherit;
}
.mdParse p,
.mdParse blockquote,
.mdParse ul,
.mdParse ol,
.mdParse dl,
.mdParse li,
.mdParse table,
.mdParse pre {
  margin: 15px 0;
}

.mdParse h2:first-child {
  margin-top: 0;
  padding-top: 0;
}
.mdParse h1:first-child {
  margin-top: 0;
  padding-top: 0;
}
.mdParse h1:first-child + h2 {
  margin-top: 0;
  padding-top: 0;
}
.mdParse h3:first-child,
.mdParse h4:first-child,
.mdParse h5:first-child,
.mdParse h6:first-child {
  margin-top: 0;
  padding-top: 0;
}
.mdParse a:first-child h1,
.mdParse a:first-child h2,
.mdParse a:first-child h3,
.mdParse a:first-child h4,
.mdParse a:first-child h5,
.mdParse a:first-child h6 {
  margin-top: 0;
  padding-top: 0;
}
.mdParse h1 p,
.mdParse h2 p,
.mdParse h3 p,
.mdParse h4 p,
.mdParse h5 p,
.mdParse h6 p {
  margin-top: 0;
}
.mdParse li p.first {
  display: inline-block;
}
.mdParse ul,
.mdParse ol {
  padding-left: 30px;
}
.mdParse ul :first-child,
.mdParse ol :first-child {
  margin-top: 0;
}
.mdParse ul :last-child,
.mdParse ol :last-child {
  margin-bottom: 0;
}
.mdParse dl {
  padding: 0;
}
.mdParse dl dt {
  font-weight: bold;
  font-style: italic;
  padding: 0;
  margin: 15px 0 5px;
}
.mdParse dl dt:first-child {
  padding: 0;
}
.mdParse dl dt > :first-child {
  margin-top: 0;
}
.mdParse dl dt > :last-child {
  margin-bottom: 0;
}
.mdParse dl dd {
  margin: 0 0 15px;
  padding: 0 15px;
}
.mdParse dl dd > :first-child {
  margin-top: 0;
}
.mdParse dl dd > :last-child {
  margin-bottom: 0;
}
.mdParse blockquote {
  padding: 0 15px;
}
.mdParse blockquote > :first-child {
  margin-top: 0;
}
.mdParse blockquote > :last-child {
  margin-bottom: 0;
}
.mdParse table {
  padding: 0;
}
.mdParse table tr {
  margin: 0;
  padding: 0;
}
.mdParse table tr th {
  font-weight: bold;
  text-align: left;
  margin: 0;
  padding: 6px 13px;
}
.mdParse table tr td {
  text-align: left;
  margin: 0;
  padding: 6px 13px;
}
.mdParse table tr th :first-child,
.mdParse table tr td :first-child {
  margin-top: 0;
}
.mdParse table tr th :last-child,
.mdParse table tr td :last-child {
  margin-bottom: 0;
}
.mdParse img {
  max-width: 100%;
}
.mdParse span.frame {
  display: block;
  overflow: hidden;
}
.mdParse span.frame > span {
  display: block;
  float: left;
  overflow: hidden;
  margin: 13px 0 0;
  padding: 7px;
  width: auto;
}
.mdParse span.frame span img {
  display: block;
  float: left;
}
.mdParse span.frame span span {
  clear: both;
  padding: 5px 0 0;
}
.mdParse span.align-center {
  display: block;
  overflow: hidden;
  clear: both;
}
.mdParse span.align-center > span {
  display: block;
  overflow: hidden;
  margin: 13px auto 0;
  text-align: center;
}
.mdParse span.align-center span img {
  margin: 0 auto;
  text-align: center;
}
.mdParse span.align-right {
  display: block;
  overflow: hidden;
  clear: both;
}
.mdParse span.align-right > span {
  display: block;
  overflow: hidden;
  margin: 13px 0 0;
  text-align: right;
}
.mdParse span.align-right span img {
  margin: 0;
  text-align: right;
}
.mdParse span.float-left {
  display: block;
  margin-right: 13px;
  overflow: hidden;
  float: left;
}
.mdParse span.float-left span {
  margin: 13px 0 0;
}
.mdParse span.float-right {
  display: block;
  margin-left: 13px;
  overflow: hidden;
  float: right;
}
.mdParse span.float-right > span {
  display: block;
  overflow: hidden;
  margin: 13px auto 0;
  text-align: right;
}
.mdParse code,
.mdParse tt {
  margin: 0 2px;
  padding: 0 5px;
  white-space: nowrap;
  background-color: var(--pico-code-background-color);
  border-radius: 3px;
}
.mdParse pre code {
  margin: 0;
  padding: 0;
  white-space: pre-wrap;
  border: none;
  background: transparent;
}
.mdParse .highlight pre {
  background-color: var(--pico-code-background-color);
  line-height: 19px;
  overflow: auto;
  padding: 6px 10px;
  border-radius: 3px;
}
.mdParse pre {
  background-color: var(--pico-code-background-color);
  line-height: 19px;
  overflow: auto;
  padding: 6px 10px;
  border-radius: 3px;
}
.mdParse pre code,
.mdParse pre tt {
  background-color: transparent;
  border: none;
}

.markdown-alert {
  border-left: 4px solid;
  padding: 1em 1.2em;
  margin: 1em 1em 1em 0;
  border-radius: 4px;
  background-color: #f9f9f9;
  box-shadow: inset 0 0 0 1px #ddd;
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}
.markdown-alert .markdown-alert-title {
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: 0.5em;
}
.markdown-alert .markdown-alert-title svg {
  flex-shrink: 0;
}
.markdown-alert svg {
  width: 1.2em;
  height: 1.2em;
}
.markdown-alert.markdown-alert-note {
  border-color: #2563eb;
  background-color: #eff6ff;
}
.markdown-alert.markdown-alert-note .markdown-alert-title {
  color: #2563eb;
}
.markdown-alert.markdown-alert-tip {
  border-color: #10b981;
  background-color: #ecfdf5;
}
.markdown-alert.markdown-alert-tip .markdown-alert-title {
  color: #059669;
}
.markdown-alert.markdown-alert-important {
  border-color: #8b5cf6;
  background-color: #f5f3ff;
}
.markdown-alert.markdown-alert-important .markdown-alert-title {
  color: #7c3aed;
}
.markdown-alert.markdown-alert-warning {
  border-color: #f59e0b;
  background-color: #fefce8;
}
.markdown-alert.markdown-alert-warning .markdown-alert-title {
  color: #d97706;
}
.markdown-alert.markdown-alert-caution {
  border-color: #dc2626;
  background-color: #fef2f2;
}
.markdown-alert.markdown-alert-caution .markdown-alert-title {
  color: #b91c1c;
}

body:has(.md-editor) {
  height: 100dvh;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
body:has(.md-editor) > main.container {
  height: 100%;
  margin: 0;
  padding: 0 1.5rem 1.5rem 1.5rem;
  max-width: none;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.md-editor {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--pico-muted-border-color, #ddd);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
  background: var(--pico-background-color, #fff);
}
:root[data-theme=dark] .md-editor {
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
  border-color: rgba(255, 255, 255, 0.08);
}
.md-editor__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  background: linear-gradient(180deg, var(--pico-card-background-color, #f8f8f8) 0%, var(--pico-card-background-color, #f2f2f2) 100%);
  border-bottom: 1px solid var(--pico-muted-border-color, #ddd);
  gap: 8px;
  flex-shrink: 0;
}
.md-editor__toolbar span {
  font-size: 1.1rem;
  opacity: 0.5;
}
.md-editor__label {
  font-weight: 700;
  font-size: 1.3rem;
  opacity: 0.85;
  letter-spacing: 0.02em;
}
.md-editor__toolbar-actions {
  display: flex;
  gap: 6px;
}
.md-editor__insert-bar {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px 10px;
  background: var(--pico-card-background-color, #f5f5f5);
  border-bottom: 1px solid var(--pico-muted-border-color, #ddd);
  flex-shrink: 0;
  flex-wrap: wrap;
}
.md-editor__insert-bar button {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.12s ease;
  line-height: 1.2;
}
.md-editor__insert-bar button:hover {
  background: var(--pico-primary-focus, rgba(0, 170, 255, 0.12));
  border-color: var(--pico-muted-border-color, #ddd);
}
.md-editor__insert-bar button:active {
  transform: scale(0.95);
}
.md-editor__insert-bar button small {
  font-size: 0.9rem;
  font-weight: 700;
}
.md-editor__insert-divider {
  display: inline-block;
  width: 1px;
  height: 18px;
  background: var(--pico-muted-border-color, #ddd);
  margin: 0 4px;
}
.md-editor__help {
  border-bottom: 1px solid var(--pico-muted-border-color, #ddd);
  background: var(--pico-background-color, #fff);
  position: relative;
  max-height: 340px;
  overflow-y: auto;
}
.md-editor__help[hidden] {
  display: none;
}
.md-editor__help-inner {
  padding: 12px 40px 12px 14px;
  font-size: 1.2rem;
}
.md-editor__help-close {
  position: absolute;
  top: 8px;
  right: 10px;
  background: none;
  border: none;
  cursor: pointer;
  opacity: 0.4;
  font-size: 1.4rem;
  padding: 2px 6px;
  line-height: 1;
  transition: opacity 0.15s ease;
}
.md-editor__help-close:hover {
  opacity: 1;
}
.md-editor__body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  flex: 1;
  min-height: 0;
}
.md-editor__pane {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.md-editor__pane--input {
  border-right: 1px solid var(--pico-muted-border-color, #ddd);
  border-bottom-left-radius: 8px;
  background: var(--pico-background-color, #fff);
  transition: box-shadow 0.15s ease;
  overflow: hidden;
}
.md-editor__pane--input:focus-within {
  box-shadow: inset 0 0 0 2px var(--pico-primary, #1fe9ff);
}
:root[data-theme=dark] .md-editor__pane--input {
  background: rgba(0, 0, 0, 0.15);
}
.md-editor__pane--preview {
  background: var(--pico-card-background-color, #fafafa);
}
:root[data-theme=dark] .md-editor__pane--preview {
  background: rgba(255, 255, 255, 0.03);
}
.md-editor__pane-label {
  padding: 5px 12px;
  font-size: 1rem;
  font-weight: 700;
  opacity: 0.4;
  background: var(--pico-card-background-color, #f5f5f5);
  border-bottom: 1px solid var(--pico-muted-border-color, #ddd);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  flex-shrink: 0;
  user-select: none;
}
.md-editor__textarea {
  flex: 1;
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  padding: 12px;
  box-sizing: border-box;
  font-family: var(--mr-kennel-font-family-en, monospace);
  font-size: 1.3rem;
  line-height: 1.6;
  border: none !important;
  border-radius: 0;
  outline: none !important;
  box-shadow: none !important;
  resize: none;
  background: transparent;
  color: var(--pico-color, inherit);
  overflow-y: auto;
  caret-color: var(--pico-primary, #1fe9ff);
}
.md-editor__textarea::placeholder {
  opacity: 0.3;
}
.md-editor__textarea:focus {
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}
.md-editor__preview {
  flex: 1;
  padding: 12px 16px;
  overflow-y: auto;
  font-size: 1.4rem;
  line-height: 1.7;
  min-height: 0;
}
.md-editor__placeholder {
  opacity: 0.25;
  font-style: italic;
  font-size: 1.2rem;
}
.md-editor__body {
  grid-template-columns: 1fr;
}
.md-editor__pane--input {
  border-right: none;
  border-bottom: 1px solid var(--pico-muted-border-color, #ddd);
}
@media (min-width: 576px) {
  .md-editor__body {
    grid-template-columns: 1fr 1fr;
  }
  .md-editor__pane--input {
    border-right: 1px solid var(--pico-muted-border-color, #ddd);
    border-bottom: none;
  }
}

/*
layout.scss
pico.cssとの組み合わせ
サイト全体の基本レイアウト
*/
html {
  font-size: 62.5%;
}

body {
  font-size: var(--mr-kennel-font-size);
  font-family: var(--mr-kennel-font-family), sans-serif;
  min-height: 100vh;
  margin: 0;
  line-height: var(--mr-kennel-line-height);
  overflow-wrap: anywhere; /* 収まらない場合に折り返す */
  word-break: normal; /* 単語の分割はデフォルトに依存 */
  line-break: strict;
}
body.fixed {
  position: fixed;
  right: 0;
  left: 0;
  z-index: 9999;
}
@media screen and (min-width: 800px) {
  body.fixed {
    position: absolute;
    left: 200px;
  }
}

@media (min-width: 576px) {
  .container {
    max-width: 510px;
  }
}
@media (min-width: 744px) {
  .container {
    max-width: 700px;
  }
}
@media (min-width: 1024px) {
  .container {
    max-width: 950px;
  }
}
@media (min-width: 1280px) {
  .container {
    max-width: 95%;
  }
  .grid--detail-contents {
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(320px, 400px));
  }
}
a.nohover:hover {
  text-decoration: none !important;
}

select:disabled {
  color: var(--pico-muted-color);
}
select:not([multiple], [size]) {
  background-size: 2rem auto;
  background-position: center right 0;
}

sup {
  padding: 0.3rem;
  line-height: normal;
  position: unset;
  font-weight: 600;
}

mark {
  background-color: rgba(var(--color-mark-background-color), 1);
}

pre {
  font-size: 1.2rem;
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}

::-webkit-scrollbar {
  border-radius: 10px;
  width: 0.8rem;
  height: 1rem;
}

::-webkit-scrollbar-thumb {
  background-color: rgba(var(--color-2), 1);
  border-radius: 10px;
}

hr.style1 {
  border-top: 1px solid var(--pico-card-sectioning-background-color);
  border-bottom: 1px solid var(--pico-progress-background-color);
}

input:-webkit-autofill::first-line {
  font-size: 1.6rem;
}

.grid, .grid--detail-contents, .grid--px140-fit, .grid--row, .grid--row-fill, .grid--row-fit, .grid--column-fill, .grid--column-fit, .grid--column {
  display: grid;
  gap: 0.5rem;
  justify-content: center;
}
.grid > .end, .grid--detail-contents > .end, .grid--px140-fit > .end, .grid--row > .end, .grid--row-fill > .end, .grid--row-fit > .end, .grid--column-fill > .end, .grid--column-fit > .end, .grid--column > .end {
  justify-self: end;
  align-self: center;
}
.grid > .start, .grid--detail-contents > .start, .grid--px140-fit > .start, .grid--row > .start, .grid--row-fill > .start, .grid--row-fit > .start, .grid--column-fill > .start, .grid--column-fit > .start, .grid--column > .start {
  justify-self: start;
  align-self: center;
}
.grid > .center, .grid--detail-contents > .center, .grid--px140-fit > .center, .grid--row > .center, .grid--row-fill > .center, .grid--row-fit > .center, .grid--column-fill > .center, .grid--column-fit > .center, .grid--column > .center {
  justify-self: center;
  align-self: center;
}
.grid--column {
  grid-auto-flow: column;
}
.grid--column-fit {
  grid-template-columns: repeat(auto-fit, minmax(110px, max-content));
}
.grid--column-fill {
  grid-template-columns: repeat(auto-fill, minmax(110px, max-content));
}
.grid--row, .grid--row-fill, .grid--row-fit {
  grid-auto-flow: row;
}
.grid--row-fit {
  grid-template-rows: repeat(auto-fit, minmax(110px, max-content));
}
.grid--row-fill {
  grid-template-rows: repeat(auto-fill, minmax(110px, max-content));
}
.grid--px140-fit {
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  align-items: center;
  column-gap: 0.5rem;
  row-gap: 0.5rem;
}
.grid--detail-contents {
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}
.grid--detail-contents-header {
  display: grid;
  grid-template-columns: 1fr auto;
  margin-bottom: 1.5rem;
  height: 50px;
  align-items: center;
}
.grid--detail-contents-header > .center {
  justify-self: center;
}
.grid--detail-contents-header > * {
  margin: 0;
}

[role=button],
[type=button],
[type=file]::file-selector-button,
[type=reset],
[type=submit],
button {
  font-size: 1.5rem;
}

input,
optgroup,
select,
textarea {
  font-size: 1.6rem;
}

input:not([type=checkbox], [type=radio], [type=range], [type=file]):is([type=date], [type=datetime-local], [type=month], [type=time], [type=week]) {
  --pico-icon-width: 2rem;
}

input:not([type=checkbox], [type=radio], [type=range]) {
  height: initial;
}

input[type=checkbox], [type=radio], [type=range] {
  margin-top: 0;
}

.row, .row--end, .row--around, .row--between, .row--even, .row--wrap--center, .row--wrap, .row--center, .row--start {
  display: flex;
  flex-direction: row;
}
.row > *, .row--end > *, .row--around > *, .row--between > *, .row--even > *, .row--wrap--center > *, .row--wrap > *, .row--center > *, .row--start > * {
  margin: 0 0.2rem;
}
.row--start {
  justify-self: flex-start;
  justify-content: flex-start;
  align-items: center;
}
.row--center {
  justify-self: center;
  justify-content: center;
  align-items: center;
}
.row--center > * {
  margin: 0 0.2rem;
}
.row--wrap {
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: end;
}
.row--wrap > * {
  margin: 0.5rem 0.2rem;
}
.row--wrap--center {
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
.row--wrap--center > * {
  margin: 0.5rem 0.2rem;
}
.row--even {
  justify-content: space-evenly;
  align-items: center;
}
.row--between {
  justify-content: space-between;
  align-items: center;
}
.row--around {
  justify-content: space-around;
  align-items: center;
}
.row--end {
  justify-self: flex-end;
  justify-content: flex-end;
  align-items: center;
}

.col, .col--end, .col--header, .col--center {
  display: flex;
  flex-direction: column;
}
.col--center {
  justify-content: center;
  align-items: center;
}
.col--header {
  justify-content: center;
  align-items: center;
}
.col--header form {
  border: none;
  box-shadow: none;
  display: contents;
}
.col--header form input {
  margin: 0.5rem;
}
.col--header a {
  margin: 0 0.4rem;
}
.col--end {
  justify-content: center;
  align-items: flex-end;
}

.pagination {
  margin-top: 2rem;
  display: grid;
  grid-auto-rows: 1fr 1fr 1fr;
  justify-content: center;
  height: 100px;
}
.pagination span {
  justify-self: center;
}
.pagination a:hover {
  text-decoration: none;
  transition: all 0.2s 0s ease;
}
.pagination--first-last-page {
  justify-self: center;
}
.pagination--first-last-page--context {
  margin: 0 2rem;
}
.pagination--first-last-page--context i {
  padding: 0.5rem 0.2rem;
}
.pagination--page-number {
  justify-content: space-between;
  margin-top: 1.5rem;
}
.pagination--page-number--context {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
}
.pagination--page-number--context--current {
  padding: 0.5rem;
  border-radius: 75px;
  background-color: var(--pico-text-selection-color);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
}

.hidden-form {
  display: none;
}
.hidden-form.active {
  display: table-row;
}
.hidden-form input {
  width: 100%;
  height: inherit;
}
.hidden-form select {
  font-size: inherit;
}

#profile-img {
  height: 45px;
}
#profile-img a {
  height: 45px;
}
#profile-img img {
  object-fit: cover;
  width: 45px;
  height: 45px;
  border-radius: 50%;
}

.user-profile-img--changed-form-wrap {
  position: absolute;
  right: 260px;
  bottom: 50px;
}

.fixed-box, .fixed-box--contracts, .fixed-box--files, .fixed-box--weights, .fixed-box--notes {
  overflow-y: auto;
}
.fixed-box--notes {
  max-height: 65vh;
}
.fixed-box--notes header, .fixed-box--notes footer {
  display: grid;
  gap: 0.4rem;
  grid-auto-flow: column;
  align-items: center;
}
.fixed-box--notes header button, .fixed-box--notes footer button {
  margin-bottom: 0;
}
.fixed-box--notes header button small, .fixed-box--notes footer button small {
  font-weight: initial;
  font-size: 1rem;
}
.fixed-box--weights {
  max-height: 65vh;
}
.fixed-box--files {
  max-height: 72vh;
}
.fixed-box--contracts {
  max-height: 80vh;
}

.comment-thumbnail, .comment-thumbnail--disable, .comment-thumbnail--enable {
  width: 28px;
  height: 28px;
}
.comment-thumbnail--enable img, .comment-thumbnail--enable span {
  width: 28px;
  height: 28px;
}
.comment-thumbnail--enable span {
  font-size: 2rem;
}
.comment-thumbnail--disable:hover img, .comment-thumbnail--disable span {
  cursor: initial;
}
.comment-thumbnail--disable img, .comment-thumbnail--disable span {
  width: 28px;
  height: 28px;
  filter: grayscale(100%) brightness(0.7);
}
.comment-thumbnail--disable span {
  font-size: 2rem;
}

.detail-header, .detail-header--form--field, .detail-header--form, .detail-header--form--switch,
.contents-header--form--field,
.contents-header--form,
.contents-header--form--switch,
.contents-header {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  justify-content: start;
  align-items: center;
}
.detail-header > div, .detail-header--form--field > div, .detail-header--form > div, .detail-header--form--switch > div,
.contents-header--form--field > div,
.contents-header--form > div,
.contents-header--form--switch > div, .detail-header select, .detail-header--form--field select, .detail-header--form select, .detail-header--form--switch select,
.contents-header--form--field select,
.contents-header--form select,
.contents-header--form--switch select, .detail-header label, .detail-header--form--field label, .detail-header--form label, .detail-header--form--switch label,
.contents-header--form--field label,
.contents-header--form label,
.contents-header--form--switch label, .detail-header button, .detail-header--form--field button, .detail-header--form button, .detail-header--form--switch button,
.contents-header--form--field button,
.contents-header--form button,
.contents-header--form--switch button, .detail-header h2, .detail-header--form--field h2, .detail-header--form h2, .detail-header--form--switch h2,
.contents-header--form--field h2,
.contents-header--form h2,
.contents-header--form--switch h2, .detail-header h3, .detail-header--form--field h3, .detail-header--form h3, .detail-header--form--switch h3,
.contents-header--form--field h3,
.contents-header--form h3,
.contents-header--form--switch h3,
.contents-header > div,
.contents-header select,
.contents-header label,
.contents-header button,
.contents-header h2,
.contents-header h3 {
  margin: 0;
}
.detail-header button, .detail-header--form--field button, .detail-header--form button, .detail-header--form--switch button,
.contents-header--form--field button,
.contents-header--form button,
.contents-header--form--switch button,
.contents-header button {
  max-width: max-content;
}
.detail-header input, .detail-header--form--field input, .detail-header--form input, .detail-header--form--switch input,
.contents-header--form--field input,
.contents-header--form input,
.contents-header--form--switch input,
.contents-header input {
  margin-bottom: 0;
}
.detail-header input[type=date], .detail-header--form--field input[type=date], .detail-header--form input[type=date], .detail-header--form--switch input[type=date],
.contents-header--form--field input[type=date],
.contents-header--form input[type=date],
.contents-header--form--switch input[type=date],
.contents-header input[type=date] {
  height: 41px;
}
@media (min-width: 1280px) {
  .detail-header, .detail-header--form--field, .detail-header--form, .detail-header--form--switch,
  .contents-header--form--field,
  .contents-header--form,
  .contents-header--form--switch,
  .contents-header {
    display: grid;
    grid-auto-flow: column;
  }
}
.detail-header--function-controllers, .detail-header--document-controllers, .detail-header--controllers,
.contents-header--function-controllers,
.contents-header--document-controllers,
.contents-header--controllers {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  justify-content: start;
  align-items: center;
}
.detail-header--detail, .detail-header--detail div,
.contents-header--detail div,
.contents-header--detail {
  display: grid;
}
.detail-header--detail div,
.contents-header--detail div {
  gap: 0.4rem;
}
.detail-header--thumbnail,
.contents-header--thumbnail {
  display: grid;
  justify-content: center;
  align-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
}
.detail-header--thumbnail:hover,
.contents-header--thumbnail:hover {
  cursor: pointer;
}
.detail-header--thumbnail img,
.contents-header--thumbnail img {
  display: inline-block;
  object-fit: cover;
  width: 44px;
  height: 44px;
  transition: 100ms ease-in !important;
}
.detail-header--thumbnail img:hover,
.contents-header--thumbnail img:hover {
  transform: scale(1.8);
}
.detail-header--thumbnail-blank,
.contents-header--thumbnail-blank {
  background-color: var(--pico-secondary-background);
  width: 44px;
  height: 44px;
  transition: 100ms ease-in !important;
}
.detail-header--thumbnail-blank span,
.contents-header--thumbnail-blank span {
  display: grid;
  grid-auto-flow: column;
  width: 44px;
  height: 44px;
  justify-content: center;
  align-content: center;
  color: var(--pico-primary-inverse);
  font-size: 2rem;
  font-weight: 600;
}
.detail-header--thumbnail-blank:hover,
.contents-header--thumbnail-blank:hover {
  transform: scale(1.4);
}

.payments-form {
  display: grid;
  align-items: center;
  justify-items: start;
}
.payments-form div {
  width: 100%;
  display: grid;
  grid-auto-flow: column;
  gap: 0.5rem;
  align-items: center;
}
.payments-form div .end {
  justify-self: end;
}
.payments-form select, .payments-form input, .payments-form button {
  margin-bottom: 0;
}

.search-result a {
  text-decoration: none;
}
.search-result a:hover {
  text-decoration: underline;
}

.thumbnail {
  display: grid;
  justify-content: center;
  align-content: center;
  border-radius: 50%;
  overflow: hidden;
}
.thumbnail:hover {
  cursor: pointer;
}
.thumbnail img {
  display: inline-block;
  object-fit: cover;
  transition: 100ms ease-in !important;
}
.thumbnail img:hover {
  transform: scale(1.8);
}
.thumbnail-blank {
  background-color: var(--pico-secondary-background);
  transition: 100ms ease-in !important;
}
.thumbnail-blank span {
  display: grid;
  grid-auto-flow: column;
  justify-content: center;
  align-content: center;
  color: var(--pico-primary-inverse);
  font-weight: 600;
}
.thumbnail-blank:hover {
  transform: scale(1.6);
}

#info-area div {
  background-color: rgba(var(--color-4), 0.5);
  border-radius: var(--pico-border-radius);
  padding: 0.5rem 2rem;
}
#info-area div > * {
  color: var(--pico-primary-inverse);
}
#info-area div ul li {
  display: grid;
  gap: 0.4rem 0.8rem;
  grid-auto-flow: column;
  justify-content: center;
  align-items: center;
}
#info-area div button {
  margin: 0;
  padding: 0;
}

.function-menu, .function-menu div {
  display: grid;
  column-gap: 4px;
  row-gap: 8px;
}
.function-menu div {
  grid-template-columns: repeat(auto-fill, minmax(max-content, 150px));
}

#modal-video-display #scanner {
  width: 100%;
  object-fit: cover;
  aspect-ratio: 1.618/1;
  margin-bottom: 1rem;
}
@media (orientation: landscape) and (max-width: 800px) {
  #modal-video-display #scanner {
    width: 40%;
  }
}

#document {
  display: flex;
  align-items: center;
  justify-content: center;
}

.contents-search--form {
  display: grid;
  gap: 2rem;
}
.contents-search--form--btn {
  display: grid;
  grid-auto-flow: column;
  gap: 0.5rem;
}
.contents-search--form--btn button {
  width: 100%;
}

/*
status.scss
状態によってスタイルを変更するクラス
*/
.user-status--7 > *, .user-status--6 > * {
  color: var(--pico-muted-color);
}
.user-status--7 td, .user-status--6 td {
  background-color: transparent;
}
.user-status--10, .user-status--1 {
  background-color: rgba(var(--color-8), 0.7);
}
.user-status--10 > *, .user-status--1 > * {
  color: var(--pico-muted-color);
}
.user-status--10 td, .user-status--1 td {
  background-color: transparent;
}

.user-division--1001 {
  background-color: rgba(var(--color-1), 1);
}
.user-division--2001 {
  background-color: rgba(var(--color-2), 1);
}
.user-division--3001 {
  background-color: rgba(var(--color-3), 1);
}
.user-division--4001 {
  background-color: rgba(var(--color-4), 1);
}

.user-groups--1000,
.employee-groups--1000 {
  background-color: rgba(var(--color-primary), 1);
}
.user-groups--1001, .user-groups--1006,
.employee-groups--1001,
.employee-groups--1006 {
  background-color: rgba(var(--color-2), 1);
}
.user-groups--1002,
.employee-groups--1002 {
  background-color: rgba(var(--color-3), 1);
}
.user-groups--1004, .user-groups--1007,
.employee-groups--1004,
.employee-groups--1007 {
  background-color: rgba(var(--color-7), 1);
}
.user-groups--1005, .user-groups--1009, .user-groups--1008,
.employee-groups--1005,
.employee-groups--1009,
.employee-groups--1008 {
  background-color: rgba(var(--color-3), 1);
}
.user-groups--3001,
.employee-groups--3001 {
  background-color: rgba(var(--color-3), 1);
}
.user-groups--4001,
.employee-groups--4001 {
  background-color: rgba(var(--color-4), 1);
}

.gender--1, .gender--male,
.boolean--1,
.boolean--male {
  background-color: rgba(var(--color-2), 0.5) !important;
}
.gender--2, .gender--female,
.boolean--2,
.boolean--female {
  background-color: rgba(var(--color-4), 0.5) !important;
}

.gender--main--male {
  background-color: rgb(59, 130, 246);
}
.gender--main--female {
  background-color: rgb(236, 72, 153);
}
.gender--main--unknown {
  background-color: rgb(107, 114, 128);
}
.gender--dark--male {
  background-color: rgb(37, 99, 235);
}
.gender--dark--female {
  background-color: rgb(219, 39, 119);
}
.gender--dark--unknown {
  background-color: rgb(75, 85, 99);
}
.gender--light--male {
  background-color: rgba(59, 130, 246, 0.15);
}
.gender--light--female {
  background-color: rgba(236, 72, 153, 0.15);
}
.gender--light--unknown {
  background-color: rgba(156, 163, 175, 0.15);
}

.pet-status.clickable:hover td,
[class*=pet-status--].clickable:hover td {
  background-color: transparent !important;
  transition: none !important;
}
.pet-status.clickable:hover,
[class*=pet-status--].clickable:hover {
  background-image: linear-gradient(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05)) !important;
}

.pet-status--1 {
  background-color: rgba(var(--color-9), 0.5);
}
.pet-status--1 td {
  background-color: transparent;
}
.pet-status--2.flg {
  color: var(--pico-color);
}
.pet-status--3 {
  background-color: rgba(var(--color-4), 0.5);
}
.pet-status--3 td {
  background-color: transparent;
}
.pet-status--4 {
  background-color: rgba(var(--color-3), 0.5);
}
.pet-status--4 td {
  background-color: transparent;
}
.pet-status--5 {
  background-color: rgba(var(--color-6), 0.5);
}
.pet-status--5 td {
  background-color: transparent;
}
.pet-status--7 {
  background-size: auto auto;
  background-color: rgb(255, 255, 255);
  background-image: repeating-linear-gradient(126deg, transparent, transparent 4px, rgb(239, 236, 236) 4px, rgb(239, 236, 236) 5px);
  color: rgba(0, 0, 0, 0.4);
}
.pet-status--7 td {
  color: rgba(0, 0, 0, 0.4);
  background-color: transparent;
}
.pet-status--7.flg {
  color: inherit;
}
.pet-status--8 td {
  background-color: transparent;
}
.pet-status--99 {
  color: rgba(var(--color-text), 0.5);
}
.pet-status--99 td {
  background-color: transparent;
}

.clients-status--1, .clients-status--need_action {
  background-color: rgba(var(--color-4), 0.7);
}
.clients-status--1--clients-card, .clients-status--need_action--clients-card {
  border-left: 7px solid rgba(var(--color-4), 0.8);
}
.clients-status--2, .clients-status--resolved {
  background-color: rgba(var(--color-2), 0.7);
}
.clients-status--2--clients-card, .clients-status--resolved--clients-card {
  border-left: 7px solid rgba(var(--color-2), 0.8);
}
.clients-status--3, .clients-status--pending {
  background-color: rgba(var(--color-3), 0.7);
}
.clients-status--3--clients-card, .clients-status--pending--clients-card {
  border-left: 7px solid rgba(var(--color-3), 0.8);
}
.clients-status--4, .clients-status--done {
  background-color: rgba(var(--color-9), 0.7);
}
.clients-status--4--clients-card, .clients-status--done--clients-card {
  border-left: 7px solid rgba(var(--color-9), 0.8);
}
.clients-status--5, .clients-status--7 {
  background-color: rgba(var(--color-10), 0.5);
  color: rgba(var(--color-muted-text), 1);
}
.clients-status--6 {
  background-color: rgba(var(--color-5), 0.5);
  color: rgba(var(--color-text), 1);
}
.clients-status--99, .clients-status--deleted {
  background-color: rgba(var(--color-10), 0.3);
}
.clients-status--99--clients-card, .clients-status--deleted--clients-card {
  border-left: 7px solid rgba(var(--color-10), 0.3);
}

.sales-status.clickable:hover td,
[class*=sales-status--].clickable:hover td {
  background-color: transparent !important;
  transition: none !important;
}
.sales-status.clickable:hover,
[class*=sales-status--].clickable:hover {
  background-image: linear-gradient(rgba(0, 0, 0, 0.03), rgba(0, 0, 0, 0.03)) !important;
}

.sales-status--unpaid, tr.sales-status--unpaid {
  background-color: rgba(var(--color-unpaid), 0.6);
}
.sales-status--unpaid td, tr.sales-status--unpaid td {
  background-color: transparent;
}
.sales-status--paid, tr.sales-status--paid {
  background-color: rgba(var(--color-paid), 0.6);
}
.sales-status--paid td, tr.sales-status--paid td {
  background-color: transparent;
}
.sales-status--canceled, tr.sales-status--canceled {
  background-color: rgba(var(--color-canceled), 0.1);
}
.sales-status--canceled td, tr.sales-status--canceled td {
  background-color: transparent;
}

.sales-status--canceled {
  background-size: auto auto;
  background-color: rgba(var(--color-canceled), 0.1);
  background-image: repeating-linear-gradient(126deg, transparent, transparent 4px, rgba(255, 1, 1, 0.1) 4px, rgba(255, 1, 1, 0.4) 5px);
}

.bone-plan--1 {
  background-color: rgba(var(--color-1), 0.5);
}
.bone-plan--2 {
  background-color: rgba(var(--color-2), 0.5);
}
.bone-plan--3 {
  background-color: rgba(var(--color-3), 0.5);
}
.bone-plan--4 {
  background-color: rgba(var(--color-7), 0.5);
}

.channel--toychoku {
  background-color: rgba(var(--color-channel1), 0.6);
}
.channel--sankotsu {
  background-color: rgba(var(--color-channel2), 0.6);
}
.channel--pet_care {
  background-color: rgba(var(--color-channel3), 0.6);
}

.channel--1 {
  background-color: rgba(var(--color1), 1);
}
.channel--2 {
  background-color: rgba(var(--color-2), 1);
}
.channel--3 {
  background-color: rgba(var(--color-3), 1);
}

.auth--1 {
  background-color: rgba(var(--color-4), 0.5);
}
.auth--2 {
  background-color: rgba(var(--color-3), 0.5);
}
.auth--3 {
  background-color: rgba(var(--color-2), 0.5);
}
.auth--4 {
  background-color: rgba(var(--color-5), 0.5);
}

.terms--1, .terms--10, .terms--cash,
.payment-method--1,
.payment-method--10,
.payment-method--cash {
  background-color: rgba(var(--color-9), 1) !important;
  color: var(--pico-primary-inverse);
}
.terms--2, .terms--furikomi,
.payment-method--2,
.payment-method--furikomi {
  background-color: rgba(var(--color-2), 0.8) !important;
}
.terms--3, .terms--4, .terms--9, .terms--stores, .terms--rakuten, .terms--square,
.payment-method--3,
.payment-method--4,
.payment-method--9,
.payment-method--stores,
.payment-method--rakuten,
.payment-method--square {
  background-color: rgba(var(--color-3), 0.8) !important;
}
.terms--8, .terms--furikae,
.payment-method--8,
.payment-method--furikae {
  background-color: rgba(var(--color-3), 0.8) !important;
  color: var(--pico-primary-inverse);
  font-weight: 600;
}
.terms--5, .terms--6, .terms--7, .terms--yamato, .terms--aplus, .terms--orico,
.payment-method--5,
.payment-method--6,
.payment-method--7,
.payment-method--yamato,
.payment-method--aplus,
.payment-method--orico {
  background-color: rgba(var(--color-5), 0.2) !important;
}
.terms--10, .terms--daibiki,
.payment-method--10,
.payment-method--daibiki {
  background-color: rgba(0, 0, 0, 0.3) !important;
}
.terms.liner, .terms--yutai,
.payment-method.liner,
.payment-method--yutai {
  background-size: auto auto;
  background-color: rgb(255, 255, 255);
  background-image: repeating-linear-gradient(126deg, transparent, transparent 4px, rgb(239, 236, 236) 4px, rgb(239, 236, 236) 5px);
  color: rgba(0, 0, 0, 0.4);
}

/*
table.scss
pico.cssとの組み合わせ
テーブル
*/
table,
table.hover {
  border-radius: initial;
  border-collapse: separate;
  border-spacing: 0;
}
table tfoot,
table.hover tfoot {
  font-size: 1.5rem;
}
table tfoot tr th,
table.hover tfoot tr th {
  background-color: rgba(var(--color-8), 0.2);
}
table tfoot tr td,
table.hover tfoot tr td {
  border-top: none;
  border-bottom: var(--pico-border-width) solid var(--pico-table-border-color);
}
table input[type=text],
table.hover input[type=text] {
  min-width: 100px;
  max-height: 3rem;
  margin-bottom: 0;
}
table th,
table.hover th {
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
}
table th,
table td,
table.hover th,
table.hover td {
  --pico-border-width: 0.07rem;
}
table tr td,
table.hover tr td {
  transition: all 0.2s 0s ease;
  white-space: nowrap;
  display: table-cell;
}
table tr td.noborder,
table.hover tr td.noborder {
  border: none;
}
table tr td.normal,
table.hover tr td.normal {
  white-space: normal;
}
table tr td.memo,
table.hover tr td.memo {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  max-width: 300px;
}
table tr td.memo a,
table.hover tr td.memo a {
  justify-content: start;
}
table tr td select,
table.hover tr td select {
  margin-bottom: 0;
  height: auto;
  width: auto;
  padding: 0 2rem 0 0.5rem;
}
table tbody:first-child td,
table tbody:first-child th,
table.hover tbody:first-child td,
table.hover tbody:first-child th {
  border-bottom: var(--pico-border-width) solid var(--pico-table-border-color);
}
table tr:hover td,
table tbody tr:hover td,
table.hover tr:hover td,
table.hover tbody tr:hover td {
  background-color: var(--pico-text-selection-color);
}
table tbody tr.nohover:hover td,
table.hover tbody tr.nohover:hover td {
  background-color: inherit;
}
table th, table td, table tr,
table.hover th,
table.hover td,
table.hover tr {
  height: 3rem;
  padding: 0.2rem 0.4rem;
}

table.nohover tbody tr:hover td,
table.nohover tr:hover td {
  background-color: initial;
}

table.list th, table.list td, table.list tr {
  height: 36px;
}
table.list tr.list--new td:first-child {
  box-shadow: 4px 0 0 red inset;
  padding-left: 6px;
  font-weight: 600;
}
table.list input:not([type=checkbox], [type=radio]),
table.list select,
table.list textarea {
  margin: 0;
}
table.list button {
  margin-bottom: 0;
}
table.list a {
  color: inherit;
  text-decoration: none;
  display: flex;
  max-height: 100%;
  width: 100%;
  align-items: center;
  justify-content: center;
}
table.list td {
  text-align: left;
}
table.list td.center {
  text-align: center;
}
table.list .note {
  min-width: 200px;
  white-space: normal;
}
table.list tfoot {
  font-size: 1.5rem;
}
table.list tfoot tr th {
  background-color: rgba(var(--color-8), 0.2);
}
table.list tfoot tr td {
  border-bottom: var(--pico-border-width) solid var(--pico-table-border-color);
}

.sticky-scroll {
  overflow-y: scroll;
  overflow-x: auto;
  width: auto;
  height: 100vh;
}

table.sticky thead th {
  /* 縦スクロール時に固定する */
  position: sticky;
  top: 0;
  /* tbody内のセルより手前に表示する */
  z-index: 1;
}
table.sticky thead th::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
}

table.scrollable-table {
  /* テーブル全体のレイアウトを維持 */
  display: table;
  width: 100%;
  table-layout: fixed;
  /* theadを固定表示 */
  /* tbodyをスクロール可能に */
  /* tbody内のtrもtableとして表示 */
  /* tfootは通常表示 */
  /* 各カラムの最小幅を設定（コンテンツが潰れないように） */
}
table.scrollable-table thead {
  width: 100%;
  table-layout: fixed;
}
table.scrollable-table tbody {
  max-height: 200px;
  overflow-y: scroll;
  /* scroll に変更して常にスクロールバーを表示 */
  overflow-x: hidden;
  width: 100%;
}
table.scrollable-table tbody tr {
  width: calc(100% - 17px);
  /* スクロールバー幅(約17px)を引く */
  table-layout: fixed;
}
table.scrollable-table tfoot {
  display: table-footer-group;
}
table.scrollable-table th, table.scrollable-table td {
  overflow: hidden;
  text-overflow: ellipsis;
  /* 各カラムに最小幅を設定（必要に応じて調整） */
  /* 時刻 */
  /* 区分 */
  /* 金額 */
  /* 名称/詳細 */
  /* 項目 */
  /* 支払方法 */
  /* チャネル */
  /* 操作 */
}
table.scrollable-table th:nth-child(1), table.scrollable-table td:nth-child(1) {
  width: 10%;
  min-width: 80px;
}
table.scrollable-table th:nth-child(2), table.scrollable-table td:nth-child(2) {
  width: 10%;
  min-width: 90px;
}
table.scrollable-table th:nth-child(3), table.scrollable-table td:nth-child(3) {
  width: 12%;
  min-width: 100px;
}
table.scrollable-table th:nth-child(4), table.scrollable-table td:nth-child(4) {
  width: 20%;
  min-width: 150px;
}
table.scrollable-table th:nth-child(5), table.scrollable-table td:nth-child(5) {
  width: 12%;
  min-width: 100px;
}
table.scrollable-table th:nth-child(6), table.scrollable-table td:nth-child(6) {
  width: 12%;
  min-width: 100px;
}
table.scrollable-table th:nth-child(7), table.scrollable-table td:nth-child(7) {
  width: 12%;
  min-width: 100px;
}
table.scrollable-table th:nth-child(8), table.scrollable-table td:nth-child(8) {
  width: 8%;
  min-width: 60px;
}

table.sort-table th {
  cursor: pointer;
}

table.detail th, table.detail td, table.detail tr {
  height: 36px;
}
table.detail td {
  white-space: normal;
  text-align: center;
}
table.detail td.comment {
  white-space: normal;
  text-align: left;
  padding: 1rem;
}
table.detail td.comment div {
  transition: ease 1s;
}
table.detail td.comment.hidden {
  overflow: hidden;
}
table.detail td.comment.hidden div {
  transition: ease 1s;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 12;
}

table.cancel th,
table.cancel td {
  color: var(--pico-muted-color);
}

#schedulesTable th:first-child,
#schedulesTable td:first-child {
  position: sticky;
  left: 0;
  background: var(--pico-background-color);
  z-index: 1;
  white-space: nowrap;
}

#schedulesTable thead tr:first-child th:first-child {
  z-index: 2;
}

#schedulesTable td.today,
#schedulesTable th.today {
  font-weight: bold;
  border-left: 3px solid rgba(var(--color-3), 1);
  border-right: 3px solid rgba(var(--color-3), 1);
}

#schedulesTable th.today {
  background-color: rgba(var(--color-2), 0.4);
}

/* 横スクロールでも目立つように box-shadow 追加 */
#schedulesTable tr,
#schedulesTable tr td {
  text-align: center;
}

#schedulesTable th.holiday {
  color: rgba(var(--color-important), 1);
}

#schedulesTable th.saturday {
  color: rgba(var(--color-secondary), 1);
}

.schedulePatternCode1020, .schedulePatternCode1021, .schedulePatternCode1022, .schedulePatternCode1024, .schedulePatternCode2011 {
  background: rgba(var(--color-7), 1);
}
.schedulePatternCode1041, .schedulePatternCode1043, .schedulePatternCode1045 {
  background: rgba(var(--color-7), 0.5);
}
.schedulePatternCode1046, .schedulePatternCode1042, .schedulePatternCode1044 {
  background: rgba(var(--color-7), 1);
}
.schedulePatternCode1010, .schedulePatternCode1011, .schedulePatternCode1012, .schedulePatternCode2000, .schedulePatternCode2001 {
  background: rgba(var(--color-primary), 1);
}
.schedulePatternCode1013, .schedulePatternCode2002 {
  background: rgba(var(--color-secondary), 1);
}
.schedulePatternCode1023, .schedulePatternCode1025, .schedulePatternCode1026, .schedulePatternCode2012 {
  background: rgba(var(--color-3), 1);
}

.holidaysObtainedCode1, .holidaysObtainedCode10, .holidaysObtainedCode13, .holidaysObtainedCode2 {
  background-size: auto auto;
  background-color: var(--pico-code-background-color);
  background-image: repeating-linear-gradient(45deg, transparent, transparent 4px, rgba(255, 1, 1, 0.1) 4px, rgba(255, 1, 1, 0.4) 5px);
  color: rgba(var(--color-muted-text), 1);
}
.holidaysObtainedCode11 {
  background-size: auto auto;
  background-color: var(--pico-code-background-color);
  background-image: repeating-linear-gradient(45deg, transparent, transparent 4px, rgba(1, 1, 1, 0.1) 4px, rgba(1, 1, 1, 0.4) 5px);
  color: rgba(var(--color-muted-text), 1);
}

table.modal--edit tr,
table.modal--edit td, table.modal--create tr,
table.modal--create td {
  height: 100%;
}
table.modal--edit tr input,
table.modal--edit tr label,
table.modal--edit td input,
table.modal--edit td label, table.modal--create tr input,
table.modal--create tr label,
table.modal--create td input,
table.modal--create td label {
  margin-bottom: 0;
}
table.modal--edit tr input:not([type=file], [type=checkbox], [type=radio]),
table.modal--edit tr label:not([type=file], [type=checkbox], [type=radio]),
table.modal--edit td input:not([type=file], [type=checkbox], [type=radio]),
table.modal--edit td label:not([type=file], [type=checkbox], [type=radio]), table.modal--create tr input:not([type=file], [type=checkbox], [type=radio]),
table.modal--create tr label:not([type=file], [type=checkbox], [type=radio]),
table.modal--create td input:not([type=file], [type=checkbox], [type=radio]),
table.modal--create td label:not([type=file], [type=checkbox], [type=radio]) {
  height: initial;
  max-height: none;
}
table.modal--edit tr input:is([type=file]),
table.modal--edit tr label:is([type=file]),
table.modal--edit td input:is([type=file]),
table.modal--edit td label:is([type=file]), table.modal--create tr input:is([type=file]),
table.modal--create tr label:is([type=file]),
table.modal--create td input:is([type=file]),
table.modal--create td label:is([type=file]) {
  height: auto;
}
table.modal--edit tr div,
table.modal--edit td div, table.modal--create tr div,
table.modal--create td div {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
@media (min-width: 576px) {
  table.modal--edit tr div,
  table.modal--edit td div, table.modal--create tr div,
  table.modal--create td div {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
  }
}
table.modal--edit textarea, table.modal--create textarea {
  min-height: 80px;
  margin-bottom: 0;
}
table.modal--edit select, table.modal--create select {
  padding: 1rem 2rem 1rem 1rem;
}
table.modal--timecard-summary td {
  text-align: center;
  font-weight: 600;
}

/*
modal.scss
*/
dialog article {
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - var(--pico-spacing) * 7);
  overflow: hidden;
}
dialog article > header, dialog article > footer {
  flex-shrink: 0;
}
dialog article > section, dialog article > form, dialog article > main, dialog article > .modal-content {
  flex-grow: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  padding: var(--pico-spacing);
}
dialog article > section > .overflow-auto, dialog article > form > .overflow-auto, dialog article > main > .overflow-auto, dialog article > .modal-content > .overflow-auto {
  flex-grow: 1;
  overflow-y: auto;
}
dialog article footer button {
  width: 100%;
}

/*

headline

*/
.headline--01 {
  padding: 1rem 2rem;
  border-left: 4px dashed #000;
}
.headline--02 {
  position: relative;
  display: inline-block;
  padding: 0 2em;
  text-align: center;
}
.headline--02:before, .headline--02:after {
  font-family: "Font Awesome 5 Free", serif;
  line-height: 1;
  padding: 0 2rem;
  top: calc(50% - 0.5em);
  color: #eb6100;
}
.headline--02:before {
  left: 0;
  content: "\f101";
}
.headline--02:after {
  right: 0;
  content: "\f100";
}
.headline--03 {
  position: relative;
  overflow: hidden;
  padding: 1.5rem 2rem 1.5rem 130px;
  word-break: break-all;
  border-top: 1px solid #000;
  border-radius: 12px 0 0 0;
}
.headline--03 span {
  font-size: 3rem;
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  padding: 3px 20px;
  color: #fff;
  border-radius: 10px 0 20px 10px;
  background: #000;
}
.headline--04 {
  position: relative;
  padding: 1rem 0.5rem;
}
.headline--04.edit {
  padding: 0.7rem 0.5rem;
}
.headline--04:after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 6px;
  content: "";
  border-radius: 3px;
  background-image: linear-gradient(to left, #2af598 0%, #009efd 100%);
}
.headline--05 {
  font-size: 1.5em;
  border-bottom: var(--mr-kennel-form-element-border-color);
}
.headline--06 {
  position: relative;
  padding: 0.6em;
  background: -webkit-repeating-linear-gradient(-45deg, #fff5df, #fff5df 4px, #ffe4b1 3px, #ffe4b1 8px);
  background: repeating-linear-gradient(-45deg, #fff5df, #fff5df 4px, #ffe4b1 3px, #ffe4b1 8px);
  border-radius: 7px;
}
.headline--06:after {
  position: absolute;
  content: "";
  top: 100%;
  left: 30px;
  border: 15px solid transparent;
  border-top: 15px solid #ffebbe;
  width: 0;
  height: 0;
}
.headline--07 {
  position: relative;
  font-size: 26px;
  text-align: center;
}
.headline--07::before {
  content: attr(data-en);
  display: block;
  color: #e04272;
  font-size: 20px;
  text-transform: uppercase;
}
.headline--08 {
  position: relative;
  margin: 4rem 0;
  padding: 1rem;
  color: rgba(var(--color-1), 1);
  background: rgba(var(--color-2), 1);
  border: 4px solid rgba(var(--color-3), 1);
  border-radius: 10px;
}
.headline--08:after, .headline--08:before {
  bottom: 100%;
  left: 50%;
  border: solid transparent;
  content: "";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}
.headline--08:after {
  border-color: rgba(185, 248, 211, 0);
  border-bottom-color: var(--mr-kennel-form-element-border-color);
  border-width: 20px;
  margin-left: -20px;
}
.headline--08:before {
  border-color: rgba(231, 142, 169, 0);
  border-bottom-color: var(--mr-kennel-form-element-border-color);
  border-width: 26px;
  margin-left: -26px;
}
.headline--09 {
  margin-top: 1rem;
  padding-left: 2rem;
  border-bottom: 1px dashed var(--pico-muted-border-color);
}
.headline--10 {
  margin-top: 1rem;
  padding-left: 2rem;
  border-bottom: 1px solid var(--pico-muted-border-color);
}
.headline--11 {
  position: relative;
  padding: 1rem 2rem;
  text-align: center;
  color: #0075a9;
  border-radius: 0 10px 10px 10px;
  background: #d8ecf5;
  margin-top: 2rem;
}
.headline--11:before {
  font-family: "Font Awesome 5 Free", serif;
  position: absolute;
  top: -24px;
  left: 0;
  height: 24px;
  padding: 0 1em;
  content: "\f0a4  POINT";
  color: #fff;
  border-radius: 10px 10px 0 0;
  background: #0075a9;
}

/*
classes.scss
固有クラス
*/
.red {
  color: rgba(var(--color-important), 1);
}
.red::placeholder {
  color: rgba(var(--color-important), 0.5);
}
.red--light {
  color: rgba(var(--color-important), 0.5);
}

.green {
  color: rgba(var(--color-paid), 1);
}
.green::placeholder {
  color: rgba(var(--color-paid), 0.5);
}
.green--light {
  color: rgba(var(--color-paid), 0.5);
}

.blue {
  color: rgba(var(--color-primary), 1);
}
.blue::placeholder {
  color: rgba(var(--color-primary), 0.5);
}
.blue--light {
  color: rgba(var(--color-primary), 0.5);
}

.dot-new {
  background-color: #10b981;
  box-shadow: 0 0 6px rgba(16, 185, 129, 0.6);
  animation: pulse 1.6s infinite ease-in-out;
}

@keyframes pulse {
  0%, 100% {
    opacity: 0.7;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.3);
  }
}
.pre-wrap {
  white-space: pre-wrap;
  text-align: left;
  word-break: break-word;
}

.nowrap {
  white-space: nowrap;
}

.link, nav#global-nav ul.global-nav-ul li a {
  color: rgba(var(--color-link), 1) !important;
  text-decoration: none;
  display: inline-block;
  padding: 0.5rem 0.2rem;
  border-radius: var(--pico-border-radius);
}
.link:hover, nav#global-nav ul.global-nav-ul li a:hover {
  text-decoration: underline;
  color: rgba(var(--color-link-hover), 1) !important;
  background-color: rgba(var(--color-hover-background), 0.25);
  cursor: pointer;
}

.no_decoration, .no_decoration > * {
  text-decoration: none;
  list-style: none;
}
.asana--logo {
  background: no-repeat center url(img/asana.256x238.png);
  background-size: contain;
  height: 15px;
}

.line {
  color: #999;
  padding: 0;
  margin: 0;
  border: none;
  font-size: 2.5rem;
  font-weight: normal;
}
.line:hover {
  color: #00b900;
}
.line .fa-circle {
  color: white;
  font-size: large !important;
  top: -3px;
  left: 6px;
  position: absolute;
}

.disable {
  display: none;
}

.enable {
  display: block;
}

.clickable {
  cursor: pointer;
}
.clickable:hover {
  background-color: rgba(var(--color-hover-background), 0.25);
}
.clickable.active {
  background-color: rgba(var(--color-hover-background), 0.25);
  font-weight: bold;
}

.bold {
  font-weight: 600;
}

.highlight span,
.highlight mark {
  background: linear-gradient(transparent 80%, rgba(var(--color-highlight), 1) 80%);
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
}

.highlight--toychoku span, .highlight--toychoku mark {
  background: linear-gradient(transparent 60%, rgba(var(--color-channel1), 0.6) 60%);
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
}
.highlight--sankotsu span, .highlight--sankotsu mark {
  background: linear-gradient(transparent 60%, rgba(var(--color-channel2), 0.6) 60%);
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
}
.highlight--pet_care span, .highlight--pet_care mark {
  background: linear-gradient(transparent 60%, rgba(var(--color-channel3), 0.6) 60%);
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
}

.muted {
  color: rgba(var(--color-muted), 1);
}

.rem1 {
  font-size: 1rem !important;
}

.rem1half {
  font-size: 1.5rem !important;
}

.rem2 {
  font-size: 2rem !important;
}

.rem2half {
  font-size: 2.5rem !important;
}

.rem3 {
  font-size: 3rem !important;
}

.rem4 {
  font-size: 4rem !important;
}

.rem5 {
  font-size: 5rem !important;
}

.flg, .flg-search-result, .flg-search-result--category, .flg-search-result--notes, .flg-search-result--sales-bone, .flg-search-result--sales-pets, .flg-search-result--suppliers, .flg-search-result--products, .flg-search-result--pets, .flg-search-result--clients, .flg--required span, .flg--microchip span, .flg--label span, .flg--channel.pet_care, .flg--channel.sankotsu, .flg--channel.toychoku, .flg--contrast, .flg--secondary, .flg--primary, .flg--muted, .flg--minimal {
  border-radius: var(--border-radius);
  border: 0.1rem solid var(--pico-muted-border-color);
  white-space: nowrap;
  font-size: 1.5rem;
  padding: 0.2rem 1rem;
}
.flg:hover, .flg-search-result:hover, .flg-search-result--category:hover, .flg-search-result--notes:hover, .flg-search-result--sales-bone:hover, .flg-search-result--sales-pets:hover, .flg-search-result--suppliers:hover, .flg-search-result--products:hover, .flg-search-result--pets:hover, .flg-search-result--clients:hover, .flg--required span:hover, .flg--microchip span:hover, .flg--label span:hover, .flg--channel.pet_care:hover, .flg--channel.sankotsu:hover, .flg--channel.toychoku:hover, .flg--contrast:hover, .flg--secondary:hover, .flg--primary:hover, .flg--muted:hover, .flg--minimal:hover {
  filter: brightness(0.9);
  text-decoration: none !important;
}
.flg--minimal {
  font-size: 1rem;
  font-weight: bold;
}
.flg--muted {
  color: rgba(var(--color-muted), 1);
  border-color: var(--pico-muted-border-color);
}
.flg--primary {
  background-color: rgba(var(--color-primary), 1);
  border-color: var(--pico-primary-border);
}
.flg--secondary {
  background-color: rgba(var(--color-secondary), 1);
  color: var(--pico-secondary-inverse);
  border-color: var(--pico-secondary-border);
}
.flg--contrast {
  background-color: rgba(var(--color-contrast), 1);
  color: var(--pico-contrast-inverse);
  border-color: var(--pico-contrast-border);
}
.flg--channel.toychoku {
  background-color: rgba(var(--color-channel1), 0.6);
}
.flg--channel.sankotsu {
  background-color: rgba(var(--color-channel2), 0.6);
}
.flg--channel.pet_care {
  background-color: rgba(var(--color-channel3), 0.6);
}
.flg--microchip, .flg--label {
  position: relative;
}
.flg--microchip span, .flg--label span {
  background-color: rgba(var(--color-accent), 1);
  position: absolute;
  z-index: 10;
  top: -6px;
  font-size: 0.7rem;
  padding: 0.1rem;
  line-height: normal;
}
.flg--required {
  position: relative;
}
.flg--required span {
  background-color: rgba(var(--color-important), 1);
  position: absolute;
  z-index: 10;
  top: -6px;
  font-size: 0.7rem;
  padding: 0.1rem;
  line-height: normal;
}
.flg-search-result, .flg-search-result--category, .flg-search-result--notes, .flg-search-result--sales-bone, .flg-search-result--sales-pets, .flg-search-result--suppliers, .flg-search-result--products, .flg-search-result--pets, .flg-search-result--clients {
  display: inline-block;
}
.flg-search-result--clients {
  background-color: rgba(var(--color-1), 0.8);
}
.flg-search-result--pets {
  background-color: rgba(var(--color-3), 0.8);
}
.flg-search-result--products {
  background-color: rgba(var(--color-5), 0.8);
}
.flg-search-result--suppliers {
  background-color: rgba(var(--color-5), 0.8);
}
.flg-search-result--sales-pets {
  background-color: rgba(var(--color-2), 0.8);
}
.flg-search-result--sales-bone {
  background-color: rgba(var(--color-2), 0.8);
}
.flg-search-result--notes {
  background-color: rgba(var(--color-4), 0.8);
}
.flg-search-result--category {
  color: var(--pico-muted-color);
}

.tag input,
.tags input,
.tagsWrap input {
  display: none;
}
.tag button,
.tags button,
.tagsWrap button {
  width: 28px;
  height: 28px;
  padding: 0;
}
.tag button.btn--transparent, .tag button.nav-btn-large, .tag button.nav-btn-small,
.tags button.btn--transparent,
.tags button.nav-btn-large,
.tags button.nav-btn-small,
.tagsWrap button.btn--transparent,
.tagsWrap button.nav-btn-large,
.tagsWrap button.nav-btn-small {
  width: auto;
  height: auto;
  padding: 0.5rem;
}
.tag sup,
.tags sup,
.tagsWrap sup {
  position: unset;
  line-height: normal;
  padding: 0.3rem;
}
.tag.active input,
.tags.active input,
.tagsWrap.active input {
  display: block;
  height: 3rem;
  margin: 0;
}
.tag.active button,
.tags.active button,
.tagsWrap.active button {
  display: none;
}

.tag span {
  display: inline-flex;
  align-items: center;
  background-color: rgba(var(--color-muted), 0.2);
  /* 明るいグレー */
  color: rgba(var(--color-text), 0.8);
  font-weight: 600;
  font-size: 0.9rem;
  border-radius: 0.8rem;
  padding: 0.25rem 0.8rem;
  cursor: default;
  transition: all 0.2s ease;
  line-height: 1.4;
}
.tag span:hover {
  background-color: rgba(var(--color-muted), 0.6);
  color: rgba(var(--color-text), 1);
}

.note > *,
.text > * {
  display: -webkit-box !important;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  /* ここを2や3に変更することで、行数を指定 */
  white-space: normal;
}

.error--msg {
  margin: 1rem;
  padding: 1rem;
  background-color: var(--pico-code-background-color);
  box-shadow: var(--pico-box-shadow);
  white-space: normal;
}

.breadcrumbs {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.breadcrumbs a {
  text-decoration: none;
}
.breadcrumbs a:hover {
  text-decoration: underline;
}
.breadcrumbs--space {
  margin: 0 1rem 0 1.5rem;
}
.breadcrumbs--item:last-child span {
  padding: 0.5rem;
  border-radius: 75px;
  background-color: var(--pico-text-selection-color);
}
.breadcrumbs--addList span {
  color: var(--pico-primary-inverse);
  padding: 0.5rem;
  border-radius: 75px;
  background-color: var(--pico-form-element-invalid-active-border-color);
}

.mark {
  padding: 0.2rem 0.5rem;
  background-color: rgba(var(--color-accent), 1);
  color: rgba(var(--color-text), 1);
  vertical-align: baseline;
}

.box--01 {
  padding: 0.3rem 0.5rem;
  color: #565656;
  box-shadow: var(--pico-box-shadow);
  border: dashed 1px var(--pico-secondary-border);
  border-radius: 8px;
}
.box--01 > span,
.box--01 p,
.box--01 div {
  margin: 0;
  padding: 0;
}
.box--02 {
  padding: 0.3rem 0.5rem;
  border: solid 1px var(--pico-secondary-border);
  border-radius: var(--pico-border-radius);
}

.text-area--wrap {
  position: relative;
  font-size: 1.6rem;
  line-height: 16px;
}

.text-area--dummy {
  overflow: hidden;
  visibility: hidden;
  box-sizing: border-box;
  padding: 5px 15px;
  min-height: 120px;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: break-word;
  width: 100%;
}

.text-area {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  overflow: hidden;
  box-sizing: border-box;
  padding: 0.5rem 1rem 2rem;
  color: inherit;
  font: inherit;
  width: 100%;
  height: 100%;
  letter-spacing: inherit;
  resize: none;
}

[class*=name],
[id*=name],
[class*=tel],
[class*=email],
[name*=name],
[id*=num] {
  font-size: 1.6rem;
}

.debug-mode {
  height: 11px;
  background-color: var(--pico-primary-background);
  color: var(--pico-primary-inverse);
  font-size: xx-small;
  margin: 0;
  padding: 0 0 0 2rem;
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 91;
}

.debug-dump {
  background-color: rgba(var(--color-secondary-background), 1);
  color: rgba(var(--color-secondary-inverse), 1);
  font-family: monospace, Consolas, Monaco;
  font-size: 13px;
  line-height: 1.4;
  padding: 12px;
  border-radius: 6px;
  overflow-x: auto;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.editable div {
  min-height: 100%;
  min-width: 100%;
}

/* 初期は非表示 */
#loadingOverlay {
  display: none;
  /* ここに position/z-index は不要（popover時は top layer に乗る） */
}

/* popover が開いている時だけ表示＆レイアウト指定 */
#loadingOverlay:popover-open {
  position: fixed;
  inset: 0;
  display: flex;
  width: 100%;
  height: 100%;
  border: none;
  justify-content: center;
  align-items: center;
  background-color: rgba(var(--color-contrast), 0.4);
}

[aria-busy=true]::before {
  font-size: 3rem;
}

.spinner {
  color: rgba(var(--color-contrast-inverse), 1);
  font-size: 3rem;
}

.sortSwitch {
  padding: 0.2rem 0.3rem;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
}
.sortSwitch:hover {
  background-color: rgba(var(--color-hover-background), 1);
  border: 1px solid var(--pico-muted-border-color);
}

.is, .is--canceled, .is--lifetime {
  border-radius: var(--border-radius);
  border: 0.1rem solid var(--pico-muted-border-color);
  white-space: nowrap;
}
.is--lifetime {
  background-color: var(--pico-primary-background);
  color: var(--pico-primary-inverse);
}
.is--canceled {
  background-size: auto auto;
  background-color: rgba(var(--color-8), 0.5);
  background-image: repeating-linear-gradient(126deg, transparent, transparent 4px, rgba(255, 1, 1, 0.1) 4px, rgba(255, 1, 1, 0.4) 5px);
}

.short-context {
  display: inline-block;
  max-width: 200px;
  /* 表示領域の幅を調整 */
  white-space: nowrap;
  /* 改行させない */
  overflow: hidden;
  /* はみ出しを隠す */
  text-overflow: ellipsis;
  /* はみ出した部分を「…」に置き換え */
  vertical-align: middle;
}

.bg--red {
  background-color: rgba(var(--color-important), 1);
}
.bg--red::placeholder {
  background-color: rgba(var(--color-important), 0.5);
}
.bg--red--light {
  background-color: rgba(var(--color-important), 0.5);
}
.bg--red--light::placeholder {
  background-color: rgba(var(--color-important), 0.5);
}
.bg--green {
  background-color: rgba(var(--color-paid), 1);
}
.bg--green::placeholder {
  background-color: rgba(var(--color-paid), 0.5);
}
.bg--green--light {
  background-color: rgba(var(--color-paid), 0.5);
}
.bg--green--light::placeholder {
  background-color: rgba(var(--color-paid), 0.5);
}
.bg--blue {
  background-color: rgba(var(--color-primary), 1);
}
.bg--blue::placeholder {
  background-color: rgba(var(--color-primary), 0.5);
}
.bg--blue--light {
  background-color: rgba(var(--color-primary), 0.5);
}
.bg--blue--light::placeholder {
  background-color: rgba(var(--color-primary), 0.5);
}

.hatch-bg, .hatch-bg--receipt, .hatch-bg--payment, .hatch-bg--sales-status--canceled, .hatch-bg--sales-status--paid, .hatch-bg--sales-status--unpaid, .hatch-bg--channel--pet_care, .hatch-bg--channel--sankotsu, .hatch-bg--channel--toychoku {
  padding: 0.2em 0.4em;
  border-radius: 4px;
  background-color: rgba(var(--color-9), 0.1);
  background-image: repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1) 1px, transparent 1px, transparent 4px);
  backdrop-filter: blur(2px);
}
.hatch-bg--channel--toychoku {
  background-color: rgba(var(--color-channel1), 0.1);
}
.hatch-bg--channel--sankotsu {
  background-color: rgba(var(--color-channel2), 0.1);
}
.hatch-bg--channel--pet_care {
  background-color: rgba(var(--color-channel3), 0.1);
}
.hatch-bg--sales-status--unpaid {
  background-color: rgba(var(--color-unpaid), 0.6);
}
.hatch-bg--sales-status--paid {
  background-color: rgba(var(--color-paid), 0.6);
}
.hatch-bg--sales-status--canceled {
  background-color: rgba(var(--color-canceled), 0.1);
}
.hatch-bg--payment {
  background-color: rgba(var(--color-error), 0.3);
}
.hatch-bg--receipt {
  background-color: rgba(var(--color-primary), 0.3);
}

.icon, .icon--help {
  color: rgba(var(--color-primary), 1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  text-shadow: 1px 1px 0 #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.1));
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.icon:hover, .icon--help:hover {
  transform: scale(1.2) rotate(8deg);
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.2));
}
.icon--help {
  color: inherit;
  text-shadow: 1px 1px 0 rgba(var(--color-highlight), 1), -1px -1px 0 rgba(var(--color-highlight), 1), 1px -1px 0 rgba(var(--color-highlight), 1), -1px 1px 0 rgba(var(--color-highlight), 1);
}

@media print {
  input::placeholder,
  textarea::placeholder {
    color: transparent !important;
  }
}
/*
_button.scss
*/
.btn, .btn--tab, .btn--addTag, .btn--false, .btn--true, .btn--icon, .btn--transparent, nav#global-nav ul.global-nav-ul li ul li a, .hidden-menu--nav li a,
.main-menu--nav li a, .nav-btn-large, .nav-btn-small, .btn--function, .btn--muted, .btn--muted--small {
  font-weight: 600;
  line-height: 1.5;
  text-decoration: none;
  border-radius: var(--pico-border-radius);
  transition: 3s auto ease;
}
.btn:hover, .btn--tab:hover, .btn--addTag:hover, .btn--false:hover, .btn--true:hover, .btn--icon:hover, .btn--transparent:hover, nav#global-nav ul.global-nav-ul li ul li a:hover, .hidden-menu--nav li a:hover,
.main-menu--nav li a:hover, .nav-btn-large:hover, .nav-btn-small:hover, .btn--function:hover, .btn--muted:hover, .btn--muted--small:hover {
  cursor: pointer;
  text-decoration: none;
}
.btn:disabled, .btn--tab:disabled, .btn--addTag:disabled, .btn--false:disabled, .btn--true:disabled, .btn--icon:disabled, .btn--transparent:disabled, nav#global-nav ul.global-nav-ul li ul li a:disabled, .hidden-menu--nav li a:disabled,
.main-menu--nav li a:disabled, .nav-btn-large:disabled, .nav-btn-small:disabled, .btn--function:disabled, .btn--muted:disabled, .btn--muted--small:disabled {
  cursor: not-allowed;
}
.btn:focus, .btn--tab:focus, .btn--addTag:focus, .btn--false:focus, .btn--true:focus, .btn--icon:focus, .btn--transparent:focus, nav#global-nav ul.global-nav-ul li ul li a:focus, .hidden-menu--nav li a:focus,
.main-menu--nav li a:focus, .nav-btn-large:focus, .nav-btn-small:focus, .btn--function:focus, .btn--muted:focus, .btn--muted--small:focus {
  box-shadow: none;
}
.btn:active, .btn--tab:active, .btn--addTag:active, .btn--false:active, .btn--true:active, .btn--icon:active, .btn--transparent:active, nav#global-nav ul.global-nav-ul li ul li a:active, .hidden-menu--nav li a:active,
.main-menu--nav li a:active, .nav-btn-large:active, .nav-btn-small:active, .btn--function:active, .btn--muted:active, .btn--muted--small:active {
  color: rgba(var(--color-text), 0.5);
}
.btn i, .btn--tab i, .btn--addTag i, .btn--false i, .btn--true i, .btn--icon i, .btn--transparent i, nav#global-nav ul.global-nav-ul li ul li a i, .hidden-menu--nav li a i,
.main-menu--nav li a i, .nav-btn-large i, .nav-btn-small i, .btn--function i, .btn--muted i, .btn--muted--small i {
  margin: 0;
  padding: 0;
  color: inherit;
  border: none;
}
.btn--muted, .btn--muted--small {
  background-color: inherit;
  border: 1px solid var(--pico-muted-border-color);
  color: rgba(var(--color-link), 1);
}
.btn--muted--small {
  padding: 0.1rem 1rem;
}
.btn--muted:hover, .btn--muted--small:hover {
  background-color: rgba(var(--color-hover-background), 0.25);
  color: rgba(var(--color-hover-text), 1) !important;
}
.btn--function {
  background-color: rgba(var(--color-secondary), 1);
  border: 1px solid var(--pico-muted-border-color);
  color: rgba(var(--color-secondary-inverse), 1);
}
.btn--function:hover {
  background-color: rgba(var(--color-hover-background), 0.25);
  color: rgba(var(--color-hover-text), 1) !important;
}
.btn--transparent, nav#global-nav ul.global-nav-ul li ul li a, .hidden-menu--nav li a,
.main-menu--nav li a, .nav-btn-large, .nav-btn-small {
  background-color: initial;
  border: none;
  color: rgba(var(--color-link), 1);
  padding: 0.5rem 1rem;
}
.btn--transparent:hover, nav#global-nav ul.global-nav-ul li ul li a:hover, .hidden-menu--nav li a:hover,
.main-menu--nav li a:hover, .nav-btn-large:hover, .nav-btn-small:hover {
  background-color: rgba(var(--color-hover-background), 0.25);
  color: rgba(var(--color-hover-text), 1) !important;
  text-decoration: underline;
}
.btn--icon {
  background-color: initial;
  border: none;
  color: rgba(var(--color-link), 1);
  padding: 0.5rem 0.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  text-shadow: 1px 1px 0 #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.1));
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.btn--icon:hover {
  transform: scale(1.2) rotate(8deg);
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.2));
}
.btn--icon.toychoku {
  color: rgba(var(--color-channel1), 0.6);
}
.btn--icon.sankotsu {
  color: rgba(var(--color-channel2), 0.6);
}
.btn--icon.pet_care {
  color: rgba(var(--color-channel3), 0.6);
}
.btn--icon.has_cancel {
  color: rgba(var(--color-error), 1);
}
.btn--icon.is_vip {
  color: rgba(var(--color-highlight), 0.7);
}
.btn--icon.is_complaint {
  color: rgba(var(--color-important), 0.7);
}
.btn--icon.is_address_unknown {
  color: rgba(var(--color-contrast), 0.7);
}
.btn--icon.is_done {
  color: rgba(var(--color-primary), 0.7);
}
.btn--true {
  background-color: rgba(var(--color-primary), 0.5);
  border: 1px solid var(--pico-muted-border-color);
  color: rgba(var(--color-primary-inverse), 1);
}
.btn--true:hover {
  background-color: rgba(var(--color-hover-background), 0.25);
  color: rgba(var(--color-hover-text), 1) !important;
}
.btn--false {
  background-color: rgba(var(--color-warning), 0.5);
  border: 1px solid var(--pico-secondary-border);
  color: rgba(var(--color-text), 1);
}
.btn--false:hover {
  background-color: rgba(var(--color-warning), 0.25);
  color: rgba(var(--color-hover-text), 1) !important;
}
.btn--addTag {
  background-color: inherit;
  border: 1px solid var(--pico-muted-border-color);
  color: rgba(var(--color-muted-text), 1);
}
.btn--addTag:hover {
  background-color: rgba(var(--color-hover-background), 0.25);
  color: rgba(var(--color-hover-text), 1) !important;
}
.btn--modalCreate {
  border-radius: 30px;
  width: 60px;
  height: 60px;
  line-height: 0;
}
.btn--modalCreate i {
  font-size: xx-large;
  display: block;
}
.btn--liquid, .btn--liquid--pink, .btn--liquid--blue {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px) saturate(180%);
  -webkit-backdrop-filter: blur(10px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 2px 6px rgba(0, 0, 0, 0.15);
  color: rgba(var(--color-muted-text), 1);
  align-items: center;
  padding: 0.5em 0.8em;
  font-weight: 600;
  transition: all 0.25s ease;
  cursor: pointer;
}
.btn--liquid--blue {
  background-color: rgba(var(--color-link), 1);
  border: 1px solid var(--pico-muted-border-color);
  color: rgba(var(--color-primary-inverse), 1);
}
.btn--liquid--pink {
  background: rgba(255, 182, 193, 0.25);
  border-color: rgba(255, 182, 193, 0.4);
  color: #fff0f5;
}
.btn--liquid:hover, .btn--liquid--blue:hover, .btn--liquid--pink:hover {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 3px 8px rgba(0, 0, 0, 0.25);
  transform: translateY(-1px);
  color: rgba(var(--color-hover-text), 1);
}
.btn--liquid:active, .btn--liquid--blue:active, .btn--liquid--pink:active {
  background: rgba(255, 255, 255, 0.15);
  transform: translateY(1px) scale(0.98);
}
.btn--tab {
  background-color: rgba(var(--color-secondary), 1);
  border: 1px solid var(--pico-muted-border-color);
  color: rgba(var(--color-muted-text), 1);
  padding: 0.45rem 1.25rem;
  border-radius: 4px;
  white-space: nowrap;
  transition: all 0.1s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}
.btn--tab.active {
  background-color: rgba(var(--color-active), 1);
  border: none;
  color: rgba(var(--color-primary-inverse), 1);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  transform: translateY(1.5px);
}
.btn--tab:hover:not(.active) {
  background-color: rgba(var(--color-hover-background), 0.25);
  color: rgba(var(--color-hover-text), 1) !important;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
  transform: translateY(-1px);
}
.btn--tab:active {
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  transform: translateY(2px);
}

.round {
  border-radius: 30px;
  padding: 1rem;
  width: 60px;
  height: 60px;
}

[data-lucide] {
  width: 20px;
  height: 20px;
  stroke: rgba(var(--color-muted-text), 1);
  stroke-width: 1.5;
  fill: none;
  vertical-align: middle;
  transition: stroke 0.2s ease, transform 0.2s ease;
}
[data-lucide]:hover {
  stroke: rgba(var(--color-primary), 1);
  transform: scale(1.08);
}

/*
hiddenArea.scss
*/
/* prefers-reduced-motionクラスがある場合、アニメーションを無効にする */
:root.prefers-reduced-motion *,
*::before,
*::after {
  background-attachment: initial !important;
  animation-duration: 1ms !important;
  animation-delay: -1ms !important;
  animation-iteration-count: 1 !important;
  scroll-behavior: auto !important;
  transition-delay: 0s !important;
  transition-duration: 0s !important;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fadeOut {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(5px);
  }
}
.hiddenArea {
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease-in-out;
}
.hiddenArea.hiddenArea-is-open {
  opacity: 1;
  pointer-events: auto;
}
.hiddenArea.hiddenArea-is-opening {
  animation: fadeIn 200ms ease-in-out forwards;
}
.hiddenArea.hiddenArea-is-closing {
  animation: fadeOut 200ms ease-in-out forwards;
}

#comment {
  overflow: hidden;
  text-align: left;
  opacity: 1;
  transition: max-height 200ms ease-in-out;
}
#comment.hiddenArea-is-close, #comment.hiddenArea-is-closing {
  opacity: 1;
  max-height: 200px;
}
#comment.hiddenArea-is-open, #comment.hiddenArea-is-opening {
  opacity: 1;
  max-height: 1000px;
}

/*
_petColor.scss
*/
.pet-color--1 {
  background-color: rgba(255, 0, 0, 0.4) !important;
  color: var(--pico-primary-inverse);
}
.pet-color--2 {
  background-color: rgba(255, 140, 0, 0.6) !important;
  color: var(--pico-primary-inverse);
}
.pet-color--3 {
  background-color: rgba(255, 255, 240, 0.8) !important;
  color: var(--pico-muted-color);
}
.pet-color--4 {
  background-color: rgba(245, 245, 245, 0.8) !important;
  color: var(--pico-muted-color);
}
.pet-color--5 {
  background-color: rgba(0, 0, 0, 0.4) !important;
  color: var(--pico-primary-inverse);
}
.pet-color--5 a {
  color: var(--pico-primary-inverse);
}
.pet-color--6 {
  background-color: rgba(192, 192, 192, 0.8) !important;
  color: var(--pico-primary-inverse);
}
.pet-color--7 {
  background-color: rgba(165, 42, 42, 0.8) !important;
  color: var(--pico-primary-inverse);
}
.pet-color--7 a {
  color: var(--pico-primary-inverse);
}
.pet-color--8 {
  background-color: rgba(0, 0, 255, 0.4) !important;
  color: var(--pico-primary-inverse);
}
.pet-color--9 {
  background: linear-gradient(45deg, white 0%, whitesmoke 50%, red 50%, darkred 100%) !important;
  color: var(--pico-muted-color);
}
.pet-color--10 {
  background-color: gold !important;
  color: var(--pico-muted-color);
}
.pet-color--11 {
  background-color: beige !important;
  color: var(--pico-muted-color);
}
.pet-color--12 {
  background: linear-gradient(45deg, beige 0%, beige 50%, silver 50%, silver 100%) !important;
  color: var(--pico-muted-color);
}
.pet-color--13 {
  background-color: whitesmoke !important;
  color: var(--pico-muted-color);
}
.pet-color--14 {
  background: linear-gradient(45deg, black 0%, black 50%, darkred 50%, darkred 100%) !important;
  color: var(--pico-primary-inverse);
}
.pet-color--14 a {
  color: var(--pico-primary-inverse);
}
.pet-color--15 {
  background: linear-gradient(45deg, brown 0%, black 50%, darkred 50%, darkred 100%) !important;
  color: var(--pico-primary-inverse);
}
.pet-color--15 a {
  color: var(--pico-primary-inverse);
}

@media print {
  body > main {
    padding-block: 0;
  }
}
.print section {
  padding-bottom: 0;
}
.print--base, .A4P-A,
.estimate,
.tebiki, .kennel-list, .vaccine-certificate, .pets-profiles .page, .puppy-chart .page, .rabies-certificate .page, .pets, .A5L-B, .detailed-statement,
.A4P-B, .pA4, .boneB5, .boneA4 {
  /*最後のページは改ページを入れlない*/
}
.print--base input, .A4P-A input,
.estimate input,
.tebiki input, .kennel-list input, .vaccine-certificate input, .pets-profiles .page input, .puppy-chart .page input, .rabies-certificate .page input, .pets input, .A5L-B input, .detailed-statement input,
.A4P-B input, .pA4 input, .boneB5 input, .boneA4 input {
  text-align: center;
  background-color: initial !important;
  font-size: inherit;
  margin: 0;
}
@media screen {
  .print--base, .A4P-A,
  .estimate,
  .tebiki, .kennel-list, .vaccine-certificate, .pets-profiles .page, .puppy-chart .page, .rabies-certificate .page, .pets, .A5L-B, .detailed-statement,
  .A4P-B, .pA4, .boneB5, .boneA4 {
    background: var(--pico-card-background-color);
    box-shadow: var(--pico-card-box-shadow);
  }
}
@media print {
  .print--base *, .A4P-A *,
  .estimate *,
  .tebiki *, .kennel-list *, .vaccine-certificate *, .pets-profiles .page *, .puppy-chart .page *, .rabies-certificate .page *, .pets *, .A5L-B *, .detailed-statement *,
  .A4P-B *, .pA4 *, .boneB5 *, .boneA4 * {
    color: #000;
  }
  .print--base table td, .A4P-A table td,
  .estimate table td,
  .tebiki table td, .kennel-list table td, .vaccine-certificate table td, .pets-profiles .page table td, .puppy-chart .page table td, .rabies-certificate .page table td, .pets table td, .A5L-B table td, .detailed-statement table td,
  .A4P-B table td, .pA4 table td, .boneB5 table td, .boneA4 table td, .print--base table th, .A4P-A table th,
  .estimate table th,
  .tebiki table th, .kennel-list table th, .vaccine-certificate table th, .pets-profiles .page table th, .puppy-chart .page table th, .rabies-certificate .page table th, .pets table th, .A5L-B table th, .detailed-statement table th,
  .A4P-B table th, .pA4 table th, .boneB5 table th, .boneA4 table th, .print--base table tr, .A4P-A table tr,
  .estimate table tr,
  .tebiki table tr, .kennel-list table tr, .vaccine-certificate table tr, .pets-profiles .page table tr, .puppy-chart .page table tr, .rabies-certificate .page table tr, .pets table tr, .A5L-B table tr, .detailed-statement table tr,
  .A4P-B table tr, .pA4 table tr, .boneB5 table tr, .boneA4 table tr {
    border-color: var(--pico-muted-color);
  }
  .print--base input, .A4P-A input,
  .estimate input,
  .tebiki input, .kennel-list input, .vaccine-certificate input, .pets-profiles .page input, .puppy-chart .page input, .rabies-certificate .page input, .pets input, .A5L-B input, .detailed-statement input,
  .A4P-B input, .pA4 input, .boneB5 input, .boneA4 input, .print--base textarea, .A4P-A textarea,
  .estimate textarea,
  .tebiki textarea, .kennel-list textarea, .vaccine-certificate textarea, .pets-profiles .page textarea, .puppy-chart .page textarea, .rabies-certificate .page textarea, .pets textarea, .A5L-B textarea, .detailed-statement textarea,
  .A4P-B textarea, .pA4 textarea, .boneB5 textarea, .boneA4 textarea {
    background-color: initial !important;
    border: none !important;
  }
}
.print--base:last-child, .A4P-A:last-child,
.estimate:last-child,
.tebiki:last-child, .kennel-list:last-child, .vaccine-certificate:last-child, .pets-profiles .page:last-child, .puppy-chart .page:last-child, .rabies-certificate .page:last-child, .pets:last-child, .A5L-B:last-child, .detailed-statement:last-child,
.A4P-B:last-child, .pA4:last-child, .boneB5:last-child, .boneA4:last-child {
  page-break-after: auto;
}
.print--font1 *, .A4P-A *,
.estimate *,
.tebiki *, .vaccine-certificate *, .pets-profiles .page *, .pets *, .A5L-B *, .detailed-statement *,
.A4P-B *, .pA4 *, .boneB5 *, .boneA4 * {
  font-family: "Noto Serif JP", serif, "Font Awesome 5 Free";
  margin: 0;
}
.print--font1 h1, .A4P-A h1,
.estimate h1,
.tebiki h1, .vaccine-certificate h1, .pets-profiles .page h1, .pets h1, .A5L-B h1, .detailed-statement h1,
.A4P-B h1, .pA4 h1, .boneB5 h1, .boneA4 h1 {
  font-size: 4rem;
}
.print--font1 h2, .A4P-A h2,
.estimate h2,
.tebiki h2, .vaccine-certificate h2, .pets-profiles .page h2, .pets h2, .A5L-B h2, .detailed-statement h2,
.A4P-B h2, .pA4 h2, .boneB5 h2, .boneA4 h2 {
  font-size: 3rem;
}
.print--font1 h3, .A4P-A h3,
.estimate h3,
.tebiki h3, .vaccine-certificate h3, .pets-profiles .page h3, .pets h3, .A5L-B h3, .detailed-statement h3,
.A4P-B h3, .pA4 h3, .boneB5 h3, .boneA4 h3 {
  font-size: 2.5rem;
}
.print--font1 h4, .A4P-A h4,
.estimate h4,
.tebiki h4, .vaccine-certificate h4, .pets-profiles .page h4, .pets h4, .A5L-B h4, .detailed-statement h4,
.A4P-B h4, .pA4 h4, .boneB5 h4, .boneA4 h4 {
  font-size: 2rem;
}
.print--font1 h5, .A4P-A h5,
.estimate h5,
.tebiki h5, .vaccine-certificate h5, .pets-profiles .page h5, .pets h5, .A5L-B h5, .detailed-statement h5,
.A4P-B h5, .pA4 h5, .boneB5 h5, .boneA4 h5 {
  font-size: 1.4rem;
}
.print--font1 span, .A4P-A span,
.estimate span,
.tebiki span, .vaccine-certificate span, .pets-profiles .page span, .pets span, .A5L-B span, .detailed-statement span,
.A4P-B span, .pA4 span, .boneB5 span, .boneA4 span,
.print--font1 p,
.A4P-A p,
.estimate p,
.tebiki p,
.vaccine-certificate p,
.pets-profiles .page p,
.pets p,
.A5L-B p,
.detailed-statement p,
.A4P-B p,
.pA4 p,
.boneB5 p,
.boneA4 p {
  font-size: 1.4rem;
}
.print--font1 ul li, .A4P-A ul li,
.estimate ul li,
.tebiki ul li, .vaccine-certificate ul li, .pets-profiles .page ul li, .pets ul li, .A5L-B ul li, .detailed-statement ul li,
.A4P-B ul li, .pA4 ul li, .boneB5 ul li, .boneA4 ul li,
.print--font1 dl dd,
.A4P-A dl dd,
.estimate dl dd,
.tebiki dl dd,
.vaccine-certificate dl dd,
.pets-profiles .page dl dd,
.pets dl dd,
.A5L-B dl dd,
.detailed-statement dl dd,
.A4P-B dl dd,
.pA4 dl dd,
.boneB5 dl dd,
.boneA4 dl dd,
.print--font1 dl dt,
.A4P-A dl dt,
.estimate dl dt,
.tebiki dl dt,
.vaccine-certificate dl dt,
.pets-profiles .page dl dt,
.pets dl dt,
.A5L-B dl dt,
.detailed-statement dl dt,
.A4P-B dl dt,
.pA4 dl dt,
.boneB5 dl dt,
.boneA4 dl dt, .print--font1 ol li, .A4P-A ol li,
.estimate ol li,
.tebiki ol li, .vaccine-certificate ol li, .pets-profiles .page ol li, .pets ol li, .A5L-B ol li, .detailed-statement ol li,
.A4P-B ol li, .pA4 ol li, .boneB5 ol li, .boneA4 ol li {
  font-size: 1.4rem;
  margin: 0.2rem 0 0;
}
.print--font1 table, .A4P-A table,
.estimate table,
.tebiki table, .vaccine-certificate table, .pets-profiles .page table, .pets table, .A5L-B table, .detailed-statement table,
.A4P-B table, .pA4 table, .boneB5 table, .boneA4 table {
  font-size: 1.4rem;
}
.print--font1 small, .A4P-A small,
.estimate small,
.tebiki small, .vaccine-certificate small, .pets-profiles .page small, .pets small, .A5L-B small, .detailed-statement small,
.A4P-B small, .pA4 small, .boneB5 small, .boneA4 small {
  font-size: 1rem;
  margin: 1rem 0;
}
.print--font2 h1, .puppy-chart .page h1, .rabies-certificate .page h1,
.print--font2 h2,
.puppy-chart .page h2,
.rabies-certificate .page h2,
.print--font2 h3,
.puppy-chart .page h3,
.rabies-certificate .page h3,
.print--font2 h4,
.puppy-chart .page h4,
.rabies-certificate .page h4,
.print--font2 h5,
.puppy-chart .page h5,
.rabies-certificate .page h5,
.print--font2 h6,
.puppy-chart .page h6,
.rabies-certificate .page h6,
.print--font2 p,
.puppy-chart .page p,
.rabies-certificate .page p,
.print--font2 span,
.puppy-chart .page span,
.rabies-certificate .page span,
.print--font2 ul li,
.puppy-chart .page ul li,
.rabies-certificate .page ul li,
.print--font2 dl dd,
.puppy-chart .page dl dd,
.rabies-certificate .page dl dd,
.print--font2 dl dt,
.puppy-chart .page dl dt,
.rabies-certificate .page dl dt,
.print--font2 ol li,
.puppy-chart .page ol li,
.rabies-certificate .page ol li,
.print--font2 table,
.puppy-chart .page table,
.rabies-certificate .page table,
.print--font2 small,
.puppy-chart .page small,
.rabies-certificate .page small {
  font-family: YakuHanJPs, Roboto, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", Arial, nc3Jp, sans-serif !important;
  margin: 0;
}
.print--font2 h1, .puppy-chart .page h1, .rabies-certificate .page h1 {
  font-size: 4rem;
}
.print--font2 h2, .puppy-chart .page h2, .rabies-certificate .page h2 {
  font-size: 3rem;
}
.print--font2 h3, .puppy-chart .page h3, .rabies-certificate .page h3 {
  font-size: 2.5rem;
}
.print--font2 h4, .puppy-chart .page h4, .rabies-certificate .page h4 {
  font-size: 2rem;
}
.print--font2 h5, .puppy-chart .page h5, .rabies-certificate .page h5 {
  font-size: 1.4rem;
}
.print--font2 span, .puppy-chart .page span, .rabies-certificate .page span,
.print--font2 p,
.puppy-chart .page p,
.rabies-certificate .page p {
  font-size: 1.4rem;
}
.print--font2 ul li, .puppy-chart .page ul li, .rabies-certificate .page ul li,
.print--font2 dl dd,
.puppy-chart .page dl dd,
.rabies-certificate .page dl dd,
.print--font2 dl dt,
.puppy-chart .page dl dt,
.rabies-certificate .page dl dt, .print--font2 ol li, .puppy-chart .page ol li, .rabies-certificate .page ol li {
  font-size: 1.4rem;
  margin: 0.2rem 0 0;
}
.print--font2 table, .puppy-chart .page table, .rabies-certificate .page table {
  font-size: 1.4rem;
}
.print--font2 small, .puppy-chart .page small, .rabies-certificate .page small {
  font-size: 1rem;
  margin: 1rem 0;
}
.print--table table, .kennel-list table {
  width: 100%;
  table-layout: fixed;
  break-inside: auto; /* テーブル内の改ページを許可する */
  word-break: break-all;
}
.print--table thead, .kennel-list thead {
  display: table-header-group;
}
.print--table tfoot, .kennel-list tfoot {
  display: table-footer-group;
}
.print--table tr, .kennel-list tr {
  break-inside: avoid; /* 行内の改ページを避ける */
  break-after: auto; /* 行の後で改ページを許可する */
}
.print--table tr:hover td, .kennel-list tr:hover td {
  background: inherit;
}

.boneA4 {
  width: 148mm;
  height: 210mm;
  page-break-after: always;
  box-sizing: border-box;
}
@page {
  .boneA4 {
    size: A4 portrait;
  }
}
.boneA4--img {
  background-image: url(../img/haikei-shoumeisho.png);
  background-size: 688px 971px;
  background-repeat: no-repeat;
}
.boneA4 h1 {
  font-size: 5rem;
  margin: 0 0 1rem 0;
}
.boneA4 h2 {
  font-size: 4rem;
  margin: 0 0 1rem 0;
}
.boneA4 h3,
.boneA4 h4,
.boneA4 span {
  font-size: 3rem;
  margin: 0 0 1rem 0;
}
.boneA4 p {
  font-size: 2rem;
  margin: 1rem 0;
}
.boneA4 small {
  font-size: 1.2rem;
  color: #000;
  margin: 2rem 0;
}

.boneB5 {
  /*B5縦*/
  width: 172mm;
  height: 251mm;
  page-break-after: always;
  box-sizing: border-box;
}
@page {
  .boneB5 {
    size: B5 Portrait;
    margin: 0;
  }
}
.boneB5--img {
  background-image: url(../img/haikei-shoumeishoB5.png);
  background-size: 650px 949px;
  background-repeat: no-repeat;
}
.boneB5 h1 {
  font-size: 7rem;
  margin: 0;
}
.boneB5 h2 {
  font-size: 6rem;
  margin: 0;
}
.boneB5 h3,
.boneB5 h4,
.boneB5 span {
  font-size: 4rem;
  margin: 0;
}
.boneB5 p {
  font-size: 2rem;
  margin: 1rem 0 0;
}
.boneB5 small {
  font-size: 1.2rem;
  color: #000;
  margin: 1rem 0;
}

@page {
  .pA4 {
    size: A4 portrait;
    margin: 0 auto 0 auto;
  }
}
.pA4--company {
  position: relative;
}
.pA4--company-mark {
  position: absolute;
  height: 80%;
  /* width: 40%; */
  bottom: 0;
  right: 0;
}

.detailed-statement,
.A4P-B {
  position: relative;
  line-height: normal;
  margin: 0 auto 2rem;
  padding: 2rem 3rem;
}
@page {
  .detailed-statement,
  .A4P-B {
    size: A4 portrait;
  }
}
@media screen {
  .detailed-statement,
  .A4P-B {
    max-width: 210mm;
    min-height: 290mm;
  }
}
@media print {
  .detailed-statement,
  .A4P-B {
    width: 210mm;
    height: 297mm;
    margin-bottom: 0;
  }
}
.detailed-statement table,
.A4P-B table {
  width: 100%;
  table-layout: fixed;
  break-inside: auto; /* テーブル内の改ページを許可する */
  word-break: break-all;
}
.detailed-statement thead,
.A4P-B thead {
  display: table-header-group;
}
.detailed-statement tfoot,
.A4P-B tfoot {
  display: table-footer-group;
}
.detailed-statement tr,
.A4P-B tr {
  break-inside: avoid; /* 行内の改ページを避ける */
  break-after: auto; /* 行の後で改ページを許可する */
}
.detailed-statement tr:hover td,
.A4P-B tr:hover td {
  background: inherit;
}
.detailed-statement th,
.A4P-B th {
  background-color: #d8d8d8;
}
.detailed-statement th small,
.A4P-B th small {
  color: inherit;
  font-size: xx-small;
}
.detailed-statement i,
.A4P-B i {
  border: none;
  font-size: 1.5rem;
  margin: 0.5rem 0 0.5rem 0.5rem;
  padding: 0;
  /* text-shadow: 0px 0px 1px var(--colorA); */
}
.detailed-statement td,
.A4P-B td {
  text-align: center;
  width: 100%;
  white-space: nowrap;
}
.detailed-statement td.comment,
.A4P-B td.comment {
  white-space: normal;
  text-align: left;
  padding: 1rem;
}
.detailed-statement--footer-table01,
.A4P-B--footer-table01 {
  table-layout: fixed;
  word-break: break-all;
  display: inline-table;
}
.detailed-statement--footer-table01 small,
.A4P-B--footer-table01 small {
  font-size: small;
  color: #999;
}
.detailed-statement--footer-table01 tr:hover td,
.A4P-B--footer-table01 tr:hover td {
  background: inherit;
}
.detailed-statement--footer-table02,
.A4P-B--footer-table02 {
  width: 100%;
  table-layout: fixed;
  word-break: break-all;
  display: inline-table;
}
.detailed-statement--footer-table02 tr:hover td,
.A4P-B--footer-table02 tr:hover td {
  background: inherit;
}

.A5L-B {
  position: relative;
  line-height: normal;
  margin: 0 auto 2rem;
  padding: 2rem 3rem;
}
@page {
  .A5L-B {
    size: A5 landscape;
  }
}
@media screen {
  .A5L-B {
    max-width: 210mm;
    min-height: 148mm;
  }
}
@media print {
  .A5L-B {
    width: 210mm;
    height: 148mm;
  }
}

.pets {
  line-height: normal;
}
@page {
  .pets {
    size: A4 portrait;
    margin: 0 auto 0 auto;
  }
}
.pets main {
  margin: 0;
  padding: 0;
  position: relative;
  height: 272mm;
}
@media screen {
  .pets {
    background: #eee;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .pets main {
    background: white; /* 背景を白く */
    box-shadow: 0 0.5mm 2mm rgba(0, 0, 0, 0.3); /* ドロップシャドウ */
    margin: 5mm;
    padding: 2rem 0;
    height: 272mm;
  }
}
.pets header {
  margin: 0 2rem;
}
.pets article {
  max-width: 180mm;
  margin: 0 4rem;
}
.pets footer {
  text-align: center;
  margin: auto auto 0;
}
.pets .customer_name {
  font-size: x-large;
  width: 500px;
  padding-left: 6rem;
}
.pets .under_line {
  text-decoration: underline;
}
.pets h2 {
  text-align: center;
  padding: 0.5rem 2rem;
  border-left: 40px solid #999;
  border-right: 40px solid #999;
  background: #d8d8d8;
  color: #000;
}
.pets h3 {
  color: #000;
  background-color: #d8d8d8;
  padding: 0.2rem 4rem;
  border-left: 4px solid #999;
}
.pets h4 {
  margin: 0;
}
.pets table {
  margin: 1rem;
  font-size: medium;
}
.pets table tr:hover td {
  background-color: transparent;
}
.pets table th {
  background-color: #999;
  color: white;
}
.pets dl dt {
  font-size: medium;
  font-weight: 600;
  margin-top: 1rem;
}
.pets p span, .pets dl span {
  text-decoration: underline;
  font-size: medium;
}
.pets footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  margin: 0;
  padding: 0;
}
.pets footer p {
  text-align: center;
}

.rabies-certificate .page {
  box-sizing: border-box;
  margin: 0 auto 1rem;
  height: 293mm;
  width: 210mm;
  display: grid;
  grid-template-rows: repeat(2, 1fr);
  break-inside: avoid-page;
}
.rabies-certificate .page section {
  padding: 1rem 2rem;
}
.rabies-certificate .page section:nth-of-type(odd) {
  border-bottom: 1px dotted;
}
.rabies-certificate .page:last-child {
  page-break-after: auto;
}
.rabies-certificate--wrap {
  border: 3px solid;
  margin: 3rem 0 2rem;
  width: 100%;
  padding: 2rem 1rem;
}
.rabies-certificate--header span {
  margin: 0 1rem;
  min-width: 200px;
  display: inline-block;
}
.rabies-certificate--h1 {
  text-align: center;
  padding: 1rem;
}
.rabies-certificate--table {
  width: 90%;
  display: inline-table;
  margin: 1rem auto;
}
.rabies-certificate--content {
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin: 1rem;
}
.rabies-certificate--content span {
  margin: 0 1rem;
  min-width: 300px;
  display: inline-block;
}
.rabies-certificate--footer {
  padding-left: 2rem;
  margin-bottom: 1rem;
}
.rabies-certificate--footer--msg {
  margin: 1rem auto;
}
.rabies-certificate--footer--msg input[name=date_inoculation] {
  font-weight: 600;
}
@media print {
  .rabies-certificate--footer--msg input[name=date_inoculation] {
    border: none;
    background-image: none;
    padding-right: 0;
  }
}

.puppy-chart .page {
  box-sizing: border-box;
  margin: 0 auto 1rem;
  height: 210mm;
  width: 293mm;
  display: grid;
  grid-template-columns: repeat(auto-fit, 369px);
}
.puppy-chart .page section {
  border: 1px dotted;
  border-left: none;
  padding: 30px 0.5rem 1rem 0.5rem;
  margin-bottom: 0;
}
.puppy-chart .page section:first-of-type {
  border-left: 1px dotted;
}
.puppy-chart .page:last-child {
  page-break-after: auto;
}
.puppy-chart--table tr:hover td {
  background-color: initial;
}
.puppy-chart--table .gender--mark {
  color: white;
  font-size: 5rem;
}
@media print {
  .puppy-chart--table .gender--mark {
    color: white !important;
  }
}
.puppy-chart--table td {
  border-right: 1px solid var(--pico-table-border-color);
  text-align: center;
}
.puppy-chart--table td:last-child {
  border-right: none;
}
.puppy-chart--table tbody th {
  background-color: rgba(0, 0, 0, 0.1);
}
.puppy-chart--h1 {
  font-size: 50px;
  color: #000;
}
.puppy-chart--content {
  font-size: larger;
  font-weight: 600;
}
.puppy-chart--content-important {
  height: 60px;
  font-size: 2rem;
  font-weight: 600;
  box-shadow: 0 -4px 0 red inset;
}
.puppy-chart--box1 {
  height: 110px;
  max-height: 110px;
  /* width: 100%; */
  text-align: left;
  vertical-align: top;
}
.puppy-chart--box2 {
  max-height: 110px;
  text-align: left;
}
.puppy-chart--box2 div {
  display: grid;
  grid-template-columns: 100px 1fr;
}
.puppy-chart--td15 td {
  width: 20px;
}
.puppy-chart .fault {
  font-weight: 600;
  color: red;
  text-align: left;
  white-space: normal;
}
@media print {
  .puppy-chart .fault {
    color: red;
  }
}

.pets-profiles .page {
  box-sizing: border-box;
  margin: 0 auto 1rem;
  page-break-after: always;
  width: 420mm;
  height: 297mm;
  padding: 1rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, 219px);
  grid-template-rows: max-content;
  gap: 0.5rem;
  /*最後のページは改ページを入れlない*/
}
.pets-profiles .page:last-child {
  page-break-after: auto;
}
.pets-profiles .page .pets-profile {
  height: 270px;
  margin: 0;
}
.pets-profiles .page .pets-profile--thumbnail {
  position: relative;
}
.pets-profiles .page .pets-profile--img {
  width: 100%;
  height: 124px;
}
.pets-profiles .page .pets-profile--img img {
  object-fit: cover;
  width: 100%;
  height: 124px;
}
.pets-profiles .page .pets-profile--emptyImg {
  width: 100%;
  height: 124px;
}
.pets-profiles .page .pets-profile .qr {
  position: absolute;
  top: 2%;
  right: 5px;
  z-index: 1;
  width: 50px;
  height: 50px;
}
.pets-profiles .page .pets-profile .pets-profile--pet-name {
  text-align: center;
  font-size: 3rem;
  padding: 1rem;
  overflow: hidden;
  white-space: nowrap;
}
.pets-profiles .page .pets-profile .pets-profile--details > div {
  margin-top: 0.5rem;
}
.pets-profiles .page .pets-profile .pets-profile--details-1, .pets-profiles .page .pets-profile .pets-profile--details-2 {
  display: grid;
  gap: 0.5rem;
  border-bottom: 1px solid var(--pico-table-border-color);
  grid-template-columns: 1.5fr 1fr;
  justify-content: center;
}
.pets-profiles .page .pets-profile .pets-profile--details-3 {
  overflow: hidden;
  height: 100%;
}
@media print {
  .pets-profiles .page .pets-profile .pets-profile--details-3 span {
    color: red;
  }
}

.vaccine-certificate {
  position: relative;
  margin: 0 auto;
  padding-top: 1rem;
  line-height: 1.5rem;
  width: 205mm;
  border: 1px dotted;
  border-top: none;
}
.vaccine-certificate:first-child {
  border-top: 1px dotted;
}
.vaccine-certificate--disable {
  display: none;
}
.vaccine-certificate--wrap {
  border-radius: 3px 3px 3px 3px;
  -webkit-border-radius: 3px 3px 3px 3px;
  -moz-border-radius: 3px 3px 3px 3px;
  border: 5px solid #a96b63;
  height: 90mm;
  width: 190mm;
}
.vaccine-certificate--header {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}
.vaccine-certificate--header h1 {
  font-size: 3rem !important;
  font-weight: 400;
}
.vaccine-certificate--body {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.vaccine-certificate--body table {
  border: 1px none #a96b63;
  border-top-style: solid;
}
.vaccine-certificate--body table tr {
  border: none;
}
.vaccine-certificate--body table tr:hover td {
  background-color: transparent;
}
.vaccine-certificate--body table tr td {
  border-bottom: 1px solid #a96b63;
}
.vaccine-certificate--body ul {
  list-style: none;
  line-height: 1.5rem;
  text-align: left;
  padding-left: 1rem;
}
.vaccine-certificate--body .th {
  padding-left: 1rem;
  padding-right: 1rem;
}
.vaccine-certificate--body span.td {
  display: inline-block;
  white-space: normal;
}
.vaccine-certificate--body .td {
  font-size: 2rem;
}
.vaccine-certificate--body .td01, .vaccine-certificate--body .td02 {
  text-align: left;
  border-left: none;
  border-right: none;
}
.vaccine-certificate--body .td06 {
  text-align: left;
  border-right: none;
}
.vaccine-certificate--body .td03 {
  text-align: center;
  writing-mode: vertical-lr;
  line-height: normal;
  border-left: none;
  border-right: 1px dashed #a96b63;
}
.vaccine-certificate--body .td04 {
  border-right: 1px solid #a96b63;
}
.vaccine-certificate--body .td07 {
  border: none;
}
.vaccine-certificate--body .td.variable {
  font-size: 1.5rem;
  height: 2rem;
  display: inline-block;
  white-space: normal;
  line-height: 14px;
  vertical-align: top;
}
.vaccine-certificate--body .seal--box {
  position: absolute;
  bottom: 47px;
  right: 35px;
}
.vaccine-certificate--body .seal--box-wrap {
  display: grid;
  grid-auto-flow: column;
  grid-gap: 1rem;
  margin-bottom: 1rem;
}
.vaccine-certificate--body .seal--box-seal {
  background-color: white;
  height: 66px;
  width: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #a96b63;
}
.vaccine-certificate--body .seal--box-disc {
  display: flex;
  flex-direction: column;
  justify-content: end;
}
.vaccine-certificate .certificated {
  width: 100%;
  height: 25px;
  padding-left: 115px;
  padding-top: 5px;
}
.vaccine-certificate--footer table {
  margin-left: 1rem;
  border-radius: 3px 3px 3px 3px;
  -webkit-border-radius: 3px 3px 3px 3px;
  -moz-border-radius: 3px 3px 3px 3px;
  border: 1px solid #a96b63;
  width: 474px;
}
.vaccine-certificate--footer table tr:hover td {
  background-color: transparent;
}
.vaccine-certificate--footer table th {
  background-color: initial;
}
.vaccine-certificate--footer table th,
.vaccine-certificate--footer table td {
  border-bottom: 1px solid #a96b63;
}
.vaccine-certificate .next-date {
  margin: 1rem auto;
}

.kennel-list {
  padding: 1rem 1rem 3rem;
  margin: 0 auto 3rem;
  position: relative;
}
.kennel-list table {
  table-layout: initial;
}
.kennel-list table td {
  text-align: center;
}
@page {
  .kennel-list {
    size: A4 landscape;
  }
}
@media print {
  .kennel-list {
    width: 297mm;
  }
}
.kennel-list table tr,
.kennel-list table td {
  height: 1rem;
}

.A4P-A,
.estimate,
.tebiki {
  margin: 0 auto 2rem;
  padding: 2rem 3rem;
  line-height: normal;
  position: relative;
  /*最後のページは改ページを入れlない*/
}
@page {
  .A4P-A,
  .estimate,
  .tebiki {
    size: A4 portrait;
  }
}
@media screen {
  .A4P-A,
  .estimate,
  .tebiki {
    max-width: 210mm;
    min-height: 290mm;
  }
}
@media print {
  .A4P-A,
  .estimate,
  .tebiki {
    width: 210mm;
    height: 292mm;
  }
}
.A4P-A h2,
.estimate h2,
.tebiki h2 {
  text-align: center;
  padding: 0.5rem 2rem;
  border-left: 40px solid #999;
  border-right: 40px solid #999;
  background: #d8d8d8;
  color: #000;
  margin-bottom: 2rem;
}
.A4P-A h3,
.estimate h3,
.tebiki h3 {
  color: #000;
  background-color: #d8d8d8;
  padding: 0.2rem 4rem;
  border-left: 4px solid #999;
  margin-top: 3rem;
}
.A4P-A h4,
.estimate h4,
.tebiki h4 {
  margin: 1rem auto;
}
.A4P-A table,
.estimate table,
.tebiki table {
  margin: 2rem;
  font-size: medium;
}
.A4P-A table tr:hover td,
.estimate table tr:hover td,
.tebiki table tr:hover td {
  background-color: transparent;
}
.A4P-A table td,
.estimate table td,
.tebiki table td {
  text-align: center;
}
.A4P-A table th,
.estimate table th,
.tebiki table th {
  background-color: #999;
  color: white;
}
.A4P-A dl,
.estimate dl,
.tebiki dl {
  margin-top: 1rem;
}
.A4P-A dl dt,
.estimate dl dt,
.tebiki dl dt {
  font-size: 2rem;
  font-weight: 600;
}
.A4P-A p,
.estimate p,
.tebiki p {
  text-align: center;
}
.A4P-A p span, .A4P-A dl span,
.estimate p span,
.estimate dl span,
.tebiki p span,
.tebiki dl span {
  text-decoration: underline;
  font-size: medium;
}
.A4P-A:last-child,
.estimate:last-child,
.tebiki:last-child {
  page-break-after: auto;
}

@media print {
  .no_print {
    display: none;
  }
}
.footer-fixed {
  position: absolute;
  bottom: 10px;
  left: 0;
  margin: 0 auto 0;
  width: 100%;
}

.break-after {
  break-after: page;
}

.company {
  position: relative;
}
.company-mark {
  position: absolute;
  width: 70px;
  bottom: 0;
  right: 0;
}

/*
global_nav.scss

グローバルナビ

*/
main.container {
  margin-top: 68px;
}

.global-header {
  width: 100%;
  height: 64px;
  padding: 0;
  margin: 0;
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 90;
  background-color: var(--pico-background-color);
}

nav#global-nav {
  margin: 0 0.5rem;
  height: 64px;
  grid-template-columns: 1fr auto auto auto;
  align-items: center;
}
@media (min-width: 576px) {
  nav#global-nav {
    margin: 0 2rem;
  }
}
nav#global-nav input,
nav#global-nav select,
nav#global-nav label,
nav#global-nav button {
  margin: 0;
}
nav#global-nav ul:nth-of-type(1),
nav#global-nav ul:nth-of-type(2) {
  display: none;
}
@media (min-width: 576px) {
  nav#global-nav ul:nth-of-type(2) {
    display: flex;
  }
}
@media (min-width: 1024px) {
  nav#global-nav ul.global-nav-ul {
    display: block;
  }
}
nav#global-nav ul.global-nav-ul li a {
  padding: 1rem 0.5rem;
  font-weight: 600;
}
nav#global-nav ul.global-nav-ul li ul li {
  padding: 0.5rem;
}
nav#global-nav ul li:hover ul {
  display: block;
}
nav#global-nav ul li ul {
  background: var(--pico-background-color);
  border: 1px solid var(--pico-muted-border-color);
  border-radius: var(--pico-border-radius);
  box-shadow: var(--pico-box-shadow) var(--pico-box-shadow);
  display: none;
  height: auto;
  padding: 0.5rem 1rem;
  position: absolute;
  top: 44px;
  white-space: nowrap;
  z-index: 1;
}
nav#global-nav ul li ul::before {
  /* fill gap above to make mousing over them easier */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -0.5rem;
  height: 0.5rem;
}
nav#global-nav ul li ul li,
nav#global-nav nav ul li ul li a {
  display: block;
}
nav#global-nav div.logo {
  padding: 0;
  display: flex;
  align-items: center;
}
nav#global-nav div.logo img {
  width: 77px;
}

#hidden-menu-button {
  position: fixed;
  top: 90%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 999;
  display: block;
  border-radius: 50px;
  width: 100px;
  transition: opacity ease 0.2s;
}
@media (min-width: 1024px) {
  #hidden-menu-button {
    opacity: 0;
    pointer-events: none;
  }
}

.hidden-menu--search,
.main-menu--search {
  display: grid;
  grid-auto-flow: column;
  grid-gap: 2rem;
  align-items: center;
}
.hidden-menu--nav,
.main-menu--nav {
  font-size: 1.5rem;
}
.hidden-menu--nav .logo,
.main-menu--nav .logo {
  display: none;
}
.hidden-menu--nav ul,
.main-menu--nav ul {
  margin-top: calc(var(--pico-typography-spacing-vertical) * 0.25);
  padding-right: 40px;
}
.hidden-menu--nav li,
.main-menu--nav li {
  list-style: none;
}
.hidden-menu--nav li a,
.main-menu--nav li a {
  line-height: 3rem;
  width: 100%;
  display: inline-block;
}
.hidden-menu--nav li a::after,
.main-menu--nav li a::after {
  content: "\f105";
  font-family: "Font Awesome 5 Free", cursive;
  font-weight: 900;
  margin-left: 0.2em;
}

.mobile-nav-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-top: 1rem;
}
@media (min-width: 576px) {
  .mobile-nav-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.nav-btn-large, .nav-btn-small {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.2rem 0.5rem;
  border: 1px solid var(--pico-muted-border-color);
  border-radius: var(--pico-border-radius);
  background-color: var(--pico-card-background-color);
  text-align: center;
  text-decoration: none;
  color: var(--pico-color);
  transition: all 0.2s ease;
}
.nav-btn-large i, .nav-btn-small i {
  font-size: 2.2rem;
  margin-bottom: 0.8rem;
  color: var(--pico-primary);
}
.nav-btn-large span, .nav-btn-small span {
  font-size: 1rem;
  font-weight: 600;
}
.nav-btn-large:hover, .nav-btn-small:hover {
  background-color: var(--pico-primary-background);
  border-color: var(--pico-primary);
  transform: translateY(-2px);
  box-shadow: var(--pico-box-shadow);
}

.nav-btn-small {
  grid-column: span 2;
  flex-direction: row;
  height: auto;
  padding: 0.8rem 1rem;
  justify-content: flex-start;
}
@media (min-width: 576px) {
  .nav-btn-small {
    grid-column: span 3;
  }
}
.nav-btn-small i {
  font-size: 1.1rem;
  margin-bottom: 0;
  margin-right: 0.8rem;
}
.nav-btn-small span {
  font-size: 0.9rem;
}

.m-global-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  pointer-events: none;
  transition: transform 0.3s ease, opacity 0.3s ease;
  opacity: 1;
  transform: translateY(0);
}
.m-global-header.is-hidden {
  opacity: 0;
  transform: translateY(-100%);
}
.m-global-header nav#m-global-nav {
  margin: 0;
  padding: 5px 15px;
  background: transparent;
  border: none;
  align-items: center;
  grid-template-columns: 1fr auto;
  pointer-events: none;
}
.m-global-header nav#m-global-nav .logo {
  padding: 0;
  display: flex;
  align-items: center;
  pointer-events: auto;
}
.m-global-header nav#m-global-nav .logo img {
  height: 32px;
  width: auto;
}
.m-global-header nav#m-global-nav ul.end {
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  list-style: none;
  pointer-events: auto;
}
.m-global-header nav#m-global-nav ul.end li {
  padding: 0;
}

/*
_toast.scss (修正版)
*/
.c-toast-container {
  position: fixed;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px;
  pointer-events: none;
}
.c-toast-container[data-position=bottom-right] {
  bottom: 16px;
  right: 16px;
  align-items: flex-end;
}
.c-toast-container[data-position=bottom-left] {
  bottom: 16px;
  left: 16px;
  align-items: flex-start;
}
.c-toast-container[data-position=top-right] {
  top: 16px;
  right: 16px;
  align-items: flex-end;
}
.c-toast-container[data-position=top-left] {
  top: 16px;
  left: 16px;
  align-items: flex-start;
}

.c-toast {
  /* デフォルトのアクセント色（バリエーションで上書き） */
  --toast-accent: #2196f3;
  pointer-events: auto;
  min-width: 280px;
  max-width: min(92vw, 420px);
  background: rgba(var(--color-secondary-background), 0.95);
  color: #fff;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28);
  padding: 8px 8px 8px 14px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 12px;
  position: relative;
  overflow: hidden;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.18s ease, transform 0.18s ease, filter 0.18s ease;
  /* 左の色バーを疑似要素で描画（HTML改変なし） */
  /* コンテンツ塊（HTMLにある wrapper） */
}
.c-toast::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 6px;
  background: var(--toast-accent);
  border-top-left-radius: 12px;
  border-bottom-left-radius: 12px;
}
.c-toast.is-shown {
  opacity: 1;
  transform: translateY(0);
}
.c-toast.is-hiding {
  opacity: 0;
  transform: translateY(8px);
  filter: blur(0.5px);
}
.c-toast__content {
  grid-column: 1/2;
  min-width: 0;
}
.c-toast__title {
  color: rgba(var(--color-primary-text), 0.95);
  grid-column: 1/-1;
  /* タイトルは横いっぱい（1列目から最後まで） */
  margin: 0;
}
.c-toast__body {
  color: rgba(var(--color-primary-text), 0.95);
  margin: 0;
  word-break: break-word;
  grid-column: 1/2;
  /* 本文は左のカラム（1fr部分） */
  align-content: center;
}
.c-toast__ok {
  grid-column: 2/3;
  /* ボタンは右のカラム（auto部分） */
  justify-self: end;
}
.c-toast--success {
  --toast-accent: #4caf50;
}
.c-toast--error {
  --toast-accent: #f44336;
}
.c-toast--warning {
  --toast-accent: #ff9800;
}
.c-toast--info {
  --toast-accent: #2196f3;
}

/* ============================================================
   Client Profile Layout
   - 3 Columns: Left 20% | Center 60% | Right 20%
   - Full height fit (100vh)
   - Internal scroll for each column
   - Notes section behaves like chat (latest bottom, input fixed)
   ============================================================ */
/* カラーテーマ & ベース変数 */
/* ---------------------------------------------
   外枠（全体）: 高さフィット & スクロール委譲
--------------------------------------------- */
:root {
  --header-height: 64px;
}

.profile--wrap {
  padding: var(--header-height) 0 0 0;
  height: 100vh;
  max-height: 100svh;
  min-height: 0;
  overflow: hidden;
}

/* ---------------------------------------------
   3カラムレイアウト（20 / 60 / 20）
--------------------------------------------- */
.profile--innerWrap, .profile--innerWrap--2col {
  margin-top: 0.4rem;
  display: grid;
  height: 95%;
  min-height: 0;
  overflow: hidden;
  grid-template-columns: 1fr;
}
@media (min-width: 1024px) {
  .profile--innerWrap, .profile--innerWrap--2col {
    grid-template-columns: minmax(320px, 20%) minmax(320px, 1fr) minmax(320px, 25%);
  }
}
.profile--innerWrap--2col {
  grid-template-columns: 1fr;
}
@media (min-width: 744px) {
  .profile--innerWrap--2col {
    grid-template-columns: minmax(320px, 1fr) minmax(320px, 25%);
  }
}

/* 各カラム共通カード */
.profile--innerWrap > div, .profile--innerWrap--2col > div {
  border-top: 1px solid rgba(var(--color-9), 0.25);
}

.profile-contents--body > div:first-child {
  border-top: none;
}

/* ---------------------------------------------
   Header / Footer 共通デザイン
--------------------------------------------- */
.profile-contents--header,
.profile-contents--footer {
  padding: var(--mr-kennel-block-spacing-horizontal);
  border-bottom: 1px solid rgba(var(--color-9), 0.25);
}
.profile-contents--header:last-child,
.profile-contents--footer:last-child {
  border-bottom: none;
  border-top: 1px solid rgba(var(--color-9), 0.25);
}
.profile-contents--header--toychoku,
.profile-contents--footer--toychoku {
  background-color: rgba(var(--color-channel1), 0.6);
  padding: 0;
}
.profile-contents--header--sankotsu,
.profile-contents--footer--sankotsu {
  background-color: rgba(var(--color-channel2), 0.6);
  padding: 0;
}
.profile-contents--header--pet_care,
.profile-contents--footer--pet_care {
  background-color: rgba(var(--color-channel3), 0.6);
  padding: 0;
}

/* ---------------------------------------------
   Body（中身スクロールエリア）
--------------------------------------------- */
.profile-contents--body {
  min-height: 0;
  overflow-y: auto;
  padding: var(--mr-kennel-block-spacing-horizontal);
}

/* ---------------------------------------------
   左カラム（顧客情報）
--------------------------------------------- */
.profile-contents--left-bar {
  min-height: 0;
  overflow-y: auto;
  border-right: 1px solid rgba(var(--color-9), 0.25);
}

/* ---------------------------------------------
   中央カラム（Notes: チャット風UI）
--------------------------------------------- */
/* ============================================================
   Notes（対応履歴・チャット風UI）
   - 既存のメッセージ気泡デザイン維持
   - Markdownや画像プレビュー対応を統合
   ============================================================ */
.profile-contents--center-bar {
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* 最新メモを下部に寄せる */
  border-right: 1px solid rgba(var(--color-9), 0.25);
  overflow: hidden;
  /* メッセージバブル風 */
}
.profile-contents--center-bar .msg {
  max-width: 80%;
  padding: 0.625rem 0.75rem;
  border-radius: 0.75rem;
  border: 1px solid rgba(var(--color-9), 0.25);
  background: rgba(var(--color-6), 0.08);
}
.profile-contents--center-bar .msg.is-me {
  margin-left: auto;
  background: rgba(var(--color-primary), 0.08);
  border-color: rgba(var(--color-primary), 0.35);
}
.profile-contents--center-bar .msg.is-other {
  margin-right: auto;
}
.profile-contents--center-bar .msg .time {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.85em;
  color: rgba(var(--color-muted-text), 1);
  text-align: right;
}

/* ---------------------------------------------
   右カラム（購買・契約・ペット情報）
--------------------------------------------- */
.profile-contents--right-bar {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  /* clientDetail全体を縦flex化 */
  /* header + body + footerのうちbodyを伸縮対象に */
  /* タブボタン */
  /* タブ中身：ここをflex伸縮 + overflow:auto にする */
  /* タブパネルは汎用クラスとして定義するためここからは削除 */
  /* フッターは固定位置 */
}
.profile-contents--right-bar > #clientDetail {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.profile-contents--right-bar .profile-contents--body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  /* ← scrollを奪わない */
}
.profile-contents--right-bar .tabs {
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0;
}
.profile-contents--right-bar .tab-contents {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  /* ← これがポイント */
  -webkit-overflow-scrolling: touch;
}
.profile-contents--right-bar .profile-contents--footer {
  flex-shrink: 0;
  padding: 1rem;
  border-top: 1px solid rgba(var(--color-9), 0.25);
}

/* ---------------------------------------------
   clients list
--------------------------------------------- */
.clientsCard {
  padding: 0.5rem;
  border-top: 1px solid rgba(var(--color-9), 0.25);
}
.clientsCard a {
  text-decoration: none;
}
.clientsCard .name,
.clientsCard .tel {
  color: rgba(var(--color-text), 1);
}
.clientsCard:last-child {
  border-bottom: 1px solid rgba(var(--color-9), 0.25);
}
.clientsCard.active {
  background-color: rgba(var(--color-primary-background), 0.2);
  color: rgba(var(--color-text), 0.5);
}
.clientsCard.active .name,
.clientsCard.active .tel {
  color: inherit;
}
.clientsCard:hover {
  background-color: rgba(var(--color-primary-background), 0.3);
  cursor: pointer;
}

/* ---------------------------------------------
   汎用：Markdown折返し
--------------------------------------------- */
.mdParse {
  word-break: break-all;
}

/*
mobile_layout.scss
*/
/* ルート要素やメインコンテナ */
body {
  /* 上部（ノッチ/Dynamic Island） */
  /* 下部（ホームインジケーター） */
  padding-bottom: env(safe-area-inset-bottom);
  /* 左右（横向き時） */
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

.m-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  position: relative;
  /* ヘッダー固定 */
  /* メインコンテンツ（リスト） */
}
.m-container .m-header {
  height: auto;
  min-height: 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: env(safe-area-inset-top) 16px 0;
  z-index: 100;
}
.m-container .m-header .m-logo img {
  height: 32px;
  width: auto;
}
.m-container .m-header .m-account-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--pico-muted-border-color);
}
.m-container .m-header .m-account-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.m-container .m-main-content {
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 80px;
  /* フッター分 */
  min-height: 100dvh;
  /* コンテンツが短くてもスクロール可能にする */
}

/* フッターナビゲーション固定 */
.m-footer-nav {
  position: fixed;
  bottom: calc(45px + env(safe-area-inset-bottom));
  left: 0;
  width: 100%;
  height: 70px;
  z-index: 100;
}
.m-footer-nav .m-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--pico-color);
  text-decoration: none;
  gap: 4px;
}
.m-footer-nav .m-nav-item i {
  font-size: 1.4rem;
}
.m-footer-nav .m-nav-item span {
  font-size: 0.75rem;
}
.m-footer-nav .m-nav-item--center .m-nav-icon-wrap {
  background: var(--pico-primary);
  color: white;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: -20px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

/* ==========================================================================
   モバイル専用クライアント画面スタイル
   ========================================================================== */
/* スライド詳細パネル */
#m-client-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: var(--pico-background-color);
  z-index: 200;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
}
#m-client-panel.is-active {
  transform: translateX(0);
}
#m-client-panel .m-panel-header {
  height: 60px;
  display: flex;
  align-items: center;
  padding: 0 16px;
  border-bottom: 1px solid var(--pico-muted-border-color);
  gap: 16px;
}
#m-client-panel .m-panel-header .m-panel-title {
  font-size: 1.1rem;
  font-weight: bold;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#m-client-panel .m-back-btn {
  z-index: 100;
  position: absolute;
  bottom: 40px;
  left: 20px;
}
#m-client-panel #m-notes-btn {
  z-index: 100;
  position: absolute;
  bottom: 40px;
  right: 20px;
}
#m-client-panel #m-calendar-btn {
  z-index: 100;
  position: absolute;
  bottom: 120px;
  right: 20px;
}
#m-client-panel .m-panel-body {
  flex: 1;
  min-height: 0;
  overflow-y: scroll;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

/* 簡易リストアイテム */
.m-client-item {
  padding: 16px;
  border-bottom: 1px solid var(--pico-muted-border-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--pico-card-background-color);
}
.m-client-item.need_action {
  box-shadow: 10px 0 0 rgba(var(--color-4), 0.7) inset;
}
.m-client-item.resolved {
  box-shadow: 10px 0 0 rgba(var(--color-2), 0.7) inset;
}
.m-client-item.pending {
  box-shadow: 10px 0 0 rgba(var(--color-3), 0.7) inset;
}
.m-client-item.done {
  box-shadow: 10px 0 0 rgba(var(--color-9), 0.7) inset;
}
.m-client-item.deleted {
  box-shadow: 10px 0 0 rgba(var(--color-10), 0.3) inset;
}
.m-client-item:active {
  background: var(--pico-muted-border-color);
}
.m-client-item .m-item-main {
  flex: 1;
}
.m-client-item .m-item-main .m-item-name {
  margin: 0;
  font-weight: bold;
  display: block;
}
.m-client-item .m-item-main .m-item-kana {
  font-size: 0.8rem;
  color: var(--pico-muted-color);
}
.m-client-item .m-item-tags {
  display: flex;
  gap: 4px;
  margin-top: 4px;
  align-items: center;
}

/* カラーテーマ & ベース変数 */
/* ---------------------------------------------
   外枠（全体）: 高さフィット & スクロール委譲
--------------------------------------------- */
:root {
  --header-height: 64px;
}

.right-bar--wrap {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  padding: 64px 0 0 0;
}
.right-bar--wrap > .contents-header {
  flex-shrink: 0;
  padding: 0.5rem 1rem;
  background: var(--pico-background-color);
  border-bottom: 1px solid rgba(var(--color-9), 0.25);
}
.right-bar--wrap > .innerWrap {
  flex: 1;
  display: grid;
  min-height: 0;
  overflow: hidden;
  position: relative;
  grid-template-columns: 1fr;
  transition: grid-template-columns 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
@media (min-width: 744px) {
  .right-bar--wrap > .innerWrap {
    grid-template-columns: minmax(0, 3fr) minmax(320px, 1fr) minmax(320px, 1fr);
  }
}
@media (min-width: 744px) {
  .right-bar--wrap > .innerWrap:has(.bar3.bar3--collapsed), .right-bar--wrap > .innerWrap:has(.bar2.bar2--collapsed), .right-bar--wrap > .innerWrap:not(:has(.bar3)), .right-bar--wrap > .innerWrap:not(:has(.bar2)) {
    grid-template-columns: minmax(0, 3fr) minmax(320px, 1fr) 0;
  }
}
.right-bar--wrap > .innerWrap .bar1 {
  height: 100%;
  overflow-y: auto;
  border-right: 1px solid rgba(var(--color-9), 0.25);
  -webkit-overflow-scrolling: touch;
}
.right-bar--wrap > .innerWrap .bar1 #clientsList {
  overflow: visible !important;
  /* 内側で overflow があると sticky が効かないため解除 */
  padding-top: 0 !important;
  /* ヘッダーの密着度を高める */
}
.right-bar--wrap > .innerWrap .bar1 #clients-table thead th {
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: var(--pico-background-color);
}
.right-bar--wrap > .innerWrap .bar1 #clients-table tbody tr td {
  background-color: initial;
}
.right-bar--wrap > .innerWrap .bar3,
.right-bar--wrap > .innerWrap .bar2 {
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border-right: 1px solid rgba(var(--color-9), 0.25);
  position: relative;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform, opacity;
  padding: 0;
}
.right-bar--wrap > .innerWrap .bar3.bar3--collapsed,
.right-bar--wrap > .innerWrap .bar2.bar2--collapsed {
  transform: translateX(100%);
  opacity: 0;
  pointer-events: none;
}
.right-bar--wrap > .innerWrap .bar3:not(.bar3--collapsed),
.right-bar--wrap > .innerWrap .bar2:not(.bar2--collapsed) {
  transform: translateX(0);
  opacity: 1;
}
.right-bar--wrap > .innerWrap .bar3 .contactsScroll,
.right-bar--wrap > .innerWrap .bar2 .contactsScroll {
  max-height: 220px;
  overflow-y: auto;
  overflow-x: hidden;
}
.right-bar--wrap > .innerWrap .bar3 .contractsScroll,
.right-bar--wrap > .innerWrap .bar2 .contractsScroll {
  max-height: 220px;
  overflow-y: auto;
  overflow-x: hidden;
}
.right-bar--wrap > .innerWrap .bar3 .commentWrap,
.right-bar--wrap > .innerWrap .bar2 .commentWrap {
  padding: 0 1rem;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  margin-bottom: 1rem;
  gap: 0.5rem;
}
.right-bar--wrap > .innerWrap .bar3 .commentArea,
.right-bar--wrap > .innerWrap .bar2 .commentArea {
  background: var(--pico-background-color);
  border: 1px solid #ffebeb;
  padding: 0 0.7rem;
  border-radius: 4px;
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1;
  min-height: 0;
}
.right-bar--wrap > .innerWrap .bar3 .sales-details--header,
.right-bar--wrap > .innerWrap .bar2 .sales-details--header {
  flex-shrink: 0;
  padding: 1rem;
  border-bottom: 1px solid rgba(var(--color-9), 0.25);
  background-color: var(--pico-background-color);
}
.right-bar--wrap > .innerWrap .bar3 .tabs,
.right-bar--wrap > .innerWrap .bar2 .tabs {
  flex-shrink: 0;
  padding: 0.5rem 1rem;
  background-color: var(--pico-background-color);
}
.right-bar--wrap > .innerWrap .bar3 .tabWrap,
.right-bar--wrap > .innerWrap .bar2 .tabWrap {
  flex: 1;
  min-height: 0;
  position: relative;
}
.right-bar--wrap > .innerWrap .bar3 .tabWrap .tab-pane,
.right-bar--wrap > .innerWrap .bar2 .tabWrap .tab-pane {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow-y: auto;
  padding: 1rem;
  display: none;
  -webkit-overflow-scrolling: touch;
}
.right-bar--wrap > .innerWrap .bar3 .tabWrap .tab-pane.active,
.right-bar--wrap > .innerWrap .bar2 .tabWrap .tab-pane.active {
  display: block;
}
.right-bar--wrap > .innerWrap .bar3 .sales-details--footer,
.right-bar--wrap > .innerWrap .bar2 .sales-details--footer {
  flex-shrink: 0;
  border-top: 1px solid rgba(var(--color-9), 0.25);
  background-color: var(--pico-background-color);
}
.right-bar--wrap > .innerWrap .bar3 > .col,
.right-bar--wrap > .innerWrap .bar2 > .col {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.right-bar--wrap > .innerWrap .bar3 #salesDetilBody,
.right-bar--wrap > .innerWrap .bar2 #salesDetilBody {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding: 0 0.5rem;
}
.right-bar--wrap > .innerWrap .bar3 > .toggle-btn,
.right-bar--wrap > .innerWrap .bar2 > .toggle-btn {
  display: none;
}
@media (min-width: 744px) {
  .right-bar--wrap > .innerWrap .bar3 > .toggle-btn,
  .right-bar--wrap > .innerWrap .bar2 > .toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 80px;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-right: none;
    border-radius: 8px 0 0 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.3);
    cursor: pointer;
    z-index: 1000;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 0;
    color: rgba(var(--color-text), 0.6);
  }
  .right-bar--wrap > .innerWrap .bar3 > .toggle-btn i,
  .right-bar--wrap > .innerWrap .bar2 > .toggle-btn i {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 1.2rem;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
  }
  .right-bar--wrap > .innerWrap .bar3 > .toggle-btn:hover,
  .right-bar--wrap > .innerWrap .bar2 > .toggle-btn:hover {
    background: rgba(255, 255, 255, 0.25);
    width: 44px;
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.4);
  }
  .right-bar--wrap > .innerWrap .bar3 > .toggle-btn:active,
  .right-bar--wrap > .innerWrap .bar2 > .toggle-btn:active {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-50%) scale(0.95);
  }
}
@media (min-width: 744px) {
  .right-bar--wrap > .innerWrap .bar3.bar3--collapsed > .toggle-btn i,
  .right-bar--wrap > .innerWrap .bar2.bar2--collapsed > .toggle-btn i {
    transform: rotate(180deg);
  }
}

/* カラーテーマ & ベース変数 */
/* ---------------------------------------------
   タブ共通デザイン
--------------------------------------------- */
.tabs {
  display: flex;
  border-bottom: 1px solid var(--pico-border-color);
  margin-bottom: 0.5rem;
}
.tabs .tab-btn {
  flex: 1;
  text-align: center;
  padding: 0.5rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  background: none;
  color: var(--pico-muted-color);
  transition: all 0.2s ease;
}
.tabs .tab-btn.active {
  color: var(--pico-primary);
  border-bottom: 2px solid var(--pico-primary);
}
.tabs .tab-btn:hover {
  color: var(--pico-primary-hover);
}

.tab-pane {
  display: none;
  padding: 1rem 0;
}
.tab-pane.active {
  display: block;
  animation: fadeIn 0.2s ease;
}
.tab-pane > div {
  margin-bottom: 1rem;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(2px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* カラーテーマ & ベース変数 */
/* Notes本体領域 */
.notesWrap {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  padding: 0;
  /* 入力フォーム固定 */
}
.notesWrap--body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 1rem;
  min-height: 0;
  /* 画像・動画共通スタイル */
  /* figure + figcaption（Markdown画像キャプション） */
  /* 複数画像グリッド */
  /* a>img の自然表示 */
  /* 超縦長画像対応 */
  /* 拡大対応用 */
  /* ファイルプレビュー */
}
.notesWrap--body img,
.notesWrap--body video,
.notesWrap--body canvas {
  display: block;
  width: auto;
  height: auto;
  max-height: 60vh;
  border-radius: 0.6rem;
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: rgba(127, 127, 127, 0.05);
  object-fit: contain;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 6px 12px rgba(0, 0, 0, 0.06);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.notesWrap--body img:hover,
.notesWrap--body video:hover,
.notesWrap--body canvas:hover {
  transform: scale(1.015);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12), 0 12px 24px rgba(0, 0, 0, 0.08);
}
.notesWrap--body figure {
  margin: 1rem 0;
  text-align: center;
}
.notesWrap--body figure img {
  margin: 0 auto 0.4rem;
}
.notesWrap--body figure figcaption {
  font-size: 0.85rem;
  color: var(--pico-muted-color);
}
.notesWrap--body .image-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.5rem;
}
.notesWrap--body .image-grid img,
.notesWrap--body .image-grid video,
.notesWrap--body .image-grid canvas {
  width: 100%;
  max-height: 38vh;
  object-fit: cover;
  border-radius: 0.4rem;
  margin: 0;
}
.notesWrap--body a[href$=".jpg"],
.notesWrap--body a[href$=".jpeg"],
.notesWrap--body a[href$=".png"],
.notesWrap--body a[href$=".gif"],
.notesWrap--body a[href$=".webp"] {
  display: block;
  text-decoration: none;
}
.notesWrap--body a[href$=".jpg"] img,
.notesWrap--body a[href$=".jpeg"] img,
.notesWrap--body a[href$=".png"] img,
.notesWrap--body a[href$=".gif"] img,
.notesWrap--body a[href$=".webp"] img {
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 0.6rem;
}
.notesWrap--body .is-long img {
  max-height: 75vh;
  object-fit: contain;
}
.notesWrap--body .is-zoomable {
  cursor: zoom-in;
}
.notesWrap--body .file-preview {
  display: inline-block;
  padding: 0.4rem 0.75rem;
  border-radius: 0.5rem;
  background: rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.08);
  font-size: 0.9rem;
  margin: 0.25rem 0;
  color: var(--color-text);
  text-decoration: none;
}
.notesWrap--body .file-preview i {
  margin-right: 0.3rem;
}
.notesWrap--body .file-preview:hover {
  background: rgba(0, 0, 0, 0.08);
}
.notesWrap--body .pdf-viewer {
  max-width: 320px;
  margin: 1rem 0;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 0.5rem;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 6px 12px rgba(0, 0, 0, 0.06);
}
.notesWrap--body .pdf-viewer embed {
  height: 60vh;
  border: none;
  background: #fff;
}
.notesWrap--body .pdf-viewer .file-name {
  margin: 0.25rem 0.5rem;
  font-size: 0.85rem;
  color: var(--pico-muted-color);
  text-align: right;
}
.notesWrap--footer {
  flex-shrink: 0;
  margin-top: auto;
  padding: 1rem;
  background: rgba(var(--color-background-color), 1);
  border-top: 1px solid rgba(var(--color-9), 0.25);
  backdrop-filter: blur(0.5rem);
}
.notesWrap--footer form {
  display: grid;
  gap: 0.5rem;
}

/**
 * Card コンポーネント
 * カード形式のコンテナスタイル
 */
.card {
  background-color: rgba(var(--color-background-color), 0.6);
  border: 1px solid rgba(var(--color-muted-contrast), 0.3);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  overflow: hidden;
  margin-bottom: 1rem;
}
.card-header {
  padding: 0.75rem 1rem;
  background-color: rgba(var(--color-muted-contrast), 0.4);
  border-bottom: 1px solid rgba(var(--color-muted-contrast), 0.3);
  font-weight: 600;
  color: rgba(var(--color-text), 1);
}
.card-body {
  padding: 1rem;
}
.card-body .row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
}
.card-body .row .col {
  flex: 1 1 calc(33.333% - 0.5rem);
  min-width: 150px;
  padding: 0.5rem;
  background-color: rgba(var(--color-muted-contrast), 0.3);
  border-radius: 4px;
  text-align: center;
}
.card-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid rgba(var(--color-muted-contrast), 0.3);
}
.card-item:last-child {
  border-bottom: none;
}
.card-item--success {
  background-color: rgba(var(--color-paid), 0.15);
  border-left: 3px solid rgba(var(--color-paid), 1);
}
.card-item--danger {
  background-color: rgba(var(--color-error), 0.15);
  border-left: 3px solid rgba(var(--color-error), 1);
}
.card-label {
  font-weight: 600;
  color: rgba(var(--color-muted-text), 1);
}
.card-value {
  font-weight: 500;
  color: rgba(var(--color-text), 1);
  text-align: right;
}
@media (max-width: 768px) {
  .card-body .row .col {
    flex: 1 1 calc(50% - 0.5rem);
  }
}
@media (max-width: 480px) {
  .card-body .row .col {
    flex: 1 1 100%;
  }
}

.payment-list__footer {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.6rem 1rem;
  border-top: 1px solid rgba(var(--color-muted-contrast), 0.3);
  font-weight: 600;
  font-size: 1.5rem;
}

.payment-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 1rem;
  border-bottom: 1px solid rgba(var(--color-muted-contrast), 0.2);
}
.payment-item:last-child {
  border-bottom: none;
}
.payment-item--income {
  border-left: 3px solid rgba(var(--color-primary), 0.8);
}
.payment-item--expense {
  border-left: 3px solid rgba(var(--color-error), 0.8);
}
.payment-item__type {
  flex: 0 0 5rem;
  text-align: center;
  font-weight: 600;
}
.payment-item__type span {
  font-size: 1rem;
}
.payment-item__amount {
  flex: 0 0 6rem;
  text-align: right;
}
.payment-item__meta {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  color: rgba(var(--color-muted-text), 1);
}
.payment-item__name {
  flex: 1 1 100%;
  color: rgba(var(--color-text), 1);
  font-weight: 600;
  font-size: 1rem;
}
.payment-item__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}
.payment-item__by {
  margin-left: auto;
  opacity: 0.9;
  color: rgba(var(--color-text), 1);
}

.tag {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  background-color: rgba(var(--color-muted-contrast), 0.3);
  border-radius: 3px;
  color: rgba(var(--color-text), 1);
  font-size: 0.75rem;
}

/**
 * Panel コンポーネント
 * パネル形式のコンテナスタイル
 */
.panel {
  background-color: colorVar(background-color, 0.6);
  border: 1px solid colorVar(muted-contrast, 0.3);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  overflow: hidden;
  margin-bottom: 1.5rem;
}
.panel__header {
  padding: 1rem 1.25rem;
  background: linear-gradient(135deg, colorVar(2, 0.7) 0%, colorVar(3, 0.6) 48%, colorVar(primary, 0.7) 100%);
  border-bottom: 1px solid colorVar(muted-contrast, 0.4);
  color: colorVar(text);
}
.panel__header h3 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: colorVar(text);
}
.panel__header h4 {
  margin: 0;
  font-size: 1rem;
  font-weight: 500;
  color: colorVar(text);
}
.panel__body {
  padding: 1.25rem;
  background-color: colorVar(background-color, 0.4);
}
.panel__body .text-muted {
  color: colorVar(muted-text);
  font-style: italic;
  text-align: center;
  padding: 2rem 1rem;
}
.panel__footer {
  padding: 1rem 1.25rem;
  background-color: colorVar(muted-contrast, 0.5);
  border-top: 1px solid colorVar(muted-contrast, 0.4);
}
.panel--primary .panel__header {
  background: linear-gradient(135deg, colorVar(2, 0.7) 0%, colorVar(3, 0.6) 48%, colorVar(primary, 0.7) 100%);
}
.panel--success .panel__header {
  background: linear-gradient(135deg, colorVar(3, 0.8) 0%, colorVar(paid, 0.7) 100%);
}
.panel--warning .panel__header {
  background: linear-gradient(135deg, colorVar(important, 0.7) 0%, colorVar(error, 0.7) 100%);
}
.panel--info .panel__header {
  background: linear-gradient(135deg, colorVar(2, 0.7) 0%, colorVar(unpaid, 0.7) 100%);
}
@media (max-width: 768px) {
  .panel__header {
    padding: 0.875rem 1rem;
  }
  .panel__header h3 {
    font-size: 1rem;
  }
  .panel__body {
    padding: 1rem;
  }
}

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