@charset 'utf-8';

:root {
  /*
    色はすべてコツコツ企画の採用サイトLP（Kotsukotsu_CC/lp/recruit/src/assets/scss/global/setting/_variables.scss）のトークン。
    LPにない色は足さない。対応表は NOTES.md
  */
  --color-ink: #303034;
  --color-white: #fff;
  --color-sky: #4fc3f7;
  --color-sky-mid: #35b8f2;
  --color-on-sky: #0e4467;
  --color-blue-deep: #1b7fb8;
  --color-blue-ink: #166a9c;
  --color-blue-pale: #eaf7fe;
  --color-blue-mist: #f3fafe;
  --color-blue-line: #bfe2f4;
  --color-pink: #f7a1c4;
  --color-button-off: #5f7280;

  /* LPのフォームで使われている補足文字・エラーの色（LP側では変数化されていない） */
  --color-hint: #56626b;
  --color-error: #c0355b;
  --color-error-bg: #fdecf1;

  /* 既存の名前から、上のトークンへの対応（このファイルの各所がこの名前を使う） */
  --color-text: var(--color-ink);
  --color-muted: var(--color-hint);
  --color-border: var(--color-blue-line);
  --color-bg: var(--color-blue-mist);
  --color-surface: var(--color-white);
  --color-primary: var(--color-sky);
  --color-primary-dark: var(--color-blue-ink);
  --color-primary-tint: var(--color-blue-pale);

  --font-base: 'Zen Kaku Gothic New', 'Hiragino Sans', sans-serif;
  --shadow-soft: 0 1.25rem 2.5rem rgb(27 127 184 / 0.14);
  --space-page: clamp(1.25rem, 4vw, 3rem);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  color: var(--color-text);
  font-family: var(--font-base);
  font-weight: 500;
  word-break: auto-phrase;
  line-break: strict;
  font-size: 1rem;
  line-height: 1.8;
  background: var(--color-bg);
}

a {
  color: var(--color-primary-dark);
}

.l-header {
  position: sticky;
  top: 0.75rem;
  z-index: 100;
  padding: 0.75rem var(--space-page) 0;
}

.l-header__inner {
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  align-items: center;
  max-width: 64rem;
  margin: 0 auto;
  padding: 0.5rem 0.75rem 0.5rem 1.5rem;
  background: rgb(255 255 255 / 0.92);
  border-radius: 999px;
  box-shadow: 0 0.5rem 1.75rem rgb(27 127 184 / 0.12);
}

.l-header__brand {
  display: flex;
  gap: 0.625rem;
  align-items: center;
  margin: 0;
  color: var(--color-ink);
  font-size: 1.125rem;
  font-weight: 900;
  letter-spacing: 0.04em;
}

.l-header__mark {
  flex-shrink: 0;
}

.l-header__home {
  color: inherit;
  text-decoration: none;
}

.l-header__label {
  margin-left: 0.25rem;
  padding-left: 0.75rem;
  color: var(--color-blue-ink);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  border-left: 2px solid var(--color-blue-line);
}

.l-header__nav {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.l-header__nav > a {
  color: var(--color-blue-ink);
  font-size: 0.875rem;
  font-weight: 700;
  text-decoration: none;
}

.l-header__nav > a:hover {
  text-decoration: underline;
  text-underline-offset: 0.3em;
}

.c-account {
  position: relative;
}

.c-account__summary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--color-text);
  font-size: 0.875rem;
  font-weight: 700;
  list-style: none;
  cursor: pointer;
}

.c-account__summary::-webkit-details-marker {
  display: none;
}

.c-account__avatar {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 2rem;
  height: 2rem;
  color: var(--color-on-sky);
  background: var(--color-primary);
  border-radius: 50%;
}

.c-account__avatar .c-icon {
  margin: 0;
}

.c-account__menu {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  z-index: 10;
  min-width: 9rem;
  padding: 0.5rem 0;
  background: var(--color-surface);
  border: 2px solid var(--color-border);
  border-radius: 1rem;
  box-shadow: var(--shadow-soft);
}

