@charset "utf-8";
@import url("https://cdn.jsdelivr.net/npm/medium-zoom-next@2/dist/style.css");

:root {
  interpolate-size: allow-keywords;
  --header-height: 4rem;
}

/* oklch(0.21 0.03 263.61)→oklch(0.3 0.03 263.61) */
:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.3 0.03 263.61);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.3 0.03 263.61);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.3 0.03 263.61);
  --primary: oklch(0.48 0.2 260.47);
  --primary-foreground: oklch(1 0 0);
  --secondary: oklch(0.97 0 0);
  --secondary-foreground: oklch(0.37 0.03 259.73);
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.55 0.02 264.41);
  --accent: oklch(0.95 0.02 260.18);
  --accent-foreground: oklch(0.48 0.2 260.47);
  --destructive: oklch(0.58 0.22 27.29);
  --border: oklch(0.93 0.01 261.82);
  --input: oklch(0.93 0.01 261.82);
  --ring: oklch(0.48 0.2 260.47);
  --chart-1: oklch(0.48 0.2 260.47);
  --chart-2: oklch(0.56 0.24 260.92);
  --chart-3: oklch(0.4 0.16 259.61);
  --chart-4: oklch(0.43 0.16 259.82);
  --chart-5: oklch(0.29 0.07 261.2);
  --sidebar: oklch(0.992 0 0);
  --sidebar-foreground: oklch(0.3 0.03 263.61);
  --sidebar-primary: oklch(0.48 0.2 260.47);
  --sidebar-primary-foreground: oklch(1 0 0);
  --sidebar-accent: oklch(0.95 0.02 260.18);
  --sidebar-accent-foreground: oklch(0.48 0.2 260.47);
  --sidebar-border: oklch(0.93 0.01 261.82);
  --sidebar-ring: oklch(0.48 0.2 260.47);

  --radius: 0.375rem;

  --shadow-2xs: 0 1px 3px 0px oklch(0 0 0 / 0.05);
  --shadow-xs: 0 1px 3px 0px oklch(0 0 0 / 0.05);
  --shadow-sm:
    0 1px 3px 0px oklch(0 0 0 / 0.1), 0 1px 2px -1px oklch(0 0 0 / 0.1);
  --shadow: 0 1px 3px 0px oklch(0 0 0 / 0.1), 0 1px 2px -1px oklch(0 0 0 / 0.1);
  --shadow-md:
    0 1px 3px 0px oklch(0 0 0 / 0.1), 0 2px 4px -1px oklch(0 0 0 / 0.1);
  --shadow-lg:
    0 1px 3px 0px oklch(0 0 0 / 0.1), 0 4px 6px -1px oklch(0 0 0 / 0.1);
  --shadow-xl:
    0 1px 3px 0px oklch(0 0 0 / 0.1), 0 8px 10px -1px oklch(0 0 0 / 0.1);
  --shadow-2xl: 0 1px 3px 0px oklch(0 0 0 / 0.25);
}

.dark {
  --background: oklch(0.26 0.03 262.67);
  --foreground: oklch(0.93 0.01 261.82);
  --card: oklch(0.3 0.03 260.51);
  --card-foreground: oklch(0.93 0.01 261.82);
  --popover: oklch(0.3 0.03 260.51);
  --popover-foreground: oklch(0.93 0.01 261.82);
  --primary: oklch(0.56 0.24 260.92);
  --primary-foreground: oklch(1 0 0);
  --secondary: oklch(0.35 0.04 261.4);
  --secondary-foreground: oklch(0.93 0.01 261.82);
  --muted: oklch(0.3 0.03 260.51);
  --muted-foreground: oklch(0.71 0.02 261.33);
  --accent: oklch(0.33 0.04 264.63);
  --accent-foreground: oklch(0.93 0.01 261.82);
  --destructive: oklch(0.64 0.21 25.39);
  --border: oklch(0.35 0.04 261.4);
  --input: oklch(0.35 0.04 261.4);
  --ring: oklch(0.56 0.24 260.92);
  --chart-1: oklch(0.56 0.24 260.92);
  --chart-2: oklch(0.48 0.2 260.47);
  --chart-3: oklch(0.69 0.17 255.59);
  --chart-4: oklch(0.43 0.16 259.82);
  --chart-5: oklch(0.29 0.07 261.2);
  --sidebar: oklch(0.26 0.03 262.67);
  --sidebar-foreground: oklch(0.93 0.01 261.82);
  --sidebar-primary: oklch(0.56 0.24 260.92);
  --sidebar-primary-foreground: oklch(1 0 0);
  --sidebar-accent: oklch(0.33 0.04 264.63);
  --sidebar-accent-foreground: oklch(0.93 0.01 261.82);
  --sidebar-border: oklch(0.35 0.04 261.4);
  --sidebar-ring: oklch(0.56 0.24 260.92);
}

