/* ============================================================
   Toreteku Design System — components.css
   Load AFTER colors_and_type.css:
     <link rel="stylesheet" href="/colors_and_type.css">
     <link rel="stylesheet" href="/components.css">
   ------------------------------------------------------------
   Parts the website kit did not cover: forms, FAQ, pricing,
   seminar announcements, article body, notices, timeline, badges.
   Every color here resolves to a token — never hard-code a hex.
   ============================================================ */

/* ============================================================
   Card — the shared surface everything else sits on
   ============================================================ */
.tt-card {
  background: var(--tt-surface);
  border-radius: var(--tt-r-lg);
  padding: var(--tt-s-5);
  box-shadow: var(--tt-shadow-md);
}
.tt-card--flat  { box-shadow: none; border: 1px solid var(--tt-line); }
.tt-card--tint  { background: var(--tt-orange-100); box-shadow: none; }
.tt-card--hover { transition: transform var(--tt-dur-base) var(--tt-ease), box-shadow var(--tt-dur-base) var(--tt-ease); }
.tt-card--hover:hover { transform: translateY(-4px); box-shadow: var(--tt-shadow-lg); }

/* ============================================================
   Badge / pill — category tags, 「募集中」, 「満席」
   ============================================================ */
.tt-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: var(--tt-w-bold);
  letter-spacing: 0.04em;
  line-height: 1.6;
  border-radius: var(--tt-r-pill);
  background: var(--tt-orange-100);
  color: var(--tt-orange-ink);
  white-space: nowrap;
}
.tt-badge--navy    { background: var(--tt-navy);       color: #fff; }
.tt-badge--outline { background: transparent;          color: var(--tt-ink-2); border: 1px solid var(--tt-line-strong); }
.tt-badge--success { background: var(--tt-success-bg);  color: var(--tt-success-ink); }
.tt-badge--warning { background: var(--tt-warning-bg);  color: var(--tt-warning-ink); }
.tt-badge--danger  { background: var(--tt-danger-bg);   color: var(--tt-danger-ink); }
.tt-badge--info    { background: var(--tt-info-bg);     color: var(--tt-info-ink); }

/* ============================================================
   Forms — 無料相談の申込フォーム
   ============================================================ */
.tt-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--tt-s-5); }

.tt-label {
  display: flex; align-items: center; gap: 8px;
  font-size: var(--tt-fs-small);
  font-weight: var(--tt-w-bold);
  color: var(--tt-navy);
}
/* 「必須」「任意」 markers — never rely on color alone */
.tt-label__req,
.tt-label__opt {
  font-size: 11px; font-weight: var(--tt-w-bold);
  padding: 2px 8px; border-radius: var(--tt-r-pill); line-height: 1.6;
}
.tt-label__req { background: var(--tt-danger-bg);  color: var(--tt-danger-ink); }
.tt-label__opt { background: var(--tt-page);       color: var(--tt-ink-3); border: 1px solid var(--tt-line); }

.tt-input,
.tt-textarea,
.tt-select {
  width: 100%;
  padding: 12px 14px;
  min-height: 48px;
  font-family: var(--tt-font-ui);
  font-size: var(--tt-fs-body);
  line-height: 1.7;
  color: var(--tt-ink);
  background: var(--tt-surface);
  border: 1.5px solid var(--tt-line-strong);
  border-radius: var(--tt-r-sm);
  transition: border-color var(--tt-dur-fast) var(--tt-ease), box-shadow var(--tt-dur-fast) var(--tt-ease);
}
.tt-input::placeholder,
.tt-textarea::placeholder { color: var(--tt-ink-3); }

.tt-input:hover, .tt-textarea:hover, .tt-select:hover { border-color: var(--tt-navy-500); }
.tt-input:focus, .tt-textarea:focus, .tt-select:focus {
  border-color: var(--tt-orange-ink);
  box-shadow: 0 0 0 3px rgba(178, 88, 20, 0.14);
  outline: none;
}
.tt-textarea { min-height: 140px; resize: vertical; }

.tt-select {
  appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%231F3555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}

/* Error state — icon + text, not just a red border */
.tt-input[aria-invalid="true"],
.tt-textarea[aria-invalid="true"],
.tt-select[aria-invalid="true"] { border-color: var(--tt-danger-ink); background: var(--tt-danger-bg); }

.tt-error {
  display: flex; align-items: flex-start; gap: 6px;
  font-size: var(--tt-fs-meta);
  font-weight: var(--tt-w-bold);
  color: var(--tt-danger-ink);
}
.tt-error::before { content: "⚠"; line-height: 1.5; }

.tt-help { font-size: var(--tt-fs-meta); color: var(--tt-ink-3); line-height: 1.7; }

/* Checkbox / radio rows */
.tt-check {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: var(--tt-fs-small);
  line-height: 1.8;
  color: var(--tt-ink);
  cursor: pointer;
  padding: 6px 0;
}
.tt-check input[type="checkbox"],
.tt-check input[type="radio"] {
  width: 20px; height: 20px; margin: 3px 0 0; flex: 0 0 auto;
  accent-color: var(--tt-orange-ink);
  cursor: pointer;
}

