@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap");

/* ==================================================
   Base
================================================== */

:root {
  --color-primary-50: #f0f9ff;
  --color-primary-100: #e0f1fe;
  --color-primary-200: #9ed9fc;
  --color-primary-300: #7dcffc;
  --color-primary-400: #38b7f8;
  --color-primary-500: #0e9fe9;
  --color-primary-600: #027ec7;
  --color-primary-700: #0364a1;
  --color-primary-800: #075585;
  --color-primary-900: #0c476e;
  --color-primary-950: #082d49;
  --color-neutral-50: #f9fafb;
  --color-neutral-100: #f3f4f6;
  --color-neutral-200: #e5e7eb;
  --color-neutral-300: #d1d5db;
  --color-neutral-400: #9ca3af;
  --color-neutral-500: #6b7280;
  --color-neutral-600: #4b5563;
  --color-neutral-700: #374151;
  --color-neutral-800: #1f2937;
  --color-neutral-900: #111827;
  --color-neutral-950: #030712;
  --color-danger: #ef4444;
  --color-success: #22c55e;
  --color-blue: #3b82f6;
  --color-yellow: #eab308;
}

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body {
  color: var(--color-primary-600);
  background-color: var(--color-primary-50);
  font-size: 1rem; /* 16px */
  line-height: 2;
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "palt";
  letter-spacing: 0.05em;
}

small {
  font-size: 0.75rem; /* 12px */
  line-height: 1rem; /* 16px */
}

strong {
  font-weight: 600;
}

ul,
ol {
  padding-left: 1em;
}

.list__kome {
  list-style: "※";
  line-height: 2 !important;
}

/* ==================================================
   Layout
================================================== */

.wrapper {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 4rem; /* 64px */
  width: 100%;
  max-width: 48rem; /* 768px */
  min-height: 100dvh;
  margin: 0 auto;
  padding: 4rem 1.25rem 0; /* 64px 20px 0 */
}

header {
  display: flex;
  flex-direction: column;
  gap: 4rem; /* 64px */
  picture {
    display: block;
    width: 100%;
    aspect-ratio: 16/9;
    border-radius: 0.5rem; /* 8px */
    overflow: hidden;
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: top right;
    }
  }
}

footer {
  padding-bottom: 4rem; /* 64px */
  text-align: center;
}

section + section {
  margin-top: 4rem; /* 64px */
}

p + p,
.box + .box {
  margin-top: 2rem; /* 32px */
}

.box {
  display: flex;
  flex-direction: column;
  gap: 2rem; /* 32px */
  padding: 2rem; /* 32px */
  border: 1px solid var(--color-primary-600);
  border-radius: 0.5rem; /* 8px */
  position: relative;
}

.box__title {
  background-color: var(--color-primary-600);
  color: var(--color-primary-50);
  position: absolute;
  top: 0;
  border-radius: 0.25rem; /* 4px */
  padding: 0 0.5rem; /* 0 8px */
  transform: translateY(-50%);
  font-weight: 600;
}

/* ==================================================
   Heading
================================================== */

h1 {
  font-size: 1.5rem; /* 24px */
  line-height: 2rem; /* 32px */
  font-weight: 600;
  color: var(--color-primary-800);
  border-top: 1px solid var(--color-primary-800);
  border-bottom: 1px solid var(--color-primary-800);
  padding: 1rem 0; /* 16px 0 */
}

h2 {
  font-size: 1.25rem; /* 20px */
  line-height: 1.75rem; /* 28px */
  font-weight: 600;
  color: var(--color-primary-800);
}

h3 {
  width: fit-content;
  font-size: 1.125rem; /* 18px */
  line-height: 1.75rem; /* 28px */
  font-weight: 600;
  color: var(--color-primary-800);
  border-bottom: 1px solid var(--color-primary-800);
}

/* ==================================================
   Anchor・Button
================================================== */

a {
  color: var(--color-primary-800);
  text-decoration: underline;
  &:hover {
    text-decoration: none;
  }
}

.button {
  display: flex;
  padding: 0.875rem 1.75rem 0.875rem 1.75rem; /* 14px 28px 14px 28px */
  justify-content: center;
  align-items: center;
  gap: 0.25rem; /* 4px */
  width: fit-content;
  border-radius: 9999px;
  background-color: var(--color-primary-600);
  color: var(--color-primary-50);
  font-size: 1rem; /* 16px */
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  transition: background-color 0.3s ease;
  cursor: pointer;
  border: none;
  i {
    width: 1rem; /* 16px */
  }
  &:hover {
    background-color: var(--color-primary-500);
    transition: background-color 0.3s ease;
  }
}

