@charset "utf-8";

:root{
  --max: 1100px;
  --pad: 24px;

  --tab-gap: clamp(10px, 1.4vw, 18px);
  --tab-radius: 14px;

  --panel-radius: 18px;
  --panel-bg: #fff;
  --panel-border: rgba(0,0,0,.08);
  --panel-shadow: 0 12px 40px rgba(0,0,0,.08);

  --title: clamp(22px, 2.2vw, 34px);
  --text: clamp(14px, 1.05vw, 16px);
}

/* 全体の幅を安定させる */
.feature-tabs{
  width: min(var(--max), 100%);
  margin: 0 auto;
  padding: 32px var(--pad);
}

/* タブ6個 */
.feature-tabs__tablist{
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--tab-gap);
}

/* 画像ボタン */
.feature-tabs__tab{
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  border-radius: var(--tab-radius);
  overflow: hidden;
  transform: translateZ(0);
}

/* 押されてる感じ（画像に任せる＋微妙に動かすならここ） */
.feature-tabs__tab.is-active{
  /* 画像が「押下状態」想定なので、必要なら少しだけ補助 */
  filter: drop-shadow(0 6px 12px rgba(0,0,0,.12));
}

.feature-tabs__tab img{
  width: 100%;
  height: auto;
  display: block;
}

/* パネル */
.feature-tabs__panels{
  margin-top: clamp(14px, 3vw, 35px);
}

.feature-tabs__panel{
  border-radius: var(--panel-radius);
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  box-shadow: var(--panel-shadow);
  padding: clamp(18px, 2vw, 28px);
}

/* 中身：左テキスト＋右画像 */
.feature-panel{
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(14px, 2vw, 26px);
  align-items: center;
}

.feature-panel__text h3{
  margin: 0 0 10px;
  font-size: clamp(6px, 2vw, 32px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 1px;
  color: #4ace87;
}
.feature-panel__text p{
  margin: 0 0 12px;
  font-size: clamp(6px, 1.2vw, 16px);
  font-weight: 500;
  line-height: 1.7;
  color: #393939;
}

img.connect {
  width: 10%;
  margin: 1vw auto;
}

.feature-panel__cta{
  width: 100%;
  display: inline-block;
  padding: 12px 16px;
  border-radius: 10px;
  background: #eef2ff;
  color: #2b46ff;
  text-decoration: none;
  text-align: center;
  font-weight: 700;
  font-size: clamp(6px, 1.2vw, 18px);
}

.feature-panel__media img{
  width: 100%;
  height: auto;
  display: block;
}


@media (max-width: 500px){
  .feature-tabs__tablist{
    grid-template-columns: repeat(3, 1fr);
  }
  .feature-panel{
    grid-template-columns: 1fr;
  }

  .feature-tabs__panel{
  padding: 10vw  4vw;
}

  
.feature-panel__text h3{
  font-size: 5.2vw;
  text-align: center;
  margin-bottom: 3vw;
}

.feature-panel__text p{
  margin: 3vw auto;
  font-size: 3.6vw;
}

img.connect {
  width: 15%;
  margin: 6vw auto;
}

.feature-panel__cta{
  font-size: 3.6vw;
}
}