/* @view-transition {
  navigation: auto;
} */

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-delay: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}
@media (prefers-reduced-motion) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

html {
  font-size: 1rem;
  @media (width >= 1024px) {
    font-size: 1.0625rem;
  }
}

@layer base {
  html {
    font-family: sans-serif;
    font-feature-settings: "palt";
    scroll-behavior: auto;
    letter-spacing: 0.04em;
    text-underline-offset: 4px;
  }
  main [id],
  main[id] {
    scroll-margin-top: var(--header-height);
  }

  /* ========== basecoatの微妙なデフォルト設定の改善 ========== */
  html,
  body {
    overscroll-behavior-y: auto !important;
  }
  .scrollbar {
    overscroll-behavior-y: contain !important;
  }
  html:has(:target) {
    scroll-behavior: smooth;
  }
  @media (any-hover: none) {
    :is(.hover-tweak):hover {
      background-color: transparent !important;
      color: inherit !important;
    }
  }

  /* モバイルサイドバー背景オーバーレイのアニメーション */
  @media not all and (min-width: 48rem) {
    .sidebar {
      transition: background-color 0.3s;
    }
    .sidebar[aria-hidden="true"] {
      inset: 0;
      z-index: 40;
      position: fixed;
    }
  }
  /* ========== basecoat関連 ここまで ========== */

  main {
    max-width: clamp(45rem, 55vw, 50rem);
    margin-inline: auto;
    line-height: 1.7;
    container-type: inline-size;

    a {
      color: color-mix(in oklch, var(--primary) 85%, black);
      text-decoration: underline;

      &:hover {
        text-decoration-thickness: 0.13em;
      }
      nav & {
        color: inherit;
        text-decoration: none;
        &:hover {
          text-decoration: none;
        }
      }
    }

    img {
      border-radius: 0.25rem;
    }

    :is(h1, h2, h3, h4) {
      font-weight: 600;
      letter-spacing: -0.025em;
    }

    h1 {
      /* =text-3xl */
      font-size: 1.875rem;
      font-weight: 600;
      letter-spacing: -0.025em;
      font-weight: 700;
      margin: 1em 0 0.5em;
      line-height: 1.3;
    }

    h2 {
      margin-top: 3rem;
      margin-bottom: 1rem;
      font-size: 1.5rem;
      font-weight: 600;
      letter-spacing: -0.025em;
      line-height: 1.4;
    }

    h3 {
      margin-top: 2rem;
      margin-bottom: 1rem;
      font-size: 1.25rem;
      font-weight: 600;
      letter-spacing: -0.025em;
      line-height: 1.5;
    }
    h4 {
      margin-top: 1.5rem;
      margin-bottom: 1rem;
      font-weight: 600;
      letter-spacing: -0.025em;
    }
    @media (min-width: 1024px) {
      h2 {
        margin-top: 5rem;
      }
    }
    h1 + h2 {
      margin-top: 2rem;
    }
    h2 + h3 {
      margin-top: 1rem;
    }
    p {
      margin: 1em 0;
    }
    ul {
      list-style-type: disc;
    }
    ol {
      list-style-type: decimal;
    }
    ul,
    ol {
      margin: 0.5em 0;
      padding-left: 2em;
      /* ネストされたリスト */
      :is(ul, ol) {
        margin: 0.5em 0;
      }
    }

    li + li {
      margin-top: 0.5em;
    }

    ul > li > ul {
      list-style-type: circle;
    }

    nav :is(ul, ol, li) {
      list-style-type: none;
      margin: 0;
      padding: 0;
    }

    dl {
      margin: 1em 0;
    }
    dt {
      font-weight: 600;
      margin-top: 0.5em;
    }
    dd {
      margin-left: 2em;
      :is(ul, ol) {
        padding-left: 1.5em;
      }
    }

    .breadcrumbs {
      list-style: none;
      padding: 0;
      margin: 0 0 2rem 0;
      font-size: 0.93rem;
    }

    .breadcrumbs li {
      display: inline;
    }

    .breadcrumbs li:not(:last-child)::after {
      content: " > ";
      margin: 0 0.5em;
    }
    .breadcrumbs a {
      text-decoration: underline;
      &:hover {
        text-decoration: underline;
        text-decoration-thickness: 0.13em;
      }
    }

    details {
      margin-block: 0.5rem;
      border-radius: var(--radius);
      border: 1px solid transparent;

      &[open] {
        border: 1px solid var(--border);
        summary {
          background-color: var(--muted);
        }
      }

      &:not([open]) summary {
        border: 1px solid var(--border);
        border-radius: var(--radius);
      }

      &::details-content {
        transition-duration: 300ms !important;
        padding-left: 1rem;
        overflow: clip;
        /* 子要素にmarginがあると開閉アニメーションがカクつく対策のpadding */
        padding-block: 0.1px;
      }
    }

    summary {
      display: list-item !important;
      width: 100%;
      font-weight: 600;
      cursor: pointer;
      padding: 0.5rem 1rem;
      border-bottom: 1px solid var(--border);
    }

    hr {
      margin-block: 2rem;
    }
    /* :not([class*="gsc-"])はサイト内検索の結果ページのレイアウト崩れの回避のため */
    table:not([class*="gsc-"]) {
      max-width: 100%;
      border-collapse: collapse;
      font-size: 0.95rem;
      margin-bottom: 0.5rem;
      border-radius: var(--radius);
      overflow: hidden;
    }

    thead th {
      font-weight: 600;
      background: var(--muted);
      border-bottom-width: 1px;
    }

    td,
    th {
      text-align: left;
      padding: 0.7em 1em;
      min-width: 3em;
    }
    tbody tr:not([class*="gsc-"] tbody tr) {
      border-bottom: 1px solid #e5e7eb;
    }
    @media only screen and (max-width: 639px) {
      table {
        font-size: 0.9rem;
      }
      td,
      th {
        padding: 0.5em 0.75em;
      }
    }

    a:not(.no-icon) {
      &::after {
        content: var(--file-label, none);
        display: inline-block;
        font-size: 0.875rem;
        padding: 0 0.25rem;
        margin-left: 0.25rem;
        border-radius: 0.25rem;
        color: var(--file-color);
        border: 1px solid color-mix(in oklch, var(--file-color) 40%, white);
        background-color: color-mix(in oklch, var(--file-color) 5%, white);
      }

      &[href$=".pdf"],
      &[href*=".pdf#"] {
        --file-label: "PDF";
        --file-color: oklch(0.505 0.213 27.518); /* red-700 */
      }

      &[href$=".xls"],
      &[href$=".xlsx"] {
        --file-label: "Excel";
        --file-color: oklch(0.527 0.154 150.069); /* green-700 */
      }

      &[href$=".mp3"] {
        --file-label: "MP3";
        --file-color: oklch(0.372 0.044 257.287); /* slate-700 */
      }

      &[href$=".doc"],
      &[href$=".docx"] {
        --file-label: "Word";
        --file-color: oklch(0.488 0.243 264.376); /* blue-700 */
      }
    }

    figure + figure {
      margin-top: 2rem;
    }

    figcaption {
      margin-top: 0.25rem;
    }
  }

  .icon-ext::after {
    content: "";
    display: inline-block;
    width: 1rem;
    height: 1rem;
    margin-left: 0.25rem;
    background-color: currentColor;
    vertical-align: middle;
    --icon-url: url("../images/external-link-icon.svg") center/contain no-repeat;
    -webkit-mask: var(--icon-url);
    mask: var(--icon-url);
  }
  /* 画像拡大時にheaderに画像が埋もれないようにする */
  .medium-zoom-overlay,
  .medium-zoom-image--opened {
    z-index: 1000;
    border-radius: 1px;
  }
  /* https://ics.media/entry/250319/ */
  @supports (text-box: trim-both) {
    .center-tweak {
      text-box: trim-both;
      text-box: trim-both cap alphabetic;
      padding: 0.483em 0;
    }
  }
}