.button__secondary {
  display: flex;
  padding: 0.875rem 1.75rem 0.875rem 1.75rem; /* 14px 28px 14px 28px */
  justify-content: center;
  align-items: center;
  gap: 0.25rem; /* 4px */
  width: fit-content;
  border-radius: 9999px;
  background-color: transparent;
  color: var(--color-primary-600);
  font-size: 1rem; /* 16px */
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  transition: background-color 0.3s ease;
  cursor: pointer;
  border: none;
  outline: 1px solid var(--color-primary-600);
  outline-offset: -1px;
  i {
    width: 1rem; /* 16px */
  }
  &:hover {
    color: var(--color-primary-50);
    background-color: var(--color-primary-600);
    transition: all 0.3s ease;
  }
}

button[name="course_id"],
.course-list-item {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 1rem; /* 16px */
  padding: 1rem; /* 16px */
  background-color: var(--color-primary-600);
  border: none;
  border-radius: 0.5rem; /* 8px */
  cursor: pointer;
  color: var(--color-primary-50);
  font-weight: 600;
  text-align: left;
  transition: background-color 0.3s ease;
  div {
    display: flex;
    gap: 1rem; /* 16px */
    span {
      font-size: 1.125rem; /* 18px */
      line-height: 1.75rem; /* 28px */
      font-weight: 600;
    }
  }
  &:hover:not(.is-disabled, :disabled) {
    background-color: var(--color-primary-500);
    transition: background-color 0.3s ease;
  }
}

button[name="course_id"],
.course-list-item {
  &.is-disabled,
  &:disabled {
    background-color: var(--color-neutral-200);
    color: var(--color-neutral-500);
    cursor: default;
    .status-msg {
      background-color: var(--color-danger);
    }
  }
}

.status-msg {
  color: var(--color-primary-50);
  background-color: var(--color-success);
  border-radius: 9999px;
  padding: 0.5rem 1rem; /* 8px 16px */
  font-size: 0.6875rem; /* 12px */
  line-height: 1;
  white-space: nowrap;
}

/* スマホ用スタイル */
@media (max-width: 639px) {
  button[name="course_id"],
  .course-list-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem; /* 16px */
    .status-msg {
      align-self: flex-end;
    }
  }
}

/* ==================================================
   Breadcrumb
================================================== */

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem; /* 4px */
  list-style: none;
  font-size: 0.75rem; /* 12px */
  color: var(--color-primary-400);
  padding-left: 0;
  li {
    display: flex;
    align-items: center;
    gap: 0.25rem; /* 4px */
    i {
      color: var(--color-primary-200);
    }
    &.on {
      color: var(--color-primary-800);
      font-weight: 600;
    }
  }
}

/* ==================================================
   Form
================================================== */

form,
.form {
  display: flex;
  flex-direction: column;
  gap: 2rem; /* 32px */
  width: 100%;
  max-width: 36rem; /* 576px */
  margin: 0 auto;
}

.form__section {
  display: flex;
  flex-direction: column;
  gap: 0.75rem; /* 12px */
}

.form__section__confirm {
  display: flex;
  gap: 1rem; /* 16px */
  .label {
    line-height: 2;
  }
}

.form__section__confirm + .form__section__confirm {
  border-top: 1px solid var(--color-primary-100);
  padding-top: 2rem; /* 32px */
}

.form__section__footer {
  display: flex;
  flex-direction: row;
  gap: 2rem; /* 32px */
  padding-top: 2rem; /* 32px */
  justify-content: center;
}

.form__name {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem; /* 16px */
}

.form__name > div {
  display: flex;
  align-items: center;
  gap: 0.5rem; /* 8px */
  white-space: nowrap;
}

.form__birthday {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem; /* 8px */
}

.form__zip {
  display: flex;
  gap: 1rem; /* 16px */
}

.form__tel {
  display: flex;
  align-items: center;
  gap: 0.25rem; /* 4px */
}

.form__entry {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 1rem; /* 16px */
  input[type="text"] {
    width: 4rem; /* 64px */
  }
}

label,
.label {
  font-weight: 600;
  line-height: 1;
  color: var(--color-primary-800);
}

input[type="email"],
input[type="tel"],
input[type="text"] {
  width: 100%;
  padding: 0.5rem 1rem; /* 8px 16px */
  font-size: 1rem; /* 16px */
  line-height: 2;
  border-radius: 0.25rem; /* 4px */
  color: var(--color-primary-800);
  background-color: var(--color-primary-100);
  border: none;
  &:focus {
    outline-color: var(--color-primary-800);
  }
  &::placeholder {
    opacity: 0.3;
    color: var(--color-primary-800);
  }
}

input[type="text"][name="zip"] {
  max-width: 8rem; /* 128px */
}

