/* =========
  LP Sub Base
========= */
.lp-sub__hero {
  padding: 48px 16px 24px;
  text-align: center;
}
.lp-sub__inner {
  max-width: 1040px;
  margin: 0 auto;
}
.lp-sub__title {
  font-size: 28px;
  line-height: 1.25;
  margin: 0 0 8px;
  color: #1d2088;
  font-weight: 800;
}
.lp-sub__lead {
  margin: 0;
  color: #1d2088;
  opacity: 0.75;
}
.lp-sub__content {
  padding: 24px 16px 72px;
}

/* =========
  Contact Tabs
========= */
.lp-contact-tabs {
  margin-top: 16px;
}

.lp-contact-tabs__nav {
  display: flex;
  gap: 10px;
  align-items: flex-end;
  margin: 0 0 16px;
  flex-wrap: wrap;
}

.lp-contact-tabs__btn {
  appearance: none;
  background: #fff;
  color: #1d2088;
  font-weight: 800;
  padding: 12px 16px;
  border-radius: 12px 12px 0 0;
  cursor: pointer;
  line-height: 1;
  border: none;
}

.lp-contact-tabs__btn.is-active {
  background: #1d2088;
  color: #fff;
}

.lp-contact-tabs__panes {
  border-radius: 0 16px 16px 16px;
  background: #fff;
  padding: 18px;
}

/* ★ここが肝：非アクティブは確実に消す */
.lp-contact-tabs__pane[hidden] { display: none !important; }
.lp-contact-tabs__pane { display: block; }

/* CF7の最低限の見た目（あとで精査OK） */
.lp-contact-tabs .wpcf7 form {
  margin: 0;
}
.lp-contact-tabs .wpcf7 input,
.lp-contact-tabs .wpcf7 textarea,
.lp-contact-tabs .wpcf7 select {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid rgba(29, 32, 136, 0.25);
  border-radius: 10px;
  padding: 12px 12px;
  font-size: 16px;
}
.lp-contact-tabs .wpcf7 input[type="submit"] {
  width: auto;
  border: none;
  background: #1d2088;
  color: #fff;
  padding: 14px 18px;
  border-radius: 999px;
  font-weight: 800;
  cursor: pointer;
}

/* =========================
   Contact LP Tone Adjust
========================= */
.lp-contact-tabs{
  margin-top: 24px;
}

/* 背景をLPの薄水色寄せ */
.lp-sub{
  background: #eaf6ff;
}

/* Tabs */
.lp-contact-tabs__nav{
  margin-bottom: 0;
}

.lp-contact-tabs__btn{
  background: #1d2088;
  color: #FFF;
  font-weight: 800;
  letter-spacing: .04em;
  transition: background .2s ease, color .2s ease;
}

.lp-contact-tabs__btn.is-active{
  background: #FFF;
  color: #1d2088;
}


/* Panels wrapper */
.lp-contact-tabs__panes{
  background: #FFF;
  border-radius: 0 18px 18px 18px;
  padding: 22px;
  box-shadow: none; /* LPは影弱め */
  text-align: center;
}

/* Form card */
.lp-contact-tabs__pane{
  background: #fff;
  border-radius: 18px;
  padding: 28px;
}

/* Labels */
.lp-contact-tabs label{
  font-weight: 800;
  color: #1d2088;
  margin-bottom: 6px;
  display: block;
  font-size: 14px;
  letter-spacing: .04em;
}

/* Required mark（CF7標準） */
.lp-contact-tabs .wpcf7-form-control-wrap + span{
  color: #d60000;
}

/* Inputs */
.lp-contact-tabs input[type="text"],
.lp-contact-tabs input[type="email"],
.lp-contact-tabs input[type="tel"],
.lp-contact-tabs textarea,
.lp-contact-tabs select{
  border: 2px solid rgba(29,32,136,.18);
  border-radius: 12px;
  padding: 14px 14px;
  font-size: 16px;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.lp-contact-tabs input:focus,
.lp-contact-tabs textarea:focus,
.lp-contact-tabs select:focus{
  border-color: rgba(29,32,136,.6);
  box-shadow: 0 0 0 4px rgba(29,32,136,.12);
  outline: none;
}

/* Submit button */
.lp-contact-tabs input[type="submit"]{
  background: #1d2088;
  color: #fff;
  font-weight: 800;
  letter-spacing: .08em;
  border-radius: 999px;
  padding: 16px 24px;
  margin-top: 10px;
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}

.lp-contact-tabs input[type="submit"]:hover{
  opacity: .95;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(29,32,136,.25);
}

/* Validation / response */
.lp-contact-tabs .wpcf7-not-valid-tip{
  font-size: 13px;
  margin-top: 6px;
}

.lp-contact-tabs .wpcf7-response-output{
  border-radius: 12px;
  padding: 14px 16px;
  margin-top: 18px;
  font-weight: 700;
}

@media (max-width: 768px){
  .lp-contact-tabs__pane{
    padding: 20px;
  }
  .lp-contact-tabs__btn{
    font-size: 14px;
    padding: 12px 14px;
  }
}
p span.required {
  color: #d60000;
  font-size: 12px;
  margin-right: 10px;
}

/* =========================
   CF7 table → 縦並び変換
========================= */

/* table構造を解除 */
.lp-contact-tabs table,
.lp-contact-tabs tbody,
.lp-contact-tabs tr,
.lp-contact-tabs th,
.lp-contact-tabs td{
  display: block;
  width: 100%;
}

/* 行ごとに余白を作る */
.lp-contact-tabs tr{
  margin-bottom: 20px;
}

/* ラベル（th） */
.lp-contact-tabs th {
    padding: 5px 10px 1px;
    margin-bottom: 6px;
    text-align: left;
    font-weight: 800;
    color: #1d2088;
    font-size: 18px;
    letter-spacing: .04em;
    text-align: center;
    background: #ebf6ff;
}

/* 入力欄（td） */
.lp-contact-tabs td{
  padding: 0;
}

/* =========================
   Contact Title Decoration
========================= */

/* タイトル全体 */
.lp-sub__title{
  position: relative;
  display: inline-block;
  padding-bottom: 14px;
  color: #1d2088;
  font-weight: 800;
}

/* 黄色い下バー */
.lp-sub__title::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 80px;              /* バーの長さ（好みで調整OK） */
  height: 8px;              /* 太さ */
  background: #f5dd63;      /* LPで使ってる黄色 */
  border-radius: 999px;
}