/* ============================================================
   FAQ — アコーディオン（<details>/<summary> · no JS needed）
   ============================================================ */
.tt-faq { border-top: 1px solid var(--tt-line); }
.tt-faq__item { border-bottom: 1px solid var(--tt-line); }

.tt-faq__q {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 18px 4px;
  font-size: var(--tt-fs-body);
  font-weight: var(--tt-w-bold);
  line-height: 1.7;
  color: var(--tt-navy);
  cursor: pointer;
  list-style: none;
}
.tt-faq__q::-webkit-details-marker { display: none; }
.tt-faq__q::before {
  content: "Q";
  font-family: var(--tt-font-lt);
  color: var(--tt-orange-ink);
  font-weight: var(--tt-w-black);
  flex: 0 0 auto;
}
.tt-faq__q::after {
  content: "";
  margin-left: auto; flex: 0 0 auto;
  width: 10px; height: 10px;
  border-right: 2px solid var(--tt-navy-500);
  border-bottom: 2px solid var(--tt-navy-500);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--tt-dur-base) var(--tt-ease);
}
.tt-faq__item[open] > .tt-faq__q::after { transform: rotate(-135deg) translate(-2px, -2px); }

.tt-faq__a {
  display: flex; gap: 12px;
  padding: 0 4px 20px;
  font-size: var(--tt-fs-small);
  line-height: var(--tt-lh-prose);
  color: var(--tt-ink-2);
}
.tt-faq__a::before {
  content: "A";
  font-family: var(--tt-font-lt);
  color: var(--tt-navy-500);
  font-weight: var(--tt-w-black);
  flex: 0 0 auto;
}

/* ============================================================
   Notice — お知らせ・注意書き
   ============================================================ */
.tt-notice {
  display: flex; gap: 12px;
  padding: 14px 16px;
  border-radius: var(--tt-r-md);
  border-left: 4px solid var(--tt-info-ink);
  background: var(--tt-info-bg);
  font-size: var(--tt-fs-small);
  line-height: 1.85;
  color: var(--tt-ink);
}
.tt-notice__title { font-weight: var(--tt-w-bold); color: var(--tt-navy); display: block; margin-bottom: 2px; }
.tt-notice__icon  { flex: 0 0 auto; font-weight: var(--tt-w-black); color: var(--tt-info-ink); }

.tt-notice--success { border-left-color: var(--tt-success-ink); background: var(--tt-success-bg); }
.tt-notice--success .tt-notice__icon { color: var(--tt-success-ink); }
.tt-notice--warning { border-left-color: var(--tt-warning-ink); background: var(--tt-warning-bg); }
.tt-notice--warning .tt-notice__icon { color: var(--tt-warning-ink); }
.tt-notice--danger  { border-left-color: var(--tt-danger-ink);  background: var(--tt-danger-bg); }
.tt-notice--danger  .tt-notice__icon { color: var(--tt-danger-ink); }

/* ============================================================
   Seminar card — セミナー告知（日時・定員・申込）
   ============================================================ */
