@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/


/* ヒーロー */
.qcc-hero-form {
  background:#fff;
  border-radius:16px;
  padding:24px;
  max-width:560px;
  box-shadow:0 8px 24px rgba(0,0,0,.08);
}
/* 見出し部分（1分で簡単査定！即日高価買取！） */
.qcc-hero-title {
   text-align: center; font-size:24px !important; line-height:1.0; margin:0 0 10px !important;
}
.qcc-hero-title span {
  color:#ff6a00; font-weight:700; font-size:32px;
}
.qcc-hero-sub {
  margin:0 0 20px; color:#555; font-size:14px;
}

@media (max-width: 600px) {
  .qcc-hero-title {
    font-size: 26px;
  }
  .qcc-hero-title span {
    font-size: 36px;
  }
  .qcc-hero-sub {
    font-size: 14px;
  }
}

.qcc-field-label {
  display:block; margin:12px 0 8px !important; font-weight:600; font-size:14px;
}
.qcc-hero-form select {
  margin-bottom: 20px !important;  /* ←ここで下の余白を作る（好みで調整） */
}
.qcc-hero-form select,
.qcc-hero-form input[type="text"] {
  width:100%; padding:14px 12px; border:1px solid #e0e0e0; border-radius:8px; font-size:16px; background:#f7f7f8;
}

.qcc-hero-actions {
  display: flex !important;
  flex-direction: row !important;
  justify-content: center;
  align-items: center;
  margin-top: 24px;     /* ← ボタン全体の上に余白を作る */
  flex-wrap: nowrap !important;  /* 折り返さない */
}

/* 子要素（ボタンやpなど）が幅100%を持っている場合にリセット */
.qcc-hero-actions > * {
  width: auto !important;
  display: inline-flex !important;
  margin: 0 !important; /* pタグが残っている場合の余白も消す */
}

/* ボタン自身の幅リセット（テーマがwidth:100%を当てている場合に備える） */
.qcc-hero-actions .qcc-btn {
  flex: 0 0 auto !important;
  width: auto !important;
  text-align: center;
  white-space: nowrap; /* 文字でボタン幅が段返りしないように */
}

.qcc-btn {
  flex: 0 0 auto;            /* ← ボタンを均等幅に */
  min-width: 140px;          /* ← 最小幅の指定（好みで調整） */
  appearance: none;
  border: 0;
  border-radius: 12px;
  padding: 14px 28px;
  font-size: 16px;
  cursor: pointer;
  text-align: center;        /* ← テキスト中央揃え */
}

/* aをボタンとして扱い、行高や外余白をリセット */
.qcc-btn {
  display: inline-flex;           /* ← インライン要素の行高問題を解消 */
  align-items: center;
  justify-content: center;
  line-height: 1;                 /* ← 行間の余白をゼロに */
  margin: 0;                      /* ← 外側マージンを念のためゼロ */
  padding: 14px 28px;
  border-radius: 12px;
  font-size: 16px;
  text-decoration: none;          /* 下線を消す */
}

.qcc-btn-primary { background:#1f2937; color:#fff; }
.qcc-btn-primary:hover { opacity:.9; }


/* /form/ の見た目（軽く） */
.qcc-full-form label { display:block; margin:14px 0 6px; font-weight:600; }
.qcc-full-form input[type="text"],
.qcc-full-form input[type="email"],
.qcc-full-form input[type="tel"],
.qcc-full-form input[type="date"],
.qcc-full-form select,
.qcc-full-form textarea {
  width:100%; padding:12px; border:1px solid #ddd; border-radius:8px; background:#fff;
}
.qcc-full-form textarea { min-height:120px; }
.qcc-declare { margin:14px 0; font-size:14px; }
.wpcf7 form .wpcf7-submit { 
  background:#1f2937; color:#fff; border:0; border-radius:10px; padding:14px 22px; font-size:16px;
}

/* ───────────────
   送信ボタンのスタイル調整
──────────────── */
.wpcf7 form .wpcf7-submit {
  display: block;              /* ブロック化して中央寄せ */
  margin: 24px auto 0;         /* 上に少し余白をとり、中央寄せ */
  padding: 16px 36px;          /* 少し大きめのサイズ */
  font-size: 17px;             /* フォントサイズを拡大 */
  font-weight: 600;
  background-color: #1f2937;   /* QCCメインカラー（濃紺系） */
  color: #fff;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: 0.2s ease;
}

.wpcf7 form .wpcf7-submit:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

/* QCCフルフォーム内のラベル直後の <br> を非表示にする */
.qcc-full-form label + br { display: none !important; }

/* 念のため、フィールド用ラッパーに上マージンを与えて整える */
.qcc-full-form .wpcf7-form-control-wrap {
  display: block;
  margin-top: 4px;   /* ラベルと入力欄の間隔を詰める数値 */
}

/* ラベル・入力欄の基本余白（お好みで微調整） */
.qcc-full-form label { margin: 8px 0 2px !important; }
.qcc-full-form input[type="text"],
.qcc-full-form input[type="email"],
.qcc-full-form input[type="tel"],
.qcc-full-form input[type="date"],
.qcc-full-form select,
.qcc-full-form textarea {
  margin-bottom: 10px; /* 次のラベルとの間隔 */
}