.c-account__menu a {
  display: block;
  padding: 0.5rem 1.25rem;
  color: var(--color-text);
  font-size: 0.875rem;
  text-decoration: none;
}

.c-account__menu a:hover {
  background: var(--color-primary-tint);
}

.l-main {
  max-width: 64rem;
  margin: 0 auto;
  padding: 2.75rem var(--space-page) 5rem;
}

.l-footer {
  padding: 2rem var(--space-page);
  color: var(--color-on-sky);
  text-align: center;
  background: var(--color-sky-mid);
}

.l-footer__note {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 700;
}

.c-heading {
  margin: 0 0 1.5rem;
  font-size: 1.5rem;
  font-weight: 900;
  line-height: 1.4;
}

.p-member-delete {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--color-border);
}

.p-member-delete .c-heading--sub {
  margin-bottom: 1rem;
}

.c-heading--sub {
  margin: 0;
  font-size: 1.125rem;
}

.p-panel {
  max-width: 42rem;
  margin: 0 auto;
  padding: 2.75rem;
  background: var(--color-surface);
  border: 2px solid var(--color-border);
  border-radius: 1.5rem;
  box-shadow: var(--shadow-soft);
}

.p-panel--narrow {
  max-width: 26rem;
}

.p-panel__text {
  margin: 0 0 1.5rem;
}

.p-panel__back {
  margin: 2rem 0 0;
  font-size: 0.875rem;
}

.p-panel__fallback {
  margin-top: 2rem;
}

.p-panel__fallback summary {
  color: var(--color-muted);
  font-size: 0.8125rem;
  cursor: pointer;
}

.p-panel__fallback form {
  margin-top: 1rem;
}

.c-form__row {
  margin-bottom: 1.875rem;
}

.c-form__label {
  display: block;
  margin: 0 0 0.5rem;
  font-size: 0.875rem;
  font-weight: 700;
}

.c-form__input {
  width: 100%;
  padding: 0.875rem 1rem;
  font-size: 1rem;
  font-family: inherit;
  line-height: 1.6;
  color: var(--color-ink);
  background: var(--color-blue-mist);
  border: 2px solid var(--color-border);
  border-radius: 0.875rem;
}

.c-form__input:focus {
  outline: none;
  background: var(--color-surface);
  border-color: var(--color-blue-deep);
  box-shadow: 0 0 0 0.25rem rgb(46 167 224 / 0.22);
}

.c-form__help {
  margin: 0.5rem 0 0;
  color: var(--color-muted);
  font-size: 0.8125rem;
}

.c-form__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: 0 1.5rem;
}

.c-form__inline {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.75rem;
}

.c-form__inline-label {
  flex-shrink: 0;
  width: 2rem;
  font-size: 0.875rem;
  font-weight: 700;
  text-align: center;
}

.c-form__radio {
  display: block;
  margin-bottom: 0.5rem;
}

.c-checklist {
  margin: 0;
  padding: 0;
  list-style: none;
}

.c-checklist__item {
  padding: 0.625rem 0;
  border-bottom: 1px solid var(--color-border);
}

