@charset "UTF-8";
/* ==========================================================================
   /seminar/ 研修フォローアップページ
   --------------------------------------------------------------------------
   白河商工会議所「生成AI活用による業務効率化 実践研修」の受講者向けページと、
   そこにぶら下がる各回の配布コンテンツで共有するスタイル。

   前提と約束事：
     - クラス名は必ず  sem-  接頭辞（common.css の pl- / Tailwind と衝突させない）
     - 配色は Tailwind 拡張のトークン（navy #3B3535 / orange #c2410c /
       teal #0f766e / warm #FFF9F0）に揃える。ここで新しい色を作らない
     - 読み手はAIを学び始めたばかりの方で、多くはスマホから来る。
       文字は小さくしすぎない（本文は16px を下回らせない）

   このページは印刷して社内で回覧される想定があるため、末尾に印刷用の
   指定を置いている。画面用の指定を足すときは印刷側の影響も確認すること。
   ========================================================================== */

/* ==========================================================================
   各回のコンテンツ一覧（カード）
   ========================================================================== */

.sem-list {
  display: grid;
  gap: 16px;
}

@media (min-width: 768px) {
  .sem-list {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
}

/* カードは公開済み（a）と未公開（div）で要素が変わるため、
   見た目の土台だけをこのクラスに持たせ、状態差は修飾クラスで足す。 */
.sem-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px;
  border: 1px solid #e6e1dd;
  border-radius: 16px;
  background: #fff;
  text-decoration: none;
  color: inherit;
}

@media (min-width: 768px) {
  .sem-card {
    padding: 24px;
  }
}

/* --- 公開済み ------------------------------------------------------------ */

