/* 画像プレビューの見た目（必要に応じて調整） */
.smf-preview-list{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(120px,1fr));
  gap:.75rem;
  margin-top:.5rem;
}
.smf-preview{margin:0;text-align:center}
.smf-preview img{
  max-width:100%;
  height:auto;
  display:block;
  border-radius:.5rem;
}
.smf-preview figcaption{
  font-size:.8rem;
  margin-top:.25rem;
  word-break:break-all;
  opacity:.8;
}

/* 見切れ防止（親が overflow:hidden の場合に備えて） */
.smf-item__controls,
.smf-placeholder{ overflow:visible !important; }

/* 見積・お問い合わせフォームのカスタムタブ表示 */
.custom-tabs {
  display: flex;
  border-bottom: 2px solid #ddd;
  margin-bottom: 2em;
}

.tab-link {
  flex: 1;
  text-align: center;
  padding: 12px 20px;
  text-decoration: none;
  color: #333;
  background: #f5f5f5;
  border: 1px solid #ddd;
  border-bottom: none;
  transition: background 0.3s, color 0.3s;
}

.tab-link:not(:last-child) {
  border-right: none;
}

.tab-link:hover {
  background: #eaeaea;
}

.tab-link.active {
  background: #fff;
  color: #000;
  font-weight: bold;
  border-bottom: 2px solid #fff;
}

/* === タブ全体（下のブルーのベースライン） === */
.form-tabs{
  display:flex;
  gap:24px;                /* タブの間隔 */
  align-items:flex-end;
  border-bottom:4px solid #0a6fb8; /* 画像のような青いライン */
  padding:0 0 0; 
  margin:0 0 24px;
  justify-content: center;
  width: 100%;
  z-index: 10;
}

/* === 個々のタブ（リンク） === */
.form-tab{
  position:relative;
  display:inline-block;
  padding:10px 20px;
  border-radius:12px 12px 0 0;     /* 角丸上側だけ */
  background:#f6f7f8;              /* 非アクティブの薄グレー */
  color:#b4bcc5;                   /* 文字は薄いグレー */
  text-decoration:none;
  font-weight:700;
  font-size: clamp(0.875rem, 0.6323rem + 1.0356vw, 1.875rem);
  line-height:1;
  border:1px solid transparent;    /* 枠線はアクティブのみ見せる */
  border-bottom:none;              /* 下はベースラインに重ねる */
  transition:background .2s, color .2s, box-shadow .2s, border-color .2s;
}

.form-tab:hover{ color:#8d97a1; background:#eeeeef; }

/* === アクティブタブ（青地・白文字・黒の細枠） === */
.form-tab.is-active{
  background:#0a6fb8;             /* 青 */
  color:#fff;                      /* 白文字 */
  border-color:#111;               /* 黒っぽい細枠 */
  box-shadow:0 1px 0 rgba(0,0,0,.05); /* ほんの僅かな縁取り（任意） */
  z-index: 10;
}

/* キーボード操作のアクセシビリティ */
.form-tab:focus-visible{
  outline:2px solid #0a6fb8;
  outline-offset:2px;
}

/* タブのスタイル（共通） */
nav.form-tabs {
	gap: clamp(0.5rem, 0.2573rem + 1.0356vw, 1.5rem) !important;
	a.form-tab {
		border: none !important;
		box-shadow: none !important;
		width: clamp(11.25rem, 6.2743rem + 21.2298vw, 31.75rem) !important;
		text-align: center;
		padding: 10px 0px !important;
	}
}