.lp-sub__title{
  text-align: center;
}

.lp-sub__title::after{
  left: 50%;
  transform: translateX(-50%);
}

@media (max-width: 768px){
  .lp-sub__title::after{
    width: 64px;
    height: 7px;
  }
}

/* =========================
   Checkbox size up
========================= */

.lp-contact-tabs input[type="checkbox"]{
  transform: scale(1.3);        /* ← 好みで 1.2〜1.4 */
  transform-origin: left center;
  margin-right: 8px;
  cursor: pointer;
}
/* =========================
   Checkbox inline layout
========================= */

.lp-contact-tabs .wpcf7-list-item label{
  display: flex;
  align-items: center;
  gap: 10px;           /* チェックと文言の間隔 */
  cursor: pointer;
}

/* チェックボックス自体 */
.lp-contact-tabs input[type="checkbox"]{
  transform: scale(1.3);
  margin: 0;
}
.lp-contact-tabs .wpcf7-list-item label{
  align-items: flex-start;  /* 複数行対応 */
}

.lp-contact-tabs .wpcf7-list-item label span{
  line-height: 1.6;
}
@media (max-width: 768px){
  .lp-contact-tabs .wpcf7-list-item label{
    gap: 12px;
  }
}
/* =========================
   CF7: お問い合わせ項目（複数選択）の整形
   ========================= */

/* 1) まず「項目一覧」を横に広く（グリッド） */
.wpcf7 .wpcf7-form .wpcf7-checkbox,
.wpcf7 .wpcf7-form .wpcf7-checkbox .wpcf7-list-item {
  /* 既存がinline系でも上書きされるように */
}

.wpcf7 .wpcf7-form .wpcf7-checkbox {
  display: grid;
  grid-template-columns: repeat(5, minmax(160px, 1fr)); /* PC: 5列想定 */
  gap: 14px 18px;
  margin: 0;
  padding: 0;
}

/* 2) 1項目の中を「checkbox固定幅 + テキスト広め」に */
.wpcf7 .wpcf7-form .wpcf7-checkbox .wpcf7-list-item {
  margin: 0; /* CF7標準の左右marginを消す */
}

.wpcf7 .wpcf7-form .wpcf7-checkbox .wpcf7-list-item label {
  display: flex;
  align-items: flex-start;  /* 1行目の上に揃える */
  gap: 10px;
  line-height: 1.35;
}

/* 3) チェックボックスを少し大きく & 位置を1行目に合わせる */
.wpcf7 .wpcf7-form .wpcf7-checkbox input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin: 0;               /* 余計なズレを消す */
  margin-top: 2px;         /* 1行目の文字頭と合うよう微調整 */
  flex: 0 0 20px;          /* checkbox幅を固定 */
  accent-color: #1d2088;   /* 可能なブラウザなら色も統一 */
}

/* 4) テキスト領域を「checkboxより広く」確保（改行を減らす） */
.wpcf7 .wpcf7-form .wpcf7-checkbox .wpcf7-list-item-label {
  flex: 1 1 auto;          /* テキスト側を伸ばす */
  min-width: 0;            /* flexでの折返し制御に必要 */
  font-weight: 700;        /* LPトンマナに寄せるなら */
  color: #1d2088;
}

/* 5) 画面幅に応じて列数を落とす（改行を減らすため、段階的に） */
@media (max-width: 1024px) {
  .wpcf7 .wpcf7-form .wpcf7-checkbox {
    grid-template-columns: repeat(3, minmax(170px, 1fr));
  }
}
@media (max-width: 640px) {
  .wpcf7 .wpcf7-form .wpcf7-checkbox {
    grid-template-columns: repeat(2, minmax(160px, 1fr));
    gap: 12px 14px;
  }
}