.tt-seminar {
  display: flex; flex-direction: column; gap: var(--tt-s-4);
  background: var(--tt-surface);
  border-radius: var(--tt-r-lg);
  border-top: 5px solid var(--tt-orange);
  padding: var(--tt-s-5);
  box-shadow: var(--tt-shadow-md);
}
.tt-seminar__head  { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tt-seminar__title { font-size: var(--tt-fs-h3); font-weight: var(--tt-w-bold); line-height: 1.55; color: var(--tt-navy); margin: 0; }

/* Definition list of 日時 / 会場 / 参加費 / 定員 */
.tt-seminar__meta {
  display: grid; grid-template-columns: auto 1fr; gap: 8px 16px;
  margin: 0; padding: var(--tt-s-4) 0 0;
  border-top: 1px solid var(--tt-line);
  font-size: var(--tt-fs-small);
  line-height: 1.8;
}
.tt-seminar__meta dt { font-weight: var(--tt-w-bold); color: var(--tt-ink-2); white-space: nowrap; }
.tt-seminar__meta dd { margin: 0; color: var(--tt-ink); }
.tt-seminar__meta dd strong { color: var(--tt-navy); }

/* ============================================================
   Price / plan table — 料金・サービス比較
   ============================================================ */
.tt-plans { display: grid; gap: var(--tt-s-4); grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }

.tt-plan {
  display: flex; flex-direction: column; gap: var(--tt-s-3);
  background: var(--tt-surface);
  border: 1.5px solid var(--tt-line);
  border-radius: var(--tt-r-lg);
  padding: var(--tt-s-5);
}
.tt-plan--featured { border-color: var(--tt-orange); box-shadow: var(--tt-shadow-md); position: relative; }
.tt-plan__name  { font-size: var(--tt-fs-small); font-weight: var(--tt-w-bold); color: var(--tt-orange-ink); letter-spacing: 0.06em; }
.tt-plan__price { font-size: 28px; font-weight: var(--tt-w-bold); color: var(--tt-navy); line-height: 1.3; }
.tt-plan__price small { font-size: 13px; font-weight: var(--tt-w-reg); color: var(--tt-ink-3); }
.tt-plan__list  { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.tt-plan__list li {
  display: flex; gap: 8px;
  font-size: var(--tt-fs-small); line-height: 1.75; color: var(--tt-ink-2);
}
.tt-plan__list li::before { content: "✓"; color: var(--tt-orange-ink); font-weight: var(--tt-w-bold); flex: 0 0 auto; }

/* ============================================================
   Timeline — 実績・沿革
   ============================================================ */
.tt-timeline { margin: 0; padding: 0 0 0 var(--tt-s-5); list-style: none; border-left: 2px solid var(--tt-line-strong); }
.tt-timeline__item { position: relative; padding-bottom: var(--tt-s-5); }
.tt-timeline__item:last-child { padding-bottom: 0; }
.tt-timeline__item::before {
  content: "";
  position: absolute; left: calc(-1 * var(--tt-s-5) - 7px); top: 6px;
  width: 12px; height: 12px; border-radius: var(--tt-r-pill);
  background: var(--tt-orange); box-shadow: 0 0 0 3px var(--tt-page);
}
.tt-timeline__date { font-size: var(--tt-fs-meta); font-weight: var(--tt-w-bold); color: var(--tt-orange-ink); letter-spacing: 0.04em; }
.tt-timeline__body { font-size: var(--tt-fs-small); line-height: 1.85; color: var(--tt-ink); margin-top: 2px; }

/* ============================================================
   Article body — コラム記事の本文
   Wrap generated column HTML in <div class="tt-article"> and
   every tag below is styled without extra classes.
   ============================================================ */
.tt-article {
  max-width: var(--tt-prose);
  font-size: var(--tt-fs-body);
  line-height: var(--tt-lh-prose);
  color: var(--tt-ink);
}
.tt-article > * + * { margin-top: 1.4em; }

.tt-article h1 {
  font-size: var(--tt-fs-h1); font-weight: var(--tt-w-bold);
  line-height: 1.45; color: var(--tt-navy); margin: 0;
}
.tt-article h2 {
  font-size: var(--tt-fs-h2); font-weight: var(--tt-w-bold);
  line-height: 1.5; color: var(--tt-navy);
  margin-top: 2.2em; padding-left: 14px;
  border-left: 5px solid var(--tt-orange);
}
.tt-article h3 {
  font-size: var(--tt-fs-h3); font-weight: var(--tt-w-bold);
  line-height: 1.6; color: var(--tt-navy); margin-top: 1.9em;
}
.tt-article p { margin-block: 0; }
.tt-article strong { font-weight: var(--tt-w-bold); color: var(--tt-navy); }
.tt-article a { color: var(--tt-orange-ink); text-decoration: underline; text-underline-offset: 0.28em; }
.tt-article a:hover { color: var(--tt-orange-ink-600); }

.tt-article ul, .tt-article ol { padding-left: 1.4em; margin-block: 0; }
.tt-article li + li { margin-top: 0.6em; }
.tt-article ul { list-style: none; padding-left: 0; }
.tt-article ul > li { display: flex; gap: 10px; }
.tt-article ul > li::before { content: "●"; font-size: 0.7em; line-height: 2.4; color: var(--tt-orange); flex: 0 0 auto; }

.tt-article blockquote {
  margin: 0; padding: var(--tt-s-4) var(--tt-s-5);
  background: var(--tt-orange-50);
  border-left: 4px solid var(--tt-orange);
  border-radius: 0 var(--tt-r-md) var(--tt-r-md) 0;
  font-size: var(--tt-fs-small); line-height: 1.9; color: var(--tt-ink-2);
}

/* 「ここがポイント」callout inside an article */
.tt-article .tt-point {
  background: var(--tt-orange-100);
  border-radius: var(--tt-r-md);
  padding: var(--tt-s-5);
  font-size: var(--tt-fs-small);
  line-height: 1.9;
}
.tt-article .tt-point > b {
  display: block; margin-bottom: 6px;
  color: var(--tt-orange-ink); font-size: var(--tt-fs-meta); letter-spacing: 0.08em;
}

.tt-article table { width: 100%; border-collapse: collapse; font-size: var(--tt-fs-small); }
.tt-article th, .tt-article td { padding: 12px 14px; border-bottom: 1px solid var(--tt-line); text-align: left; line-height: 1.7; }
.tt-article th { background: var(--tt-page); color: var(--tt-navy); font-weight: var(--tt-w-bold); }

.tt-article img { max-width: 100%; height: auto; border-radius: var(--tt-r-md); }
.tt-article hr { border: 0; border-top: 1px solid var(--tt-line); margin-block: var(--tt-s-7); }

/* Wide content must scroll inside itself, never the page */
.tt-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }