/* ==========================================================
   tools.css — 無料ツール一覧（Tools）ページ専用スタイル
   tools/index.html で使用する
   トークン・リセットは common.css を参照

   works.css とは役割が異なる（works＝実績を見せる場／tools＝実際に使う場）ため、
   見た目の系統は揃えつつ、クラスは分けている
========================================================== */

/* ===== ヒーロー ===== */
#tools-hero {
  padding-top: calc(var(--nav-h) + var(--space-xl));
  padding-bottom: var(--space-lg);
}

.tools-label {
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 300;
  letter-spacing: 0.2em;
  color: var(--color-text-light);
  margin-bottom: var(--space-xs);
}

.tools-hero-headline {
  font-family: var(--font-serif);
  font-size: clamp(1.6rem, 3.5vw, 2.2rem);
  font-weight: 300;
  line-height: 1.7;
  letter-spacing: 0.06em;
  color: var(--color-text);
  margin-bottom: var(--space-sm);
}

.tools-hero-sub {
  font-size: 0.94rem;
  color: var(--color-text-sub);
  line-height: 1.9;
  max-width: 620px;
}

/* ===== ツールカード ===== */
#tools-list {
  padding-bottom: var(--space-xl);
}

.tool-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 0;
  padding: var(--space-md) 28px;
  box-shadow: none;
}

.tool-card + .tool-card {
  margin-top: var(--space-md);
}

.tool-card-title {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  font-weight: 300;
  letter-spacing: 0.04em;
  color: var(--color-text);
  margin-bottom: var(--space-xs);
}

.tool-card-desc {
  font-size: 0.9rem;
  color: var(--color-text-sub);
  line-height: 1.9;
  margin-bottom: var(--space-md);
}

/* 「使ってみる」が主、「できるまで」が従。塗りボタンは並べない */
.tool-card-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md);
}

/* ===== Studio Totonoe について ===== */
#tools-about {
  background-color: var(--color-bg-sub);
  padding-top: var(--space-xl);
  padding-bottom: var(--space-xl);
}

.tools-about-text {
  font-size: 0.94rem;
  color: var(--color-text);
  line-height: 1.9;
  max-width: 620px;
  margin-top: var(--space-sm);
  margin-bottom: var(--space-md);
}

/* 段落が続くときは、上下のマージンが重なって離れすぎるので詰める */
.tools-about-text + .tools-about-text {
  margin-top: 0;
  margin-bottom: var(--space-md);
}

/* ===== スマートフォン ===== */
@media (max-width: 600px) {
  .tool-card {
    padding: var(--space-md) var(--space-sm);
  }

  .tool-card-links {
    gap: var(--space-sm);
  }

  /* 幅の狭い画面では主導線を1行使って押しやすくする */
  .tool-card-links .btn-outline {
    width: 100%;
    text-align: center;
  }
}