@charset "utf-8";

/* ===== Body ===== */
.sl-contact-body{
  padding: 34px 0 70px;
}
.sl-contact-body__inner{
  width: min(980px, calc(100% - 48px));
  margin:0 auto;
}

/* ===== Tabs ===== */
.sl-contact-tabs{
  display:flex;
  justify-content:center;
  gap: 34px;
  margin: 10px 0 22px;
  position:relative;
}
.sl-contact-tab{
  background: transparent;
  border:0;
  cursor:pointer;
  font-size: 20px;
  font-weight: 900;
  letter-spacing: .06em;
  color:#9ca3af;
  padding: 8px 6px 12px;
  position:relative;
}
.sl-contact-tab.is-active{
  color:#111827;
}
.sl-contact-tab.is-active::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:3px;
  background:#ff8c42; /* オレンジライン */
  border-radius:2px;
}

/* ===== Panel / Form Card ===== */
.sl-contact-panels{
  margin-top: 6px;
}
.sl-contact-panel{
  display:none;
}
.sl-contact-panel.is-active{
  display:block;
}

/* “フォームの箱”をデザインに寄せる */
.sl-contact-formCard{
  background:#fff;
  border: 1px solid rgba(17,24,39,.22);
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
  padding: 26px;
}

/* CF7の中身を崩さないため、強いレイアウト指定はしない */
.sl-contact-formWrap{
  width:100%;
}

/* 送信ボタンがテーマの青に揃うよう、最低限の保険 */
.sl-contact-formWrap input[type="submit"],
.sl-contact-formWrap button[type="submit"]{
  background:#2F5597;
  color:#fff;
  border:0;
  padding: 12px 26px;
  font-weight: 900;
  border-radius: 4px;
  cursor:pointer;
  box-shadow: 0 8px 16px rgba(0,0,0,.18);
}
.sl-contact-formWrap input[type="submit"]:hover,
.sl-contact-formWrap button[type="submit"]:hover{
  opacity:.92;
}

@media (max-width: 768px){
  .sl-contact-hero{ height: 180px; }
  .sl-contact-hero__big{ font-size: 34px; }
  .sl-contact-body__inner{ width: min(980px, calc(100% - 28px)); }
  .sl-contact-tab{ font-size: 16px; }
  .sl-contact-tabs{ gap: 18px; }
  .sl-contact-formCard{ padding: 16px; }
}




/* =========================
   CF7 テーブルフォーム共通（お問い合わせ/注文フォーム）
========================= */
.sl-cf7-table{
  width:100%;
  border-collapse:collapse;
  background:#fff;
  border:1px solid rgba(17,24,39,.22);
}

.sl-cf7-table th,
.sl-cf7-table td{
  border:1px solid #d1d5db;
  padding:14px 14px;
  vertical-align:top;
}

.sl-cf7-table th{
  width: 32%;
  background:#dbe3ef;
  font-weight:800;
  color:#111827;
  white-space:nowrap;
}

.sl-cf7-table th p,
.sl-cf7-table td p{
  font-size: 1.5rem;
}

.sl-required{
  color:#dc2626;
  font-weight:900;
  margin-left:6px;
}

/* 入力欄の基本 */
.sl-cf7-table input[type="text"],
.sl-cf7-table input[type="email"],
.sl-cf7-table input[type="tel"],
.sl-cf7-table textarea,
.sl-cf7-table select{
  width:100%;
  max-width: 520px;
  padding:10px 10px;
  border:1px solid #9ca3af;
  border-radius:3px;
  background:#fff;
  box-sizing:border-box;
}

/* テキストエリア */
.sl-cf7-table textarea{
  min-height: 180px;
  resize: vertical;
}

/* ラジオ（連絡手段） */
.sl-cf7-table .wpcf7-list-item{
  margin: 0 18px 0 0;
}
.sl-cf7-table .wpcf7-list-item-label{
  font-weight:800;
  color:#111827;
}

/* 送信ボタン位置 */
.sl-cf7-submit{
  text-align:center;
  margin-top:18px;
}

/* CF7標準の不要な余白を抑える（崩れ防止） */
.wpcf7 form p{
  margin: 0;
}

/* エラーメッセージ等 */
.wpcf7-not-valid-tip{
  font-weight:800;
  margin-top:6px;
}
.wpcf7-response-output{
  margin: 16px 0 0;
}

/* =========================
   SP：縦積みにする
========================= */
@media (max-width: 768px){
  .sl-cf7-table,
  .sl-cf7-table tbody,
  .sl-cf7-table tr{
    display:block;
    width:100%;
  }

  .sl-cf7-table th,
  .sl-cf7-table td{
    display:block;
    width:100%;
    box-sizing:border-box;
  }

  .sl-cf7-table th{
    white-space:normal;
  }

  .sl-cf7-table input[type="text"],
  .sl-cf7-table input[type="email"],
  .sl-cf7-table input[type="tel"],
  .sl-cf7-table textarea{
    max-width: 100%;
  }
}







/* ContactForm7 表組みを整える（任意） */
.sl-cf7-table{
  width:100%;
  border-collapse:collapse;
  background:#fff;
}
.sl-cf7-table th,
.sl-cf7-table td{
  border:1px solid #d1d5db;
  padding:14px 14px;
  vertical-align:top;
}
.sl-cf7-table th{
  width: 30%;
  background:#dbe3ef;
  font-weight:800;
}
.sl-cf7-table input[type="text"],
.sl-cf7-table input[type="email"],
.sl-cf7-table input[type="tel"],
.sl-cf7-table textarea{
  width:100%;
  max-width: 520px;
  padding:10px 10px;
  border:1px solid #9ca3af;
}
@media (max-width:768px){
  .sl-cf7-table th{ width:40%; }
}







/* =========================
   CF7 Table Form (共通)
========================= */
.sl-cf7{
  font-size: 16px; /* 全体を少し大きく */
  color: #111827;
}

.sl-required{
  color:#e11d48;
  font-weight: 800;
  margin-left: 4px;
}

/* テーブル外に出した同意欄 */
.sl-cf7-accept{
  margin-top: 14px;
  text-align: center;
}
.sl-cf7-accept__label{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 15px;
}
.sl-cf7-accept input[type="checkbox"]{
  transform: scale(1.15);
}

/* テーブル */
.sl-cf7-table{
  width:100%;
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
  border: 1px solid rgba(17,24,39,.16);
}

.sl-cf7-table th,
.sl-cf7-table td{
  border-bottom: 1px solid rgba(17,24,39,.12);
  padding: 14px 16px;
  vertical-align: middle;
}

.sl-cf7-table tr:last-child th,
.sl-cf7-table tr:last-child td{
  border-bottom: 0;
}

.sl-cf7-table th{
  width: 32%;
  background: #dfe8f4;
  font-weight: 800;
  text-align: left;
  white-space: nowrap;
}

/* 入力欄 */
.sl-cf7 input[type="text"],
.sl-cf7 input[type="email"],
.sl-cf7 input[type="tel"],
.sl-cf7 textarea{
  width: 100%;
  box-sizing: border-box;
  font-size: 16px; /* SPで小さすぎ対策 */
  padding: 10px 12px;
  border: 1px solid rgba(17,24,39,.28);
  border-radius: 2px;
  background: #fff;
}

.sl-cf7 textarea{
  min-height: 160px;
  resize: vertical;
}

.sl-cf7 .wpcf7-list-item{
  margin: 0 14px 0 0;
}
.sl-cf7 input[type="radio"],
.sl-cf7 input[type="checkbox"]{
  transform: scale(1.1);
}

/* 送信ボタン位置（既存の sl-cf7-submit を活かす） */
.sl-cf7-submit{
  text-align: center;
  margin-top: 18px;
}
.wpcf7 .wpcf7-submit:disabled{
  font-size: 1.5rem;
}

/* =========================
   SP: th崩れ対策（縦積み）
========================= */
@media (max-width: 768px){
  .sl-cf7{ font-size: 16px; }

  .sl-cf7-table,
  .sl-cf7-table tbody,
  .sl-cf7-table tr{
    display:block;
    width:100%;
  }

  .sl-cf7-table tr{
    border-bottom: 1px solid rgba(17,24,39,.12);
  }

  .sl-cf7-table th,
  .sl-cf7-table td{
    display:block;
    width:100%;
    border:0;
    padding: 12px 14px;
  }

  /* ✅ ここでthの背景崩れを防ぎつつ見やすく */
  .sl-cf7-table th{
    background:#dfe8f4;
    border-bottom: 1px solid rgba(17,24,39,.10);
    white-space: normal;
  }

  .sl-cf7-table td{
    background:#fff;
  }

  .sl-cf7-accept__label{
    font-size: 15px;
    line-height: 1.6;
  }
}



/* 配送先エリアが消えた時のテーブル間の隙間調整 */
#js-shipping-area {
  border-top: none; /* 必要に応じて調整 */
}