/* ================================
   Top Selector Component
================================ */

/* リスト（グリッド） */
.topSelector__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--XS);
  align-items: stretch;
}

/* SPは1カラム */
@media screen and (max-width: 767px) {
  .topSelector__list {
    grid-template-columns: 1fr;
  }
}

/* 各アイテム */
.topSelector__item {
  list-style: none;
  height: 100%;
}

/* ボタン本体 */
.topSelector__link {
  display: flex;
  height: 100%;
  align-items: center;
  padding: var(--XS);
  background: #fff;
  border: 1px solid var(--color-separate-primary);
  border-radius: var(--radius-l);
  text-decoration: none;
  color: var(--color-text-primary);
  transition: background-color 0.2s ease;
}

.topSelector__link:hover {
  background: var(--color-bg-secondary);
}

/* 画像 */
.topSelector__img {
  flex-shrink: 0;
  width: 124px;
  height: auto;
  margin-right: var(--XS);
  display: flex;
  align-items: center;
}

.topSelector__img img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-m);
}

/* タイトル */
.topSelector__title {
  flex: 1;
  font-size: var(--font-m);
  font-weight: 700;
}

/* 矢印 */
.topSelector__arrow {
  flex-shrink: 0;
  margin-left: var(--XS);
  padding-left: var(--XS);
  display: flex;
  align-items: center;
  align-self: stretch;
  justify-content: center;
  border-left: 1px solid var(--color-separate-primary);
}

.topSelector__arrow img {
  width: 100%;
  height: auto;
  display: block;
}

/* ================================
   SP調整
================================ */
@media screen and (max-width: 767px) {

  .topSelector__list {
    gap: var(--X3S);
  }

  /* ボタン全体 */
  .topSelector__link {
    padding: var(--X2S);
  }

  /* アイコン */
  .topSelector__img {
    margin-right: var(--X2S);
  }

  .topSelector__img {
    width: 74px;
  }

  /* タイトル */
  .topSelector__title {
    font-size: var(--font-s); 
    line-height: 1.4;
  }

  /* 矢印 */
  .topSelector__arrow {
    margin-left: var(--X2S);
    padding-left: var(--X2S);
  }

  .topSelector__arrow img {
    width: 16px; /* 仮：24px → 16px */
  }
}