@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
*/
/* ========================================
   LP用 固定フッターCTA
   スマホのみ表示
======================================== */
@media (max-width: 959px) {

  /* ----------------------------------------
     固定CTA全体の設定
     ・画面下に固定
     ・背景は透明
     ・左右と下に余白を設定
  ---------------------------------------- */
  #lp-fixed-cta {
    position: fixed; /* 画面に固定 */
    left: 0;
    bottom: 0;
    width: 100%;
    z-index: 9999; /* 他の要素より前面に表示 */
    background: rgba(0, 0, 0, 0.0); /* 背景は透明 */
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); /* iPhone下部余白対応 */
    box-sizing: border-box;
  }

  /* ----------------------------------------
     ボタンを横並びにする設定
     ・2つのボタンを横並び
     ・gapでボタン間の余白を設定
  ---------------------------------------- */
  #lp-fixed-cta .lp-fixed-cta__inner {
    display: flex;
    gap: 8px;
  }

  /* ----------------------------------------
     ボタン本体の共通設定
     ・色
     ・文字サイズ
     ・余白
     ・角丸
     ・2つを均等幅にする
  ---------------------------------------- */
  #lp-fixed-cta .lp-fixed-cta__btn {
    flex: 1; /* 横並びで均等幅 */
    display: block;
    text-align: center;
    background: #f70088; /* ボタン背景色 */
    color: #ffffff; /* 文字色 */
    text-decoration: none;
    padding: 14px 16px; /* ボタン内余白 */
    border-radius: 8px; /* 角丸 */
    font-weight: 700; /* 太字 */
    box-sizing: border-box;
  }

  /* ----------------------------------------
     電話ボタン
     ・今は共通デザインのまま
     ・将来色を変えたいときはここに追加
  ---------------------------------------- */
  #lp-fixed-cta .lp-fixed-cta__btn--tel {
    background: #fc99b4;
    color: #ffffff;
  }

  /* ----------------------------------------
     求人サイトボタン
     ・今は共通デザインのまま
     ・将来色を変えたいときはここに追加
  ---------------------------------------- */
  #lp-fixed-cta .lp-fixed-cta__btn--recruit {
    background: #fc99b4;
    color: #ffffff;
  }

  /* ----------------------------------------
     ページ本文が固定CTAに隠れないように
     bodyの下に余白を追加
     数値はCTAの高さに合わせて調整
  ---------------------------------------- */
  body {
    padding-bottom: 88px;
  }

  /* ----------------------------------------
     「上に戻る」ボタンがある場合、
     固定CTAとかぶらないよう上にずらす
     数値は必要に応じて調整
  ---------------------------------------- */
  .p-fixBtnWrap {
    bottom: 7.5em !important;
  }
}

/* ========================================
   PCでは非表示
======================================== */
@media (min-width: 960px) {
  #lp-fixed-cta {
    display: none;
  }
}

/* ========================================
   Contact Form 7 おしゃれフォームデザイン
   女性専用フィットネスLP向け
   ※送信ボタン中央寄せ・余白調整版
======================================== */

.cf7-form p {
  margin: 0;
}
.cf7-form br {
  display: none;
}

/* ----------------------------------------
   フォーム全体
---------------------------------------- */
.cf7-form {
  display: flex;
  flex-direction: column;
  gap: 16px; /* 22px → 16px に調整 */
  max-width: 100%;
}

/* ----------------------------------------
   1行ごとのレイアウト
---------------------------------------- */
.cf7-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px; /* 18px → 12px に調整 */
}

/* 2カラム用 */
.cf7-row--2col .cf7-col {
  flex: 1 1 calc(50% - 6px);
  min-width: 260px;
}

/* 共通カラム */
.cf7-col {
  width: 100%;
}

/* ----------------------------------------
   ラベル
---------------------------------------- */
.cf7-form label,
.cf7-form .cf7-label {
  display: block;
  margin-bottom: 4px; /* 8px → 4px に調整 */
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
  color: #444444;
}

/* 必須表示 */
.cf7-form .required {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #fff1f5;
  color: #d85b86;
  font-size: 11px;
  font-weight: 700;
  vertical-align: middle;
}

/* 任意表示 */
.cf7-form .any {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #f1fffe;
  color: #5bd2d8;
  font-size: 11px;
  font-weight: 700;
  vertical-align: middle;
}

/* ----------------------------------------
   入力欄共通
---------------------------------------- */
.cf7-form input[type="text"],
.cf7-form input[type="email"],
.cf7-form input[type="tel"],
.cf7-form input[type="date"],
.cf7-form input[type="time"],
.cf7-form select,
.cf7-form textarea {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
  padding: 14px 16px;
  border: 1px solid #eadde2;
  border-radius: 14px;
  background: #ffffff;
  font-size: 15px;
  line-height: 1.5;
  color: #333333;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
  box-shadow: 0 4px 14px rgba(252, 153, 180, 0.08);
}

