/* KNOT static site - base layer */
html, body { margin: 0; padding: 0; }
body { background: #fff; transition: background .5s cubic-bezier(.4,.4,0,1); }
.canvas { display: flex; height: auto; min-height: 100dvh; }
.canvas > .b { min-height: 100dvh; overflow: clip; }

:where(.canvas, .menu-modal) :where(a, address, article, aside, b, blockquote, button, caption, div, em, fieldset, figure, footer, form, h1, h2, h3, h4, h5, h6, header, i, iframe, img, input, label, legend, li, main, nav, ol, p, section, select, small, span, strong, table, tbody, td, textarea, th, thead, tr, ul, video) {
  -webkit-font-smoothing: antialiased; box-sizing: border-box; color: #333; word-spacing: 1px;
  -webkit-backface-visibility: hidden; border: 0; margin: 0; padding: 0; font-family: sans-serif;
  line-height: 1; text-decoration: none; list-style: none; transition: all .3s cubic-bezier(.4,.4,0,1);
}
:where(.canvas, .menu-modal) :where(a, button) { vertical-align: baseline; background: 0 0; margin: 0; padding: 0; font-size: 100%; }
:where(.canvas, .menu-modal) :where(a, button):focus:not(:focus-visible) { outline: none; }
:where(.canvas, .menu-modal) :where(input, select) { vertical-align: middle; }
:where(.canvas, .menu-modal) textarea { resize: none; }
:where(.canvas, .menu-modal) :where(input[type=email], input[type=tel], input[type=text], select, textarea) { -webkit-appearance: none; }
:where(.canvas, .menu-modal) a { -webkit-tap-highlight-color: #00000026; }

:where(.canvas, .menu-modal) .b {
  z-index: 0; pointer-events: all; flex-flow: column; flex: none; align-content: center; align-items: center;
  max-width: 100%; display: flex; position: relative;
}
:where(.canvas, .menu-modal) .b::-webkit-scrollbar { display: none; }
:where(.canvas, .menu-modal) :where(input.b, textarea.b) { align-content: normal; }
:where(.canvas, .menu-modal) .b[tabindex]:focus { outline: none; }
:where(.canvas, .menu-modal) .image { position: relative; }
:where(.canvas, .menu-modal) .image:before {
  content: ""; border-radius: inherit; z-index: -2; pointer-events: none; background-position: 50%; background-size: cover;
  width: 100%; height: 100%; transition: inherit; position: absolute; top: 0; left: 0;
}
:where(.canvas, .menu-modal) .b.text, :where(.canvas, .menu-modal) .b.icon {
  word-break: break-word; overflow-wrap: anywhere; flex-direction: row; place-content: center; align-items: center; display: flex; overflow: visible;
}
:where(.canvas, .menu-modal) .b:where(.icon.fa-solid) { display: inline-flex; }
:where(.canvas, .menu-modal) .material-icons {
  letter-spacing: normal; text-transform: none; white-space: nowrap; word-wrap: normal; direction: ltr;
  justify-content: center; align-items: center; font-family: 'Material Icons'; font-size: 24px; font-style: normal; font-weight: 400; line-height: 1; display: inline-flex;
}
:where(.canvas, .menu-modal) .b:where(.icon.material-symbols) {
  font-variation-settings: "FILL" var(--symbol-fill, 0), "wght" var(--symbol-weight, 400);
  justify-content: center; align-items: center; min-width: 1em; min-height: 1em; font-style: normal; display: flex;
}
:where(.canvas, .menu-modal) .b.material-symbols-rounded { font-family: 'Material Symbols Rounded'; }
:where(.canvas, .menu-modal) .b.material-symbols-sharp { font-family: 'Material Symbols Sharp'; }
:where(.canvas, .menu-modal) .b.material-symbols-outlined { font-family: 'Material Symbols Outlined'; }
.material-symbols-weight-100 { --symbol-weight: 100; } .material-symbols-weight-200 { --symbol-weight: 200; }
.material-symbols-weight-300 { --symbol-weight: 300; } .material-symbols-weight-400 { --symbol-weight: 400; }
.material-symbols-weight-500 { --symbol-weight: 500; } .material-symbols-weight-600 { --symbol-weight: 600; }
.material-symbols-weight-700 { --symbol-weight: 700; } .material-symbols-fill { --symbol-fill: 1; }
:where(.canvas, .menu-modal) .fixed { z-index: 2; }
:where(.canvas, .menu-modal) .sticky { z-index: 1; }
:where(.canvas, .menu-modal) .button { cursor: pointer; transition: all .4s cubic-bezier(.4,.4,0,1); }
:where(.canvas, .menu-modal) .link { cursor: pointer; }
:where(.canvas, .menu-modal) .richText { word-break: break-word; display: block; }
:where(.canvas, .menu-modal) .richText :where(a, blockquote, em, h1, h2, h3, h4, li, ol, p, s, strong, u, ul) {
  color: inherit; font-family: inherit; font-size: inherit; text-align: inherit; letter-spacing: inherit; line-height: inherit; font-weight: inherit; font-style: inherit; backface-visibility: visible;
}
:where(.canvas, .menu-modal) .richText p { align-self: stretch; margin: 10px 0; display: block; }
:where(.canvas, .menu-modal) .richText > p { min-height: 1em; }
:where(.canvas, .menu-modal) .richText h1 { align-self: stretch; margin: 20px 0; font-size: 3em; font-weight: 700; display: block; }
:where(.canvas, .menu-modal) .richText h2 { align-self: stretch; margin: 10px 0; font-size: 2em; font-weight: 700; display: block; }
:where(.canvas, .menu-modal) .richText h3 { align-self: stretch; margin: 10px 0; font-size: 1em; font-weight: 700; display: block; }
:where(.canvas, .menu-modal) .richText :where(h4, h5) { align-self: stretch; margin: 10px 0; font-size: 1em; font-weight: 600; display: block; }
:where(.canvas, .menu-modal) .richText ul { list-style: disc; padding-left: 1.5em; }
:where(.canvas, .menu-modal) .richText ol { list-style: decimal; padding-left: 1.5em; }
:where(.canvas, .menu-modal) .richText li { display: list-item; list-style: inherit; }
:where(.canvas, .menu-modal) .richText a { text-decoration: underline; color: inherit; }

/* mobile menu modal */
.menu-modal { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; transition: none; }
.menu-modal[hidden] { display: none; }
.menu-modal .menu-base { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; background: rgba(0,0,0,.16); border: 0; padding: 0; pointer-events: auto; opacity: 0; transition: all .4s cubic-bezier(.4,.4,0,1); }
.menu-modal .menu-panel { height: 100%; pointer-events: none; opacity: 0; transform: scale(.8); transition: all .4s cubic-bezier(.4,.4,0,1); }
.menu-modal .menu-panel > * { pointer-events: none; background: 0 0 !important; }
.menu-modal.open .menu-base, .menu-modal.open .menu-panel { opacity: 1; }
.menu-modal.open .menu-panel { transform: none; }
.menu-modal:not(.open) .menu-panel { transition-duration: .3s; }

/* form validation message */
.form-error { color: #e96e2c; font-size: 12px; margin-top: 6px; font-family: 'Noto Sans JP', sans-serif; }