.c-sortlist {
  display: grid;
  gap: 0.625rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.c-sortlist__item {
  display: flex;
  gap: 0.875rem;
  align-items: center;
  padding: 0.625rem 0.625rem 0.625rem 0.5rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 0.625rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.c-sortlist__item[data-dragging] {
  position: relative;
  z-index: 1;
  box-shadow: var(--shadow-soft);
}

.c-sortlist__handle {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  color: var(--color-muted);
  background: none;
  border: 0;
  border-radius: 0.375rem;
  cursor: grab;
  touch-action: none;
}

.c-sortlist__handle:hover,
.c-sortlist__handle:focus-visible {
  color: var(--color-primary-dark);
  background: var(--color-primary-tint);
}

.c-sortlist__item[data-dragging] .c-sortlist__handle {
  cursor: grabbing;
}

.c-sortlist__handle .c-icon {
  width: 1.25rem;
  height: 1.25rem;
}

.c-sortlist__name {
  flex: 1;
  font-weight: 700;
}

.c-sortlist__remove {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  color: var(--color-muted);
  background: none;
  border: 0;
  border-radius: 0.375rem;
  cursor: pointer;
}

.c-sortlist__remove:hover,
.c-sortlist__remove:focus-visible {
  color: var(--color-primary-dark);
  background: var(--color-primary-tint);
}

.c-sortlist__remove .c-icon {
  width: 1.125rem;
  height: 1.125rem;
}

.c-sortlist__empty {
  margin: 0;
  padding: 1.25rem;
  color: var(--color-muted);
  font-size: 0.875rem;
  text-align: center;
  border: 1px dashed var(--color-border);
  border-radius: 0.625rem;
}

.c-member-add {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  margin-top: 0.875rem;
}

.c-member-add__select {
  flex: 1;
  max-width: 20rem;
}

.c-btn {
  display: inline-block;
  padding: 0.75rem 1.75rem;
  font-size: 0.9375rem;
  font-family: inherit;
  font-weight: 900;
  letter-spacing: 0.04em;
  color: var(--color-blue-ink);
  text-decoration: none;
  background: var(--color-surface);
  border: 2px solid var(--color-sky);
  border-radius: 999px;
  box-shadow: 0 0.25rem 0 var(--color-blue-line);
  cursor: pointer;
}

.c-btn:hover {
  background: var(--color-blue-mist);
  box-shadow: 0 0.0625rem 0 var(--color-blue-line);
  transform: translateY(0.1875rem);
}

.c-btn[disabled] {
  color: var(--color-white);
  pointer-events: none;
  background: var(--color-button-off);
  border-color: var(--color-button-off);
  box-shadow: none;
}

/* 主ボタン。LPと同じ、水色の面に白文字（2026-10-06 本人指定。コントラストは約2.0だが、LPに合わせる） */
.c-btn--primary {
  color: var(--color-white);
  background: var(--color-sky);
  box-shadow: 0 0.25rem 0 var(--color-on-sky);
}

.c-btn--primary:hover {
  background: var(--color-sky-mid);
  box-shadow: 0 0.0625rem 0 var(--color-on-sky);
}

.c-btn--small {
  padding: 0.375rem 1rem;
  font-size: 0.8125rem;
}

.c-alert {
  margin: 0 0 1.5rem;
  padding: 1rem 1.25rem;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--color-error);
  background: var(--color-error-bg);
  border: 2px solid var(--color-error-bg);
  border-radius: 1rem;
}

.c-alert--info {
  color: var(--color-ink);
  background: var(--color-blue-pale);
  border-color: var(--color-border);
}

.c-alert__code {
  margin: 0.5rem 0 0;
  font-family: monospace;
  font-size: 0.875rem;
  word-break: break-all;
}

.c-alert__action {
  margin: 0.75rem 0 0;
}

.c-table-wrap {
  overflow-x: auto;
}

.c-table {
  width: 100%;
  font-size: 0.875rem;
  border-collapse: collapse;
}

.c-table th,
.c-table td {
  padding: 0.75rem 1rem;
  text-align: left;
  white-space: nowrap;
  border-bottom: 1px solid var(--color-border);
}

.c-table th {
  color: var(--color-muted);
  font-weight: 700;
}

.c-detail {
  margin: 0 0 2rem;
}

.c-detail__row {
  display: flex;
  gap: 1.5rem;
  padding: 0.875rem 0;
  border-bottom: 1px solid var(--color-border);
}

.c-detail__row dt {
  flex-shrink: 0;
  width: 8rem;
  font-size: 0.875rem;
  font-weight: 700;
}

.c-detail__row dd {
  margin: 0;
  word-break: break-all;
}

.p-booking {
  max-width: 46rem;
  margin: 0 auto;
  padding: 2.75rem;
  background: var(--color-surface);
  border: 2px solid var(--color-border);
  border-radius: 1.5rem;
  box-shadow: var(--shadow-soft);
}

.p-booking__duration {
  margin: 0 0 0.75rem;
}

.p-booking__description {
  margin: 0 0 1rem;
}

.p-booking__lead {
  margin: 0 0 1.5rem;
  font-weight: 700;
}

.p-booking__empty {
  margin: 0;
  padding: 2rem 0;
  color: var(--color-muted);
}

.p-booking__nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.p-booking__month {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 700;
}

.p-booking__nav-buttons {
  display: flex;
  gap: 0.5rem;
}

.p-booking__nav [aria-disabled='true'] {
  color: var(--color-muted);
  border-color: var(--color-border);
  cursor: default;
}

.p-booking__nav [aria-disabled='true']:hover {
  background: var(--color-surface);
}

.c-grid {
  width: 100%;
  table-layout: fixed;
  font-size: 0.875rem;
  border-collapse: collapse;
}

.c-grid__time-head {
  width: 3.5rem;
}

.c-grid__day {
  padding: 0.5rem 0.25rem;
  font-weight: 700;
  text-align: center;
  border-bottom: 2px solid var(--color-border);
}

.c-grid__day-number {
  display: block;
  font-size: 0.9375rem;
}

.c-grid__day-name {
  display: block;
  color: var(--color-muted);
  font-size: 0.75rem;
  font-weight: 400;
}

.c-grid__time {
  padding: 0.375rem 0.5rem 0 0;
  color: var(--color-muted);
  font-size: 0.75rem;
  font-weight: 400;
  text-align: right;
  vertical-align: top;
}

.c-grid__cell {
  height: 3rem;
  min-width: 3.5rem;
  padding: 0.1875rem;
  text-align: center;
  vertical-align: middle;
  border: 1px solid var(--color-border);
}

.c-grid__slot {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  color: var(--color-on-sky);
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  background: var(--color-primary);
  border-radius: 0.375rem;
}

.c-grid__slot:hover {
  background: var(--color-sky-mid);
}

/* スマホでは横スクロールさせず、余白と文字を詰めて7列を収める */
@media (max-width: 40rem) {

  html {
    font-size: 14px;
  }

  .p-booking {
    padding: 1.5rem 0.875rem;
  }

  .c-card__actions {
    gap: 0.25rem 1rem;
    padding: 0.75rem 1.25rem;
  }

  .c-tabs {
    gap: 1rem;
  }

  .c-tabs__item {
    font-size: 0.875rem;
    white-space: nowrap;
  }

  .p-booking__month {
    font-size: 1rem;
  }

  .c-grid__time-head {
    width: 2.5rem;
  }

  .c-grid__time {
    padding-right: 0.25rem;
    font-size: 0.625rem;
  }

  .c-grid__day {
    padding: 0.375rem 0;
  }

  .c-grid__day-number {
    font-size: 0.8125rem;
  }

  .c-grid__day-name {
    font-size: 0.625rem;
  }

  .c-grid__cell {
    height: 2.5rem;
    min-width: 0;
  }

  .c-grid__slot {
    font-size: 0.875rem;
  }
}

.c-cards {
  display: grid;
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.c-card {
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 1.5rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* クリック可能領域のホバーでカード全体をオレンジのネオン風に光らせる */
.c-card:has(.c-card__body--link:hover) {
  box-shadow: var(--shadow-soft);
}

.c-card__corner-action {
  position: absolute;
  top: 1.25rem;
  right: 1.75rem;
  z-index: 1;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 2.25rem;
  height: 2.25rem;
  color: var(--color-on-sky);
  background: var(--color-primary);
  border-radius: 50%;
}

.c-card__corner-action:hover {
  background: var(--color-sky-mid);
}

.c-card__corner-action .c-icon {
  margin-right: 0;
}

.c-card__body {
  padding: 1.5rem 1.75rem 1.25rem;
}

.c-card__body--link {
  display: block;
  color: inherit;
  text-decoration: none;
}


.c-cards--compact {
  gap: 0.75rem;
}

.c-card__body--booking {
  padding: 0.875rem 1.25rem;
}

.c-card__body--booking .c-card__title {
  margin: 0 0 0.25rem;
  font-size: 1rem;
}

.c-card__body--booking .c-card__sub {
  font-size: 0.75rem;
}

.c-booking-head {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin: 0 0 0.375rem;
}

.c-booking-head .c-card__chip {
  padding: 0.0625rem 0.625rem;
  font-size: 0.6875rem;
}

.c-booking-head__event {
  color: var(--color-muted);
  font-size: 0.75rem;
  font-weight: 700;
}

.c-card__sub + .c-card__sub {
  margin-top: 0.25rem;
}

.c-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 0.75rem;
}

.c-card__chip {
  padding: 0.125rem 0.75rem;
  color: var(--color-primary-dark);
  font-size: 0.75rem;
  font-weight: 700;
  background: var(--color-primary-tint);
  border-radius: 999px;
}

.c-card__chip[data-state='on'] {
  color: var(--color-on-sky);
  background: var(--color-primary);
}

.c-card__chip[data-state='off'] {
  color: var(--color-muted);
  background: var(--color-bg);
}

.c-card__title {
  margin: 0 0 0.375rem;
  font-size: 1.125rem;
}

.c-card__sub {
  margin: 0;
  color: var(--color-muted);
  font-size: 0.8125rem;
}

.c-card__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.25rem 1.75rem;
  padding: 0.875rem 1.75rem;
  border-top: 1px solid var(--color-border);
}

.c-card__action {
  display: inline-flex;
  align-items: center;
  padding: 0;
  color: var(--color-primary-dark);
  font-size: 0.875rem;
  font-family: inherit;
  font-weight: 700;
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
}

.c-steps {
  display: flex;
  gap: 0.25rem;
  margin: 0 0 2.25rem;
  padding: 0;
  list-style: none;
}

.c-steps__item {
  display: flex;
  flex: 1;
  justify-content: center;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 1rem;
  color: var(--color-muted);
  font-size: 0.75rem;
  font-weight: 700;
  background: var(--color-bg);
  clip-path: polygon(0 0, calc(100% - 0.625rem) 0, 100% 50%, calc(100% - 0.625rem) 100%, 0 100%);
}

.c-steps__item[data-notch='true'] {
  clip-path: polygon(0 0, calc(100% - 0.625rem) 0, 100% 50%, calc(100% - 0.625rem) 100%, 0 100%, 0.625rem 50%);
}

.c-steps__item[data-state='current'] {
  color: var(--color-on-sky);
  background: var(--color-primary);
}

.c-steps__number {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 1.125rem;
  height: 1.125rem;
  color: var(--color-white);
  font-size: 0.6875rem;
  background: var(--color-button-off);
  border-radius: 50%;
}

.c-steps__item[data-state='current'] .c-steps__number {
  color: var(--color-on-sky);
  background: var(--color-white);
}

.c-card__action:hover {
  text-decoration: underline;
}

.p-admin__section {
  margin-bottom: 3.5rem;
}

.p-admin__breadcrumb {
  margin: 0 0 1rem;
  color: var(--color-muted);
  font-size: 0.8125rem;
}

.c-tabs {
  display: flex;
  align-items: center;
  gap: 2rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--color-border);
}