.selectbox {
  position: relative;
  width: fit-content;
  &::before,
  &::after {
    position: absolute;
    content: "";
    pointer-events: none;
  }
  &::before {
    display: inline-block;
    right: 0;
    width: 3rem; /* 48px */
    height: 3rem; /* 48px */
    border-radius: 0 0.25rem 0.25rem 0; /* 0 4px 4px 0 */
    background-color: var(--color-primary-300);
  }
  &::after {
    position: absolute;
    top: 50%;
    right: 1.5rem; /* 24px */
    display: inline-block;
    transform: translate(50%, -50%) rotate(45deg);
    width: 0.375rem; /* 6px */
    height: 0.375rem; /* 6px */
    border-bottom: 1px solid var(--color-primary-50);
    border-right: 1px solid var(--color-primary-50);
  }
  select {
    appearance: none;
    height: 3rem; /* 48px */
    padding: 0.5rem 4rem 0.5rem 1rem; /* 8px 64px 8px 16px */
    border: none;
    border-radius: 0.25rem; /* 4px */
    background-color: var(--color-primary-100);
    color: var(--color-primary-800);
    font-size: 1rem; /* 16px */
    cursor: pointer;
    &:focus {
      outline: 2px solid var(--color-primary-800);
    }
  }
}

.radio {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  gap: 0.5rem 1rem; /* 8px 16px */
  border: none;
  label {
    display: flex;
    align-items: center;
    gap: 0 0.5rem;
    position: relative;
    cursor: pointer;
    font-weight: 400;
    color: var(--color-primary-600);
  }
}

.radio label::before,
.radio label:has(:checked)::after {
  border-radius: 50%;
  content: "";
}

.radio label::before {
  width: 16px;
  height: 16px;
  background-color: var(--color-primary-100);
}

.radio label:has(:checked)::after {
  position: absolute;
  top: 50%;
  left: 8px;
  transform: translate(-50%, -50%);
  width: 12px;
  height: 12px;
  background-color: var(--color-primary-800);
}

.radio input {
  display: none;
}

/* エラーメッセージなど */
.validate,
.color__red {
  color: var(--color-danger);
  line-height: 1;
}

.color__green {
  color: var(--color-success);
}

.color__blue {
  color: var(--color-blue);
}

.color__yellow {
  color: var(--color-yellow);
}

.close {
  color: var(--color-danger);
  font-weight: 700;
  font-size: 1.25rem; /* 20px */
  text-align: center;
}

.coming-soon {
  font-weight: 700;
  font-size: 1.25rem; /* 20px */
  text-align: center;
}

/* ==================================================
   Camera
================================================== */

.camera__container {
  padding: 15px;
  background: #f1f5f9;
  border-radius: 8px;
}

.camera__video-wrapper {
  position: relative;
  width: 100%;
  max-width: 400px;
  display: none;
  margin: 0 auto 10px;
  overflow: hidden;
}

.camera__video {
  display: block;
}

.camera__video-guide-frame {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80%;
  height: 60px;
  transform: translate(-50%, -50%);
  border: 2px solid var(--color-danger);
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5);
  pointer-events: none;
}

.camera__status {
  background-color: var(--color-blue);
  color: var(--color-primary-50);
  border-radius: 0.25rem; /* 4px */
  padding: 0.5rem 1rem; /* 8px 16px */
}

.camera__status:empty {
  display: none;
}

.camera__button {
  margin: 0 auto;
}

.camera__floating-action-area {
  display: none;
  position: fixed;
  bottom: 2rem; /* 32px */
  left: 50%;
  transform: translateX(-50%);
  z-index: 9998;
  width: calc(100% - 2rem); /* 100% - 32px */
  max-width: 22rem; /* 352px */
  background: var(--color-primary-500);
  padding: 0.5rem; /* 8px */
  border-radius: 9999px;
  box-shadow: 0 0.25rem 1rem rgb(19, 78, 74, 0.2);
  gap: 0.5rem; /* 8px */
}

.camera__stop-camera-btn {
  flex: 1;
  padding: 1rem 0; /* 16px 0 */
  margin: 0;
  background: transparent;
  border: none;
  color: var(--color-primary-50);
  font-size: 1rem; /* 16px */
  font-weight: bold;
  cursor: pointer;
}

.camera__scan-btn {
  flex: 2;
  background: var(--color-primary-900) !important;
}

.camera__confirm-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: 9999;
  justify-content: center;
  align-items: center;
}

.camera__confirm-modal-inner {
  background: var(--color-primary-50);
  padding: 2rem; /* 32px */
  border-radius: 0.75rem; /* 12px */
  text-align: center;
  width: calc(100% - 2rem); /* 100% - 32px */
  max-width: 22rem; /* 352px */
  box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.2);
}

.camera__modal-recognized-text {
  font-size: 1.5rem; /* 24px */
  font-weight: bold;
  letter-spacing: 0.1em;
  padding: 0.5rem;
  line-height: 1;
  background: var(--color-primary-100);
  border: 1px dashed var(--color-primary-600);
  border-radius: 0.25rem; /* 4px */
  color: var(--color-primary-800);
}

.camera__modal-button-area {
  display: flex;
  justify-content: space-between;
  gap: 1rem; /* 16px */
  button {
    flex: 1;
  }
}