@charset "UTF-8";
/* ============================================================
  index.css
  ============================================================ */

/* ===== Visual（ヒーロー） ===== */
.visual .container {
  position: relative;
  display: grid; /* 中央寄せの土台 */
  place-items: center; /* 上下左右中央 */
  width: 100%;
  height: 66vw; /* SP基準の高さ */
  min-height: 320px;
  background-image: url(/assets/img/index/hero.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  z-index: 1;
}

/* ヒーロー内の検索バー：common.css の見た目を打ち消し調整 */
.visual .stock_search {
  width: 100%;
  padding: 0 12px;
  background: transparent; /* ← 白帯を消す */
  border-bottom: 0; /* ← 下線を消す */
}

/* フォーム本体（カード風） */
.visual .stock_search_form {
  position: relative;
  margin: 0 auto;
  padding: 15px;
  width: min(1100px, 100%);
}

/* PCの高さ調整 */
@media (min-width: 992px) {
  .visual .container {
    height: 50vh;
    min-height: 420px;
  }
}

/* =========================================
   Keyword Cards (asset_tag 用)
   ========================================= */

.keyword-cards {
  margin-top: 2rem;
  margin-bottom:2rem;
}
.keyword-cards .section_title{
  font-size: var(--size-lg);
  text-align:center;
  margin-bottom: 4rem;
}

.keyword-cards__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

/* 1枚のカード */
.keyword-cards__item {
  margin: 0;
  padding: 0;
}

.keyword-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--color-bg, #ffffff);
  text-decoration: none;
}

/* サムネイルエリア */
.keyword-card__thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #f3f4f6;
}

.keyword-card__img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.keyword-card__ph {
  display: block;
  width: 100%;
  height: 100%;
  background: #e5e7eb;
}

/* テキストエリア */
.keyword-card__body {
  padding: 0.6rem 0.8rem 0.8rem;
}

.keyword-card__name {
  display: inline-flex;
  align-items: center;
  min-height: 1.4em;
  font-size: var(--size-sm);
  font-weight: 600;
  color: var(--color-text, #222222);
}

/* =========================================
   Breakpoints (min-width)
   ========================================= */

@media (min-width: 768px) {
  .keyword-cards__list {
    gap: 16px;
  }
}

@media (min-width: 1024px) {
  .keyword-cards__list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}