.c-tabs__item {
  padding: 0.625rem 0.25rem;
  color: var(--color-muted);
  font-size: 0.9375rem;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 3px solid transparent;
}

.c-tabs__item[data-state='current'] {
  color: var(--color-primary-dark);
  border-bottom-color: var(--color-primary);
}

.c-icon {
  vertical-align: -0.125em;
  margin-right: 0.375em;
}

.c-choice {
  display: inline-flex;
  flex-wrap: nowrap;
  max-width: 100%;
  overflow-x: auto;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 0.875rem;
}

.c-choice__chip {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  padding: 0.625rem 1.25rem;
  color: var(--color-muted);
  font-size: 0.875rem;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

.c-choice__chip + .c-choice__chip {
  border-left: 1px solid var(--color-border);
}

.c-choice__chip:has(input:checked) {
  color: var(--color-on-sky);
  background: var(--color-primary);
}

.c-choice__chip input[type='radio'] {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.c-choice__number {
  width: 4.5rem;
  margin: 0 0.375rem;
  padding: 0.125rem 0.5rem;
  font-size: 0.875rem;
  font-family: inherit;
  border: 1px solid var(--color-border);
  border-radius: 0.375rem;
}

.c-choice__chip--custom:has(input:checked) .c-choice__number {
  color: var(--color-text);
  background: var(--color-surface);
  border-color: var(--color-primary-dark);
}

.p-edit__section {
  margin: 0 0 3.5rem;
}

.p-edit__section--after {
  margin-top: 3.5rem;
}

.p-edit__sub-action {
  margin-top: 1rem;
}

.p-edit__heading {
  margin: 0 0 1.75rem;
  padding-bottom: 0.75rem;
  font-size: 1.125rem;
  border-bottom: 1px solid var(--color-border);
}

.p-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: center;
  margin-top: 2rem;
}

.p-actions:not(:last-child) {
  margin-bottom: 2rem;
}

.p-actions .c-btn {
  min-width: 16rem;
  text-align: center;
}
.c-week {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  overflow: hidden;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 0.875rem;
}

.c-week__day {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.75rem 0.25rem;
  font-family: inherit;
  background: var(--color-surface);
  border: none;
  cursor: pointer;
}

.c-week__day + .c-week__day {
  border-left: 1px solid var(--color-border);
}

.c-week__day:hover {
  background: var(--color-primary-tint);
}

.c-week__label {
  display: block;
  margin-bottom: 0.375rem;
  font-size: 0.875rem;
  font-weight: 700;
}

.c-week__summary {
  display: block;
  min-height: 2.25rem;
  color: var(--color-primary-dark);
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  line-height: 1.5;
}

.c-week__range {
  display: block;
}

.c-week__range + .c-week__range {
  margin-top: 0.5rem;
}

.c-week__day[data-state='off'] .c-week__summary {
  color: var(--color-muted);
  font-weight: 400;
}

/* 狭い画面では曜日を縦に並べ、時間帯を横に並べる（7列だと時刻が見切れるため） */
@media (max-width: 40rem) {
  .c-week {
    grid-template-columns: 1fr;
  }

  .c-week__day {
    flex-direction: row;
    gap: 1rem;
    align-items: baseline;
    padding: 0.875rem 1rem;
    text-align: left;
  }

  .c-week__day + .c-week__day {
    border-top: 1px solid var(--color-border);
    border-left: none;
  }

  .c-week__label {
    flex-shrink: 0;
    width: 1.5rem;
    margin-bottom: 0;
  }

  .c-week__summary {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
    min-height: 0;
    font-size: 0.875rem;
  }

  .c-week__range br {
    display: none;
  }

  .c-week__range + .c-week__range {
    margin-top: 0;
  }
}

.c-dialog {
  width: min(26rem, calc(100vw - 2rem));
  padding: 1.75rem;
  border: none;
  border-radius: 1.5rem;
}

.c-dialog::backdrop {
  background: rgb(14 68 103 / 0.4);
}

.c-dialog__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.25rem;
}

