/* =========================
   Top page base
   ========================= */

/* 見出し（元のまま） */
.content-header {
  border-top: 1px solid #aaa;
  border-bottom: 1px solid #aaa;
  font-weight: normal;
  margin: 2.8em auto 24px;
  padding: 8px 0;
  text-align: center;
  width: 70%;
  max-width: 720px;
  min-width: 320px;
}

/* ヒーロー（必要なら使用） */
.eyecatch { padding: 92px 2%; }
.eyecatch-wrapper,
.top-config-wrapper {
  margin: 0 auto;
  width: 70%;
  max-width: 720px;
  min-width: 280px;
}
.eyecatch .content-header {
  line-height: 1.8;
  margin: 0 auto 40px;
}

/* トップコンテナ */
.top-index {
  margin: 100px auto 40px;
  max-width: 1100px;
  padding: 0 2%;
}

/* セクション */
.tc-section { text-align: center; }
.tc-ul { margin: 12px auto 40px; }
.tc-ul li { margin: 4px auto; }

/* =========================
   Product cards
   ========================= */

.product-list {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 24px 1%; /* 追加：行・列の間隔を素直に */
}

/* 1枚のカード枠（比率は元のまま） */
.pl-item {
  flex-basis: 32.33%;
  margin: 16px .5%;    /* 元: 40px → gapへ寄せるため少し縮小 */
  padding: 0;          /* 内側はカード本体へ */
}

/* a全体をクリック領域に（カード化） */
.pl-item > a {
  display: block;
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 4px;
  color: inherit;
  text-decoration: none;
  overflow: hidden;       /* 角丸を画像にも適用 */
  cursor: pointer;        /* ← ホバーはポインターのみ */
  transition: none;       /* ← 見た目の変化は無効化 */
}

/* 既存にtransform/shadowの指定があっても無効化 */
.pl-item > a:hover {
  transform: none !important;
  box-shadow: none !important;
  border-color: inherit !important;
}

/* キーボード操作時の可視アウトライン（最小） */
.pl-item > a:focus-visible {
  outline: 2px solid rgba(0,0,0,.25);
  outline-offset: 2px;
}

/* 画像：16:9（元のpadding-bottom式を維持） */
.pl-item-img {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
  overflow: hidden;
  margin-bottom: 16px;
  background: #f2f2f2;
}
.pl-item-img img {
  display: block;
  margin: 0 auto;
  object-fit: cover;
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
}

/* 下部にボタン帯を使う場合（元のまま） */
.pl-item-btn {
  background: #000;
  color: #fff;
  margin: 0 0 0 -44px;
  padding: 4px 16px;
  position: absolute;
  bottom: -16px;
  left: 50%;
  text-align: center;
}

/* タイトル／本文（元のトーンを維持しつつ微調整） */
.pl-item-title {
  line-height: 1.4;
  margin: 0 12px 8px;
  font-weight: 700;
  color: #111;
}
.pl-item .content-text {
  color: #777;
  font-size: .95em; /* 元: .9em → わずかに読みやすく */
  margin: 0 12px 16px;
}

/* =========================
   その他（元のまま保持）
   ========================= */

.top-sendmail {
  background: #fff;
  margin: 40px auto;
  padding: 80px 4% 120px;
  text-align: center;
}
.top-sendmail .content-header { margin: 0 auto 40px; }

.content-text { margin: .4em auto; }

.privacy {}
.privacy-wrapper {
  background: #fff;
  margin: 0 auto;
  padding: 40px 2%;
  max-width: 1100px;
}
.privacy-section { margin: 40px auto; }

.terms {}
.terms-wrapper {
  background: #fff;
  margin: 0 auto;
  padding: 40px 2%;
  max-width: 1100px;
}
.terms-section { margin: 40px auto; }

.contact {}
.contact-wrapper {
  background: #fff;
  margin: 0 auto;
  padding: 40px 2%;
  max-width: 1100px;
}
.contact-section { margin: 40px auto; }

/* =========================
   Responsive
   ========================= */

@media screen and (max-width: 900px) {
  .pl-item { flex-basis: 48.5%; } /* 2列 */
}

@media screen and (max-width: 550px) {
  .top-index { margin: 20px auto; }

  .content-header { margin: 40px auto 12px; }

  .product-list { gap: 16px 0; }
  .pl-item {
    flex-basis: 99%;
    margin: 0; /* 行間はgapに任せる */
  }
  .pl-item .content-header {
    font-size: 1em;
    margin: 0 auto 4px;
  }
}

/* =========================
   Dark mode（最小限）
   ========================= */
@media (prefers-color-scheme: dark) {
  /* カードの文字色と枠だけ整える。背景暗転はapplication.cssのbodyで制御 */
  .pl-item > a {
    background: #1a1a1a;
    border-color: #333;
  }
  .pl-item-title { color: #eee; }
  .pl-item .content-text { color: #aaa; }

  .top-index .content-header {
    border-top-color: #555;
    border-bottom-color: #555;
    color: #eee;
  }

  /* フォーカスの可視性（暗背景向け） */
  .pl-item > a:focus-visible {
    outline: 2px solid rgba(255,255,255,.45);
    outline-offset: 2px;
  }
}