/* プレースホルダー */
.cf7-form input::placeholder,
.cf7-form textarea::placeholder {
  color: #b6aab0;
}

/* フォーカス時 */
.cf7-form input[type="text"]:focus,
.cf7-form input[type="email"]:focus,
.cf7-form input[type="tel"]:focus,
.cf7-form input[type="date"]:focus,
.cf7-form input[type="time"]:focus,
.cf7-form select:focus,
.cf7-form textarea:focus {
  outline: none;
  border-color: #fc99b4;
  box-shadow: 0 0 0 4px rgba(252, 153, 180, 0.16);
  background: #fffdfd;
}

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

/* ----------------------------------------
   セレクトボックス
---------------------------------------- */
.cf7-form select {
  background-image:
    linear-gradient(45deg, transparent 50%, #c27a93 50%),
    linear-gradient(135deg, #c27a93 50%, transparent 50%);
  background-position:
    calc(100% - 18px) calc(50% - 3px),
    calc(100% - 12px) calc(50% - 3px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 42px;
}

/* ----------------------------------------
   ラジオボタン・チェックボックス周り
---------------------------------------- */
.cf7-form .wpcf7-list-item {
  margin: 0 14px 0 0;
}

.cf7-form .wpcf7-list-item label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 0;
  padding: 12px 16px;
  border: 1px solid #eadde2;
  border-radius: 999px;
  background: #ffffff;
  color: #444444;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 3px 10px rgba(252, 153, 180, 0.08);
}

/* ラジオ・チェック本体 */
.cf7-form input[type="radio"],
.cf7-form input[type="checkbox"] {
  accent-color: #fc99b4;
  transform: scale(1.05);
}

/* hover */
.cf7-form .wpcf7-list-item label:hover {
  border-color: #fc99b4;
  background: #fff8fa;
}

/* ----------------------------------------
   エラーメッセージ
---------------------------------------- */
.cf7-form .wpcf7-not-valid-tip {
  margin-top: 8px;
  font-size: 12px;
  color: #d84b6f;
}

.cf7-form .wpcf7-not-valid {
  border-color: #d84b6f !important;
  box-shadow: 0 0 0 4px rgba(216, 75, 111, 0.12) !important;
}

/* 送信結果メッセージ */
.cf7-form .wpcf7-response-output {
  margin: 8px 0 0 0;
  padding: 14px 16px;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.6;
}

/* ----------------------------------------
   送信ボタン
---------------------------------------- */
.cf7-form input[type="submit"] {
  appearance: none;
  -webkit-appearance: none;
  display: block;       /* 中央寄せ用に block に変更 */
  width: auto;          /* 全幅をやめる */
  min-width: 220px;     /* 小さすぎ防止 */
  max-width: 360px;
  margin: 8px auto 0;   /* 中央寄せ */
  padding: 16px 24px;
  border: none;
  border-radius: 999px;
  background: linear-gradient(135deg, #fc99b4 0%, #f57fa1 100%);
  color: #ffffff;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.03em;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(245, 127, 161, 0.25);
  transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

/* ボタン hover */
.cf7-form input[type="submit"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(245, 127, 161, 0.3);
}

/* ボタン active */
.cf7-form input[type="submit"]:active {
  transform: translateY(0);
}

/* 送信中 */
.cf7-form .wpcf7-spinner {
  display: block;
  margin: 12px auto 0;
}

/* ----------------------------------------
   入力グループをカード風にしたい場合
   必要なら .cf7-card をHTML側で追加
---------------------------------------- */
.cf7-form .cf7-card {
  padding: 20px;
  border: 1px solid #f3e8ec;
  border-radius: 18px;
  background: #fffafb;
  box-shadow: 0 8px 24px rgba(252, 153, 180, 0.06);
}

/* ----------------------------------------
   スマホ対応
---------------------------------------- */
@media (max-width: 767px) {
  .cf7-form {
    gap: 14px; /* 18px → 14px に調整 */
  }

  .cf7-row {
    gap: 10px; /* 14px → 10px に調整 */
  }

  .cf7-row--2col .cf7-col {
    flex: 1 1 100%;
    min-width: 100%;
  }

  .cf7-form input[type="text"],
  .cf7-form input[type="email"],
  .cf7-form input[type="tel"],
  .cf7-form input[type="date"],
  .cf7-form input[type="time"],
  .cf7-form select,
  .cf7-form textarea {
    padding: 13px 14px;
    font-size: 16px; /* iPhoneの拡大防止 */
  }

  .cf7-form .wpcf7-list-item {
    display: block;
    margin: 0 0 10px 0;
  }

  .cf7-form .wpcf7-list-item label {
    display: flex;
    width: 100%;
  }

  .cf7-form input[type="submit"] {
    max-width: 100%;
  }
}