.c-dialog__title {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 700;
}

.c-dialog__close {
  padding: 0;
  color: var(--color-muted);
  font-size: 1.25rem;
  background: none;
  border: none;
  cursor: pointer;
}

.c-dialog__enable {
  display: block;
  margin-bottom: 1rem;
  font-size: 0.9375rem;
}

.c-dialog__range {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.625rem;
}

.c-dialog__range input[type='time'] {
  flex: 1;
  padding: 0.5rem 0.75rem;
  font-size: 0.9375rem;
  font-family: inherit;
  border: 1px solid var(--color-border);
  border-radius: 0.375rem;
}

.c-dialog__remove {
  padding: 0.25rem 0.625rem;
  color: var(--color-muted);
  font-size: 1rem;
  background: none;
  border: 1px solid var(--color-border);
  border-radius: 0.375rem;
  cursor: pointer;
}

.c-dialog__apply-label {
  margin-top: 1.5rem;
}

.c-dialog__apply {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: 0.875rem;
}

.c-dialog__apply-day {
  padding: 0.5rem 0;
  font-size: 0.875rem;
  text-align: center;
  cursor: pointer;
}

.c-dialog__apply-day + .c-dialog__apply-day {
  border-left: 1px solid var(--color-border);
}

.c-dialog__apply-day:has(input:checked) {
  color: var(--color-on-sky);
  background: var(--color-primary);
}

