:root {
  --base-width-sp: 375;
  --base-width-pc: 1440;
}

.select-parts-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0;
  gap: calc(25 / var(--base-width-sp) * 100vw);
  background-color: #f5f5f5;
  padding-top: calc(50 / var(--base-width-sp) * 100vw);;
}

.select-parts-inner {
  width: calc(325 / var(--base-width-sp) * 100vw);
  /*height: calc(300 / var(--base-width-sp) * 100vw);*/
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  gap:calc(40 / var(--base-width-sp) * 100vw);
}

.select-divider {
  width: calc(55 / var(--base-width-sp) * 100vw);
  height: calc(13.59 / var(--base-width-sp) * 100vw);
  background: #231815;
  clip-path: polygon(50% 100%, 0 0, 100% 0);
}

:root {
  --base-width-sp: 375;
}

/* セレクトボタン全体の配置（2列 × 2行） */
.select-buttons {
  display: grid;
  grid-template-columns: repeat(2, calc(158 / var(--base-width-sp) * 100vw));
  grid-template-rows: repeat(2, calc(100 / var(--base-width-sp) * 100vw));
  gap: calc(10 / var(--base-width-sp) * 100vw); /* ボタン間隔 */
  justify-content: center;
}

/* 各ボタンのデザイン */
.select-button {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #fee600;
  border: calc(2 / var(--base-width-sp) * 100vw) solid #231815;
  width: 100%;
  height: 100%;
  font-family: 'Noto Sans JP', sans-serif;
  color: #231815;
  text-align: center;
  gap: calc(8 / var(--base-width-sp) * 100vw);
  padding: 0;
  box-sizing: border-box;
}
.select-button:hover {
  filter: brightness(110%);
}

/* ラベルのフォントサイズ */
.select-label {
  font-size: calc(16 / var(--base-width-sp) * 100vw);
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1.5;
}

/* アイコンサイズ */
.select-icon {
  font-size: calc(20 / var(--base-width-sp) * 100vw); /* 絵文字サイズ調整 */
}

.select-icon i {
  font-size: 1.2em;
  vertical-align: middle;
  line-height: 1;
  margin-right: 4px;
  width: 1.2em;
  text-align: center;
}

.select-button {
  transition: background-color 0.2s ease;
}

.select-button.active {
  background-color: #ffffff;
  color: #231815;
}


@media (min-aspect-ratio: 1/1) {

  .select-parts-section {
    gap: calc(50 / var(--base-width-pc) * 100vw);
    padding-top: calc(50 / var(--base-width-pc) * 100vw);;
  }

  .select-parts-inner {
    width: calc(1010 / var(--base-width-pc) * 100vw);
    height: auto;
    flex-direction: column;
    flex-wrap: wrap;
    gap: calc(50 / var(--base-width-pc) * 100vw);
    justify-content: center;
  }

  .select-buttons {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: calc(1010 / var(--base-width-pc) * 100vw); /* 中央配置のため固定幅に */
    margin: 0 auto;
    gap: 0; /* 両端揃えなので gap は使わない */
  }

  .select-button {
    width: calc(243 / var(--base-width-pc) * 100vw);
    height: calc(100 / var(--base-width-pc) * 100vw);
    border: calc(2 / var(--base-width-pc) * 100vw) solid #231815;
    gap: calc(8 / var(--base-width-pc) * 100vw);
  }

  .select-icon {
    font-size: calc(24 / var(--base-width-pc) * 100vw);
  }

  .select-label {
    font-size: calc(16 / var(--base-width-pc) * 100vw);
    letter-spacing: 0.05em;
  }

  .select-divider {
    width: calc(55 / var(--base-width-pc) * 100vw);
    height: calc(13.59 / var(--base-width-pc) * 100vw);
  }
}