/* ===== レイアウト ===== */
.option2{
  display:grid;
  grid-template-columns: 1fr 420px;
  align-items:stretch;
}

@media (max-width: 768px){
  .option2{
    grid-template-columns:1fr;
  }
}

/* ===== 左：Swiper ===== */
.option2-swiper{
  overflow:hidden;
  width:100%;
}

.option2-swiper img{
  display:block;
  max-width:100%;
  height:auto;
  width:auto;              /* ← width:100% は使わない */
}

/* ===== 右：ボタンタイル ===== */
.option2-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(4, 1fr);
  position:relative;
  z-index:10;
}

.option2-card{
  appearance:none;
  -webkit-appearance:none;
  border:none;
  margin:0;
  padding:22px 16px;

  width:100%;
  height:100%;

  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;

  cursor:pointer;
  user-select:none;
  pointer-events:auto;

  color:#fff;
  font-weight:700;

  transition:
    transform .15s ease,
    filter .15s ease,
    box-shadow .15s ease;
}

/* テキスト */
.option2-card .t{
  font-size:20px;
  margin-bottom:10px;
}
.option2-card .d{
  font-size:14px;
  opacity:.95;
}

/* 選択中 */
.option2-card.is-active{
  filter:brightness(1.15);
  transform:scale(1.03);
  box-shadow:0 10px 30px rgba(0,0,0,.25);
  outline:3px solid rgba(255,255,255,.8);
  outline-offset:-3px;
}

/* hover固定対策（スマホ） */
@media (hover:none){
  .option2-card:hover{
    filter:none;
  }
}
.option2-card:focus{
  outline:none;
}

/* ===== 色（添付デザイン） ===== */
#option2Grid .option2-card:nth-child(1){ background:#00BFC6; }
#option2Grid .option2-card:nth-child(2){ background:#FF6F8D; }
#option2Grid .option2-card:nth-child(3){ background:#8E46FF; }
#option2Grid .option2-card:nth-child(4){ background:#FFA43A; }
#option2Grid .option2-card:nth-child(5){ background:#4F1CC8; }
#option2Grid .option2-card:nth-child(6){
  background-color:#FFD233 !important;
  color:#fff !important;
}
#option2Grid .option2-card:nth-child(6) .t,
#option2Grid .option2-card:nth-child(6) .d{
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
}
#option2Grid .option2-card:nth-child(7){ background:#7E8CFF; }
#option2Grid .option2-card:nth-child(8){ background:#FF7F8B; }

/* スライド内で画像を中央寄せ */
#option2Swiper .swiper-slide{
  display:flex;
  justify-content:center;  /* 横中央 */
  align-items:center;      /* 縦中央（不要なら消してOK） */
}

#option2Swiper img{
  max-width:100%;
  height:auto;
}