.c-dialog__apply-day:has(input:disabled) {
  color: var(--color-border);
  cursor: default;
}

.c-dialog__apply-day input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.c-dialog__actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  margin-top: 1.75rem;
}

.c-break {
  word-break: break-all;
}

.c-required {
  margin-left: 0.5rem;
  padding: 0.125rem 0.5rem;
  color: var(--color-ink);
  font-size: 0.75rem;
  font-weight: 700;
  vertical-align: 0.0625em;
  background: var(--color-pink);
  border-radius: 999px;
}

.c-selected-date {
  margin-bottom: 2rem;
  padding: 1.25rem 1.5rem;
  background: var(--color-primary-tint);
  border: 1px solid var(--color-border);
  border-radius: 1rem;
}

.c-selected-date__label {
  margin: 0 0 0.25rem;
  font-size: 0.75rem;
  font-weight: 700;
}

.c-selected-date__value {
  margin: 0 0 0.75rem;
  font-size: 1.125rem;
  font-weight: 700;
}

.c-selected-date__change {
  display: inline-flex;
  align-items: center;
  font-size: 0.875rem;
  font-weight: 700;
}

.c-form__note {
  margin: 0 0 1.5rem;
  font-size: 0.875rem;
}

.c-form__privacy {
  margin: 0 0 1.5rem;
  padding: 1rem 1.25rem;
  font-size: 0.875rem;
  background: var(--color-blue-mist);
  border-radius: 1rem;
}

