@charset "UTF-8";

/* 資料・ガイド一覧のカード内ボタン。
   既定の .c-btn（背景 #29baa2 / 白文字 14px）は白文字とのコントラストが 2.43:1 しかなく、
   SPで読みづらい。同じ色相のまま少し暗くし、SPの文字をPCと同じ 16px に上げる。
   main.css はビルド成果物のため、このファイルで上書きしている。
   ※ 適用はこのページのカードのみ。サイト全体への展開は別途判断。 */

.p-card-download__link .c-btn.-arrow {
  background: #1f9d88;
}

@media screen and (max-width: 767px) {
  /* SPだけ 14px → 16px。PCは元から16pxなので指定しない */
  .p-card-download__link .c-btn.-arrow .c-btn__txt {
    font-size: 1.6rem;
  }
}

/* リード文。既定は body 継承の純黒(#000)で、6行の説明文としては強すぎる。
   サイトのグレー(#7c7c7c)より暗い濃いグレーにして、読みやすさを保ちつつ和らげる。 */
.p-download-lead__txt {
  color: #3c3c3c;
}

/* ==========================================================================
   資料一覧の構成変更（2026-09-11）
   下部固定バーとPCヘッダーのCTAが41ページからこの1ページに集まる構成にしたため、
   「9枚の製品名がフラットに並ぶ」状態を、目的から選べる形に組み替えた。

   1. 冒頭に「目的から選ぶ」4本（9枚を見る前に行き先を決められるように）
   2. 「詳しい資料をメールでお届け」6本 と
      「登録不要・その場で使えるツール」3本 の2ブロックに分ける
   3. ツール3本は画像なしの行型（カード1枚496pxが約100pxに）

   ブレークポイントはサイト共通の 768px に合わせている。
   ========================================================================== */

/* --- 目的から選ぶ ------------------------------------------------------- */
.l-section-downloadPurpose {
  padding: 0 20px;
}

.l-section-downloadPurpose__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 26px 0 0;
}

/* 見出し帯はベタ塗り（D案）。下の資料カードとは別種のUI＝「選ぶ場所」だと
   一目でわかるようにするため。#14705f はもともと見出しの文字色に使っていた色で、
   地と文字を入れ替えているだけなのでパレットは増えていない。
   ブランドのティール #29baa2 を地色にすると白文字が 3.4:1 で基準を下回る。 */
.p-download-purpose {
  border: 1px solid #14705f;
  border-radius: 6px;
  overflow: hidden;
}

.p-download-purpose__head {
  padding: 11px 16px;
  background: #14705f;
  font-size: 1.4rem;
  font-weight: bold;
  color: #fff;
}

.p-download-purpose__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.p-download-purpose__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 13px 16px;
  border-top: 1px solid #e3efeb;
  color: #000;
  text-decoration: none;
  transition: background-color 0.3s;
}

.p-download-purpose__link:hover,
.p-download-purpose__link:focus-visible {
  background-color: #f5fbf9;
}

/* 見出し帯（濃色）の直下は帯そのものが区切りになるため、罫線は引かない */
.p-download-purpose__item:first-child .p-download-purpose__link {
  border-top: 0;
}

.p-download-purpose__label {
  display: block;
  font-size: 1.4rem;
  font-weight: bold;
  line-height: 1.6;
}

.p-download-purpose__doc {
  display: block;
  margin: 2px 0 0;
  font-size: 1.2rem;
  line-height: 1.6;
  color: #55605c;
}

.p-download-purpose__arrow {
  flex-shrink: 0;
  line-height: 0;
}

.p-download-purpose__jump {
  margin: 14px 0 0;
}

.p-download-purpose__jump a {
  font-size: 1.4rem;
  font-weight: bold;
  color: #1f9d88;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --- ブロック見出し ----------------------------------------------------- */
.p-download-group {
  padding: 0 0 8px;
  border-bottom: 2px solid #1e1e1e;
}

.p-download-group.-tools {
  margin: 40px 0 0;
  /* ページ内リンクの着地。SPは固定ヘッダー56px + 余白14px */
  scroll-margin-top: 70px;
}

.p-download-group__title {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 1.6rem;
  font-weight: bold;
  line-height: 1.5;
}

/* 見出しのアイコン。文字はベースライン揃えのままにしたいので、
   アイコンだけ中央に合わせる */
.p-download-group__icon {
  flex-shrink: 0;
  align-self: center;
  line-height: 0;
}

.p-download-group__icon img {
  width: 18px;
  height: 18px;
}

.p-download-group__count {
  flex-shrink: 0;
  font-size: 1.15rem;
  font-weight: normal;
  color: #6b7570;
}

.p-download-group__sub {
  margin: 3px 0 0;
  font-size: 1.2rem;
  line-height: 1.6;
  color: #6b7570;
}

/* --- 登録不要ツール（行型） --------------------------------------------- */
.p-download-tools {
  margin: 0;
  padding: 0;
  list-style: none;
}

.p-toolRow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 12px 0 0;
  padding: 15px 16px;
  border-radius: 6px;
  background: #f9ffeb;
  color: #000;
  text-decoration: none;
  transition: opacity 0.3s;
}

.p-toolRow:hover,
.p-toolRow:focus-visible {
  opacity: 0.75;
}

.p-toolRow__body {
  flex: 1;
  min-width: 0;
}

/* 資料名なので、上のカード見出し（.p-card-download__title 1.8rem）と
   同じ大きさに揃える。説明文もカード本文（1.4rem）に合わせる */
.p-toolRow__title {
  display: block;
  font-size: 1.8rem;
  font-weight: bold;
  line-height: 1.55;
}

.p-toolRow__txt {
  display: block;
  margin: 4px 0 0;
  font-size: 1.4rem;
  line-height: 1.7;
  color: #4a544f;
}

.p-toolRow__arrow {
  flex-shrink: 0;
  line-height: 0;
}

/* --- PC ------------------------------------------------------------------ */
@media screen and (min-width: 768px), print {
  .l-section-downloadPurpose__inner {
    padding: 40px 0 0;
  }

  .p-download-purpose__head {
    padding: 14px 20px;
    font-size: 1.6rem;
  }

  /* 4本を横並びにして、ファーストビューで行き先を選べるようにする */
  .p-download-purpose__list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
  }

  .p-download-purpose__link {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    height: 100%;
    padding: 18px 20px;
    border-top: 0;
    border-left: 1px solid #e3efeb;
  }

  .p-download-purpose__item:first-child .p-download-purpose__link {
    border-left: 0;
  }

  .p-download-purpose__label {
    font-size: 1.5rem;
  }

  .p-download-purpose__doc {
    font-size: 1.3rem;
  }

  .p-download-purpose__arrow {
    align-self: flex-end;
    margin-top: auto;
  }

  .p-download-purpose__jump {
    margin: 20px 0 0;
  }

  .p-download-purpose__jump a {
    font-size: 1.5rem;
  }

  .p-download-group__title {
    font-size: 2.2rem;
  }

  .p-download-group__icon img {
    width: 24px;
    height: 24px;
  }

  .p-download-group__count,
  .p-download-group__sub {
    font-size: 1.4rem;
  }

  .p-download-group.-tools {
    margin: 64px 0 0;
    scroll-margin-top: 24px;
  }

  .p-toolRow {
    gap: 16px;
    margin: 16px 0 0;
    padding: 20px 24px;
  }

  .p-toolRow__title {
    font-size: 2rem;
  }

  .p-toolRow__txt {
    font-size: 1.6rem;
  }
}