@charset "utf-8";
/* ==========================================================================
   Component — 2ページ以上で使い回すもの。
   ⛔ ここに hex や生の px を書かない。値は必ず foundation のトークンから取る。
   ========================================================================== */
@layer component {

  /* ---- ボタン ---------------------------------------------------------- */
  .c-btn {
    display: inline-flex; align-items: center; gap: var(--space-2);
    padding: var(--space-3) var(--space-6);
    border: 1px solid var(--color-accent);
    border-radius: var(--radius-full);
    background: var(--color-accent);
    color: var(--color-text-on-accent);
    font-size: var(--fs-sm); font-weight: 700;
    line-height: 1.4; text-decoration: none;
    transition: background-color .15s ease, border-color .15s ease;
  }
  .c-btn:hover { background: var(--color-accent-hover); border-color: var(--color-accent-hover); color: var(--color-text-on-accent); }
  .c-btn--ghost { background: transparent; color: var(--color-accent); }
  .c-btn--ghost:hover { background: var(--color-accent-surface); color: var(--color-accent-hover); }
  .c-btn--small { padding: var(--space-2) var(--space-4); font-size: var(--fs-xs); }

  /* ---- セクション見出し ------------------------------------------------ */
  .c-section-header { margin-bottom: var(--space-8); }
  /* ⛔ 2カラム（l-split）では見出しが別の列に入るので、下の余白は不要。
     残すと右の本文だけが下がって、左右の頭がそろわない。 */
  .l-split > .c-section-header { margin-bottom: 0; }
  .c-section-header__kicker {
    display: block; margin-bottom: var(--space-2);
    color: var(--color-accent);
    font-size: var(--fs-xs); font-weight: 700; letter-spacing: .08em;
  }
  .c-section-header__title { margin-bottom: var(--space-3); }
  .c-section-header__desc {
    max-width: var(--width-prose);
    color: var(--color-text-secondary);
  }

  /* ---- カード ---------------------------------------------------------- */
  .c-card {
    display: flex; flex-direction: column;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-bg-surface);
    text-decoration: none; color: inherit;
    overflow: hidden;
    transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
  }
  .c-card:hover { border-color: var(--color-border-strong); transform: translateY(-2px); box-shadow: var(--shadow-card); }
  /* 実際のデモページを撮った画像。空のプレースホルダは置かない
     （何が出てくるか先に見せる、というこのサイトの主張と矛盾するため） */
  .c-card__thumb {
    display: block; width: 100%; height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover; object-position: top center;
    background: var(--color-bg-surface-alt);
    border-bottom: 1px solid var(--color-border);
    transition: scale .3s ease;
  }
  .c-card:hover .c-card__thumb { scale: 1.02; }
  .c-card { isolation: isolate; }
  .c-card__body { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-6); flex: 1; }
  .c-card__title { font-size: var(--fs-lg); }
  .c-card__desc { font-size: var(--fs-sm); color: var(--color-text-secondary); line-height: var(--lh-compact); }
  /* margin-top:auto は「余りを全部上に寄せる」指定で、カードの高さが違っても
     タグ列を下端で揃えるためのもの。計算結果は端数pxになるが、
     これはスケール外の直値ではなくレイアウトの結果値。 */
  .c-card__tags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: auto; }
  .c-card__more { font-size: var(--fs-sm); font-weight: 700; color: var(--color-accent); }
  .c-card:hover .c-card__more { color: var(--color-accent-hover); }

  /* ---- タグ ------------------------------------------------------------ */
  .c-tag {
    display: inline-block;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    background: var(--color-bg-surface-alt);
    color: var(--color-text-muted);
    font-size: var(--fs-xs); line-height: 1.5;
  }
  .c-tag--accent { background: var(--color-accent-surface); color: var(--color-accent); font-weight: 700; }

  /* ---- 注意書き（従来の notice / box / callout をここに統合） ---------- */
  .c-callout {
    padding: var(--space-6);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-surface);
    font-size: var(--fs-sm);
    line-height: var(--lh-compact);
  }
  .c-callout--warn {
    border-color: var(--color-warn-border);
    background: var(--color-warn-surface);
    color: var(--color-warn-text);
  }
  .c-callout__title { margin-bottom: var(--space-2); font-size: var(--fs-sm); font-weight: 700; }
  .c-callout__body > * + * { margin-top: var(--space-2); }

  /* ---- 手順・進め方 ---------------------------------------------------- */
  .c-steps { display: grid; gap: var(--space-6); list-style: none; padding: 0; counter-reset: step; }
  .c-steps__item {
    display: grid; grid-template-columns: auto 1fr; gap: var(--space-4);
    padding-bottom: var(--space-6);
    border-bottom: 1px solid var(--color-border);
  }
  .c-steps__item:last-child { padding-bottom: 0; border-bottom: 0; }
  .c-steps__item + .c-steps__item { margin-top: 0; }
  .c-steps__num {
    counter-increment: step;
    display: grid; place-items: center;
    width: 32px; height: 32px;
    border-radius: var(--radius-full);
    background: var(--color-accent-surface);
    color: var(--color-accent);
    font-size: var(--fs-sm); font-weight: 700;
  }
  .c-steps__num::before { content: counter(step); }
  .c-steps__title { margin-bottom: var(--space-2); font-size: var(--fs-lg); }
  .c-steps__desc { font-size: var(--fs-sm); color: var(--color-text-secondary); line-height: var(--lh-compact); }

  /* ---- よくある質問 ---------------------------------------------------- */
  .c-faq { display: grid; gap: var(--space-3); }
  .c-faq__item {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-surface);
  }
  .c-faq__q {
    padding: var(--space-4) var(--space-6);
    font-size: var(--fs-md); font-weight: 700;
    cursor: pointer; list-style: none;
    display: flex; gap: var(--space-3); align-items: flex-start;
  }
  .c-faq__q::-webkit-details-marker { display: none; }
  .c-faq__q::before { content: "Q"; color: var(--color-accent); flex: none; }
  .c-faq__q::after {
    content: ""; flex: none; margin-left: auto; align-self: center;
    width: 8px; height: 8px;
    border-right: 2px solid var(--color-text-muted);
    border-bottom: 2px solid var(--color-text-muted);
    transform: rotate(45deg);
    transition: transform .15s ease;
  }
  .c-faq__item[open] .c-faq__q::after { transform: rotate(-135deg); }
  .c-faq__a {
    padding: 0 var(--space-6) var(--space-6);
    font-size: var(--fs-sm);
    color: var(--color-text-secondary);
    line-height: var(--lh-compact);
  }

  /* ---- フォーム -------------------------------------------------------- */
  .c-form { display: grid; gap: var(--space-6); }
  .c-form__row { display: grid; gap: var(--space-2); }
  .c-form__label { font-size: var(--fs-sm); font-weight: 700; }
  .c-form__req {
    margin-left: var(--space-2); padding: 0 var(--space-2);
    border-radius: var(--radius-sm);
    background: var(--color-accent-surface); color: var(--color-accent);
    font-size: var(--fs-xs); font-weight: 700;
  }
  .c-form__hint { font-size: var(--fs-xs); color: var(--color-text-muted); }
  .c-form__input,
  .c-form__textarea,
  .c-form__select {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    background: var(--color-bg-surface);
    color: var(--color-text-primary);
    font: inherit;
    font-size: var(--fs-md);
  }
  .c-form__textarea { min-height: 10em; resize: vertical; line-height: var(--lh-compact); }
  .c-form__input:focus-visible,
  .c-form__textarea:focus-visible,
  .c-form__select:focus-visible { border-color: var(--color-accent); }
  .c-form__error { font-size: var(--fs-sm); color: var(--color-warn-text); }
  .c-form__actions { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; }
  /* 送信ボタンは c-btn を使う。ここでは form 内の状態だけ持つ */
  .c-form button[disabled] { opacity: .55; cursor: progress; }

  /* ---- 表の横スクロール ------------------------------------------------ */
  .c-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}