.jouninkatudou-img {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.25rem;
  border-radius: 0.75rem;
  overflow: hidden;
}

.situmon {
  display: grid;
  grid-template-columns: clamp(5rem, 25cqw, 9rem) auto;
  gap: 1rem;
  margin-block: 3rem;

  @container (min-width: 576px) {
    gap: 1.5rem;
  }

  img {
    width: 100%;
  }

  h2 {
    margin-block: 0 0.25rem;
  }
  ol {
    padding-left: 1.25em;
  }
}

.situmon-naiyou-koumoku ol,
.list-kakkosuuji {
  padding-inline-start: 0;
}
.situmon-naiyou-koumoku ol li,
.list-kakkosuuji li {
  counter-increment: cnt;
  list-style-type: none;
}
.situmon-naiyou-koumoku ol li:before,
.list-kakkosuuji li:before {
  content: "(" counter(cnt) ") ";
}

.notice {
  padding: 1rem;
  border-top-right-radius: 0.75rem;
  border-bottom-right-radius: 0.75rem;
  background-color: rgba(248, 250, 252, 0.8);
  border-left-width: 4px;
  border-left-color: #94a3b8;
  margin-block: 1rem;
}

.link-arrow::before {
  content: "›";
  margin-right: 0.5rem;
  display: inline-block;
}

/* ↓↓↓　テキストマイニングページで使用　↓↓↓ */
.chip {
  background: var(--secondary);
  border: 1px solid var(--border);
  border-radius: 99px;
  color: var(--muted-foreground);
  font-size: 0.75rem;
  font-family: inherit;
  font-weight: 500;
  padding: 3px 12px;
  cursor: pointer;
  transition:
    background 0.15s,
    border-color 0.15s,
    color 0.15s;
}
.chip:hover {
  background: var(--accent);
  border-color: var(--primary);
  color: var(--accent-foreground);
}
.chip.active {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--primary-foreground);
}

/* フィルターチップ: 会議種別セレクタ（JS で .active を付け外し） */
.filter-chip {
  background: var(--secondary);
  border: 1px solid var(--border);
  border-radius: 99px;
  color: var(--muted-foreground);
  font-size: 0.7rem;
  font-family: inherit;
  font-weight: 500;
  padding: 2px 10px;
  cursor: pointer;
  transition:
    background 0.15s,
    border-color 0.15s,
    color 0.15s;
}
.filter-chip:hover {
  background: var(--accent);
  border-color: var(--primary);
  color: var(--accent-foreground);
}
.filter-chip.active {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--primary-foreground);
}

/* サマリー統計 フェードイン */
@keyframes tmSlideIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
#summary-stats:not([hidden]) {
  animation: tmSlideIn 0.35s ease;
}

/* タブパネル フェードイン */
@keyframes tmFadeIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
[role="tabpanel"]:not([hidden]) {
  animation: tmFadeIn 0.25s ease;
}
/* ↑↑↑　テキストマイニングページで使用　↑↑↑ */