.c-form__privacy p {
  margin: 0.5rem 0 0;
}

.c-form__privacy-summary {
  font-weight: 900;
  cursor: pointer;
}

.c-form__consent {
  margin: 0 0 0.625rem;
  font-size: 0.875rem;
  text-align: center;
}

.p-admin__section-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.75rem;
}

.p-admin__section-head--end {
  justify-content: flex-end;
}

.p-admin__section .c-heading--sub {
  margin-bottom: 1.25rem;
}

.p-admin__invite-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.p-admin__empty {
  margin: 0;
  color: var(--color-muted);
  font-size: 0.9375rem;
}

/* 狭い画面ではヘッダーの「日程調整」の見出しを省き、アカウント名は省略表示にして1行に収める */
@media (max-width: 40rem) {
  .l-header__inner {
    padding-left: 1rem;
  }

  .l-header__label {
    display: none;
  }

  .l-header__nav {
    gap: 0.75rem;
    min-width: 0;
  }

  .c-account__summary {
    max-width: 7rem;
  }
}

/* モバイルの余白・項目と内容の縦並び・主ボタンの縦並び（各コンポーネントの指定より後ろに置く） */
@media (max-width: 40rem) {
  /* 余白は px 指定（モバイルは html が 14px のため rem だと 16px にならない） */
  :root {
    --space-page: 16px;
  }

  .p-panel,
  .p-booking,
  .c-card__body,
  .c-selected-date,
  .c-dialog,
  .c-alert {
    padding: 16px;
  }

  .c-card__body--booking,
  .c-card__actions {
    padding: 12px 16px;
  }

  .c-detail__row {
    flex-direction: column;
    gap: 0.25rem;
  }

  .c-detail__row dt {
    width: auto;
  }

  .p-actions {
    flex-direction: column;
    align-items: center;
  }

  .p-actions .c-btn {
    width: 100%;
    max-width: 500px;
    min-width: 0;
  }
}