.sem-card--open {
  border-color: rgba(194, 65, 12, 0.35);
  box-shadow: 0 2px 10px rgba(47, 43, 43, 0.06);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.sem-card--open:hover,
.sem-card--open:focus-visible {
  transform: translateY(-2px);
  border-color: #c2410c;
  box-shadow: 0 10px 24px rgba(47, 43, 43, 0.12);
  opacity: 1;
}

/* --- 未公開 --------------------------------------------------------------
   次回への期待をつくるため、未公開のものも先に見せる。
   ただし押せると誤解させないよう、彩度と濃さを落として明確に沈める。 */

.sem-card--soon {
  background: #faf8f6;
  border-style: dashed;
}

.sem-card--soon .sem-card__title {
  color: #7d7570;
}

.sem-card--soon .sem-card__desc {
  color: #8d8681;
}

/* --- カードの中身 --------------------------------------------------------- */

.sem-card__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.sem-card__round {
  font-size: 13px;
  font-weight: 700;
  color: #0f766e;
  letter-spacing: 0.02em;
}

.sem-card__state {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.6;
  white-space: nowrap;
}

.sem-card__state--open {
  background: #c2410c;
  color: #fff;
}

.sem-card__state--soon {
  background: #efeae5;
  color: #6f6864;
}

.sem-card__title {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.65;
  color: #3b3535;
}

.sem-card__desc {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.85;
  color: #4d4643;
}

.sem-card__go {
  margin-top: auto;
  padding-top: 4px;
  font-size: 14px;
  font-weight: 700;
  color: #c2410c;
}

/* ==========================================================================
   相談導線（ページ末尾）
   --------------------------------------------------------------------------
   助成金を使った商工会議所主催の研修に付随するページなので、ここは
   売り込みの場ではない。濃色の共通CTA（includes/cta.php）は使わず、
   面積を抑えた囲みひとつに留めている。大きくしないこと。
   ========================================================================== */

.sem-quiet {
  border: 1px solid #e6e1dd;
  border-radius: 16px;
  background: #fff9f0;
  padding: 24px 20px;
}

@media (min-width: 768px) {
  .sem-quiet {
    padding: 28px;
  }
}

/* 縦積みにすると相談導線だけで縦を食ってしまい、「ページ全体の1割以下」に
   収まらなくなる。狭い画面でも2つ並べて置き、文字だけを詰める。 */
.sem-quiet__actions {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}

.sem-quiet__tel,
.sem-quiet__form {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 13px 10px;
  text-align: center;
  border-radius: 12px;
  /* 2つ並べるため、狭い画面では15pxまで落とす。これ以上は小さくしないこと
     （読み手に40〜60代が含まれる） */
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.sem-quiet__tel {
  border: 1px solid #d8d1cb;
  background: #fff;
  color: #3b3535;
}

.sem-quiet__tel:hover,
.sem-quiet__tel:focus-visible {
  background: #f8f6f4;
  opacity: 1;
}

.sem-quiet__form {
  border: 1px solid #c2410c;
  background: #fff;
  color: #c2410c;
}

.sem-quiet__form:hover,
.sem-quiet__form:focus-visible {
  background: #c2410c;
  color: #fff;
  opacity: 1;
}

/* ==========================================================================
   配布コンテンツ本文（チェックリストなど）
   ========================================================================== */

.sem-doc {
  font-size: 16px;
  line-height: 1.95;
  color: #4d4643;
}

.sem-doc h2 {
  margin: 44px 0 14px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.6;
  color: #3b3535;
  padding-bottom: 10px;
  border-bottom: 2px solid #efeae5;
}

.sem-doc h2:first-child {
  margin-top: 0;
}

.sem-doc h3 {
  margin: 28px 0 10px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.7;
  color: #3b3535;
}

.sem-doc p {
  margin: 0 0 16px;
}

.sem-doc > ul {
  margin: 0 0 16px;
  padding-left: 1.3em;
}

.sem-doc > ul li {
  margin-bottom: 8px;
}

/* --- チェック項目 --------------------------------------------------------
   紙に印刷して書き込む使い方も想定しているため、四角は装飾ではなく
   実際に書き込める大きさ（18px）を確保している。 */

.sem-check {
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
}

.sem-check > li {
  position: relative;
  margin: 0 0 12px;
  padding: 12px 14px 12px 44px;
  border: 1px solid #e6e1dd;
  border-radius: 12px;
  background: #fff;
  font-size: 15.5px;
  line-height: 1.8;
}

.sem-check > li::before {
  content: "";
  position: absolute;
  top: 15px;
  left: 14px;
  width: 18px;
  height: 18px;
  border: 2px solid #b9b1ab;
  border-radius: 4px;
  background: #fff;
}

.sem-check__note {
  display: block;
  margin-top: 4px;
  font-size: 13.5px;
  line-height: 1.8;
  color: #7d7570;
}

/* --- 補足の囲み ---------------------------------------------------------- */

.sem-note {
  margin: 0 0 20px;
  padding: 16px 18px;
  border-left: 4px solid #0f766e;
  border-radius: 0 10px 10px 0;
  background: #f4f7f6;
  font-size: 14.5px;
  line-height: 1.85;
  color: #4d4643;
}

.sem-note strong {
  color: #3b3535;
}

.sem-warn {
  margin: 0 0 20px;
  padding: 16px 18px;
  border-left: 4px solid #c2410c;
  border-radius: 0 10px 10px 0;
  background: #fdf4ef;
  font-size: 14.5px;
  line-height: 1.85;
  color: #4d4643;
}

.sem-warn strong {
  color: #3b3535;
}

/* --- 判定の早見表 --------------------------------------------------------- */

.sem-table-wrap {
  margin: 0 0 20px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.sem-table {
  width: 100%;
  min-width: 460px;
  border-collapse: collapse;
  font-size: 14.5px;
  line-height: 1.75;
}

.sem-table th,
.sem-table td {
  padding: 12px 14px;
  border: 1px solid #e6e1dd;
  text-align: left;
  vertical-align: top;
}

.sem-table th {
  background: #f8f6f4;
  font-weight: 700;
  color: #3b3535;
  white-space: nowrap;
}

/* --- 前後のページへ戻る導線 ---------------------------------------------- */

.sem-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14.5px;
  font-weight: 700;
  color: #c2410c;
  text-decoration: none;
}

.sem-back:hover,
.sem-back:focus-visible {
  text-decoration: underline;
  opacity: 1;
}

/* ==========================================================================
   印刷
   --------------------------------------------------------------------------
   受講者が紙に出して社内で配る／書き込むことを想定している。
   ヘッダー・フッター・相談導線・TOPへ戻るボタンは落とす。
   ========================================================================== */

@media print {
  @page {
    size: A4;
    margin: 15mm;
  }

  .pl-header,
  .pl-mobile,
  .pl-footer,
  .pl-skip,
  .sem-quiet,
  .sem-noprint,
  #backToTopBtn {
    display: none !important;
  }

  .sem-doc {
    font-size: 11pt;
    line-height: 1.7;
    color: #000;
  }

  .sem-check > li,
  .sem-note,
  .sem-warn,
  .sem-table {
    break-inside: avoid;
  }

  .sem-doc h2,
  .sem-doc h3 {
    break-after: avoid;
  }
}