@charset "UTF-8";

/* お問い合わせ（Contact Form 7 の調整も含む）
   読み込み順は functions.php（後に読み込んだ指定が勝つので順番を変えない） */

/* --------------------------------------------------------------------- */
/* お問い合わせ　*/
/* --------------------------------------------------------------------- */

/* お問い合わせ　説明 */
.contact-us-description {
  text-align: center;
  margin: 50px 0;

  /* スマホサイズ以下 */
  @media (max-width: 767px) {
    margin: 30px 0;
  }
}

/* お問い合わせ　順番
---------------------------------------------------------- */
.contact-us-order {
  position: relative;
  display: flex;
  justify-content: space-around;
  margin: 70px 5%;

  /* スマホサイズ以下 */
  @media (max-width: 767px) {
    flex-direction: column;
    align-items: center;
    margin: 40px 0;
  }
}

/* 番号の配置の親要素 */
.positon-relative {
  position: relative;
}

/* 番号 */
.number-icon::before {
  content: '';
  position: absolute;
  /* アイコンの水平方向の位置を調整 */
  left: -33px;
  /* アイコンを縦方向の中央に配置 */
  top: 15px;
  /* 縦の中央揃えのために移動 */
  transform: translateY(-50%);
  /* 背景画像としてPNGを指定 */
  background-size: contain;
  background-repeat: no-repeat;

  /* スマホサイズ以下 */
  @media (max-width: 767px) {
    /* アイコンの水平方向の位置を調整 */
    left: -25px;
    /* アイコンを縦方向の中央に配置 */
    top: 13px;
  }
}

/* 番号 01 */
.order01::before {
  /* 背景画像 */
  background-image: url(../img/number_01.png);
  /* アイコンの大きさ */
  width: 14px;
  height: 37px;

  /* スマホサイズ以下 */
  @media (max-width: 767px) {
    width: 10.7px;
    height: 28.28px;
  }
}

/* 番号 02 */
.order02::before {
  /* 背景画像 */
  background-image: url(../img/number_02.png);
  /* アイコンの大きさ */
  width: 18px;
  height: 37px;

  /* スマホサイズ以下 */
  @media (max-width: 767px) {
    width: 14px;
    height: 29px;
  }
}

/* 番号 03 */
.order03::before {
  /* 背景画像 */
  background-image: url(../img/number_03.png);
  /* アイコンの大きさ */
  width: 18px;
  height: 37px;

  /* スマホサイズ以下 */
  @media (max-width: 767px) {
    width: 13.76px;
    height: 28.28px;
  }
}

/* 番号 04 */
.order04::before {
  /* 背景画像 */
  background-image: url(../img/number_04.png);
  /* アイコンの大きさ */
  width: 19px;
  height: 37px;

  /* スマホサイズ以下 */
  @media (max-width: 767px) {
    width: 14.52px;
    height: 28.28px;
  }
}

/* 右矢印 */
.arrow-right {
  width: 13px;
  height: 13px;
  content: '';
  border-right: 4px solid var(--color-line);
  border-bottom: 4px solid var(--color-line);
  transform: translateY(calc(-50% - 5px)) rotate(315deg);
  /* 番号の大きさ分、中央に配置されるように調整 */
  margin-right: 40px;
  /* 高さを中央になるように調整 */
  margin-top: 20px;

  /* タブレットサイズ未満 */
  /* 下矢印に変更 */
  @media (max-width: 767px) {
    width: 10px;
    height: 10px;
    border-right: 2px solid var(--color-line);
    border-bottom: 2px solid var(--color-line);
    transform: translateY(calc(-50% - 5px)) rotate(45deg);
    margin: 13px 0 -2px 0;
  }
}

/* お問い合わせ　タイトル
---------------------------------------------------------- */
.contact-us-title {
  height: 62px;
  max-width: 1500px;
  /* 親要素 */
  position: relative;
  /* 縦方向に中央揃え */
  display: flex;
  align-items: center;

  /* タブレットサイズ以下 */
  @media (max-width: 960px) {
    height: 40px;
  }
}

/* タイトル 番号 */
.contact-us-title h1::before {
  left: 25px;
  top: 54%;

  /* スマホサイズ以下 */
  @media (max-width: 767px) {
    left: 17px;
  }
}

/* タイトル 番号 01 */
.contact-us-title .order01::before {
  height: 51px;
  width: 19px;

  /* タブレットサイズ以下 */
  @media (max-width: 960px) {
    height: 29px;
    width: 11px;
  }
}

/* タイトル 番号 02 */
.contact-us-title .order02::before {
  height: 49px;
  width: 24px;

  /* タブレットサイズ以下 */
  @media (max-width: 960px) {
    height: 29px;
    width: 14px;
  }
}

/* タイトル 番号 03 */
.contact-us-title .order03::before {
  height: 49px;
  width: 24px;

  /* タブレットサイズ以下 */
  @media (max-width: 960px) {
    height: 28.28px;
    width: 13.76px;
  }
}

/* タイトル 番号 04 */
.contact-us-title .order04::before {
  height: 51px;
  width: 26px;

  /* タブレットサイズ以下 */
  @media (max-width: 960px) {
    height: 28.28px;
    width: 14.52px;
  }
}

/* タイトル h1 */
.contact-us-title h1 {
  font-size: 25px;
  margin-left: 70px;

  /* タブレットサイズ以下 */
  @media (max-width: 960px) {
    font-size: 15px;
    margin-left: 42px;
  }

  /* スマホサイズ以下 */
  @media (max-width: 767px) {
    font-size: var(--font-sp-heading-s);
  }
}

/* 番号つきの見出し */
h1.number-icon {
  /* スマホサイズ以下 */
  @media (max-width: 767px) {
    font-size: var(--font-sp-heading-s);
  }
}

/* お問い合わせ　質問
---------------------------------------------------------- */

/* 必須の質問　枠 */
.question-item {
  display: flex;
  margin-top: 40px;
  margin-bottom: 10px;

  /* スマホサイズ以下 */
  @media (max-width: 767px) {
    margin-top: 30px;
    margin-bottom: 5px;
  }
}

/* 必須 */
.required {
  font-size: 13px;
  color: var(--color-white);
  background-color: var(--color-pink);
  height: 22px;
  width: 56px;
  border-radius: 3px;
  text-align: center;
  margin: auto 0 auto 10px;

  /* タブレットサイズ以下 */
  @media (max-width: 960px) {
    font-size: 10px;
    height: 16px;
    width: 43px;
  }

  /* スマホサイズ以下：文字を大きくした分、枠も広げて文字を枠の真ん中に置く */
  @media (max-width: 767px) {
    font-size: var(--font-sp-small);
    display: flex;
    align-items: center;
    justify-content: center;
    height: 20px;
    width: 48px;
    line-height: 1;
  }
}

/* ラジオボタン */
.contact-us-radio {
  margin-left: 30px;
  display: flex;
  /* 必要に応じて改行 */
  flex-wrap: wrap;

  /* スマホサイズ以下 */
  @media (max-width: 767px) {
    margin-left: 7px;
  }
}

/* ラジオボタン ラベル */
.contact-us-radio label {
  margin-right: 10px;
}

/* テキスト */
input[type='text'] {
  color: var(--color-text);
  font-family: YuGothic, 'Yu Gothic', sans-serif;
  font-size: 18px;
  height: 48px;
  width: 747px;
  border-radius: 3px;
  border: 1.5px solid var(--color-line);
  padding: 1px 10px;
  /* 横幅を固定 */
  box-sizing: border-box;

  /* タブレットサイズ以下 */
  @media (max-width: 960px) {
    font-size: 12px;
    height: 35px;
    width: 100%;
  }

  /* スマホサイズ以下 */
  @media (max-width: 767px) {
    font-size: var(--font-input);
  }
}

/* テキスト プレースホルダー */
input::placeholder {
  color: var(--color-text-light);
}

/* テキストエリア */
textarea {
  color: var(--color-text);
  font-family: YuGothic, 'Yu Gothic', sans-serif;
  font-size: 18px;
  height: 325px;
  width: 100%;
  border-radius: 6px;
  border: 1.5px solid var(--color-line);
  padding: 20px;
  /* 横幅を固定 */
  box-sizing: border-box;

  /* タブレットサイズ以下 */
  @media (max-width: 960px) {
    height: 263px;
    width: 100%;
    font-size: 13px;
  }

  /* スマホサイズ以下 */
  @media (max-width: 767px) {
    font-size: var(--font-input);
  }
}

/* メール・電話・数字・URL・選択欄（スマホの文字サイズだけ指定） */
input[type='email'],
input[type='tel'],
input[type='number'],
input[type='url'],
select {
  /* スマホサイズ以下 */
  @media (max-width: 767px) {
    font-size: var(--font-input);
  }
}

/* テキストエリア　プレースホルダー */
textarea::placeholder {
  color: var(--color-text-light);
}

/* 日付 */
input[type='date'] {
  color: var(--color-text);
  font-family: YuGothic, 'Yu Gothic', sans-serif;
  font-size: 18px;
  height: 48px;
  width: 528px;
  border-radius: 3px;
  border: 1.5px solid var(--color-line);
  padding: 10px;
  /* 横幅を固定 */
  box-sizing: border-box;

  /* タブレットサイズ以下 */
  @media (max-width: 960px) {
    font-size: 13px;
    height: 35px;
  }

  /* スマホサイズ以下 */
  @media (max-width: 767px) {
    font-size: var(--font-input);
  }

  /* 枠の大きさを100%に */
  @media (max-width: 630px) {
    width: 100%;
  }
}

/* その他
---------------------------------------------------------- */

/* その他の入力フィールド （ご依頼予定の内容） */
input.wpcf7-free-text {
  width: 245px;
  height: 48px;

  /* タブレットサイズ以下 */
  @media (max-width: 960px) {
    height: 35px;
    font-size: 13px;
  }

  /* スマホサイズ以下 */
  @media (max-width: 767px) {
    font-size: var(--font-input);
  }

  /* スマホサイズ以下（高さ23pxだと16pxの文字が窮屈なので30px） */
  @media (max-width: 428px) {
    height: 30px;
    width: 102px;
  }
}

/* スケジュール・予算
---------------------------------------------------------- */

/* 予算　入力フィールド */
#budget {
  width: 245px;

  /* スマホサイズ以下 */
  @media (max-width: 767px) {
    width: 200px;
  }
}

/* 円 */
#budget-en {
  margin: auto 0 auto 10px;
  white-space: nowrap;
}

/* お客様の情報
---------------------------------------------------------- */

/* お客様の情報　入力フィールド */
.guest-info input[type='text'] {
  width: 528px;

  /* タブレットサイズ以下 */
  @media (max-width: 960px) {
    width: 100%;
  }
}

/* 同意事項
---------------------------------------------------------- */

/* 同意事項　質問枠　直下のpタグ */
.agreement-matter > p {
  margin-top: 60px;

  /* スマホサイズ以下 */
  @media (max-width: 767px) {
    margin-top: 20px;
  }
}

/* 同意事項　枠 */
.agreement-matter-container {
  border-radius: 6px;
  border: 1.5px solid var(--color-line);
  margin: 30px auto;
  padding: 0 5% 40px 5%;

  /* スマホサイズ以下 */
  @media (max-width: 767px) {
    margin-top: 25px;
    padding-bottom: 25px;
  }
}

/* 同意事項　p */
.agreement-matter-p {
  font-size: 15px;
  line-height: 22.5px;

  /* スマホサイズ以下 */
  @media (max-width: 767px) {
    font-size: var(--font-sp-body);
    line-height: 18px;
  }
}

/* 同意事項　枠内　タイトル */
.agreement-matter-title {
  font-size: 20px;
  line-height: 30px;
  margin: 55px 0 20px 0;

  /* スマホサイズ以下 */
  @media (max-width: 767px) {
    font-size: var(--font-sp-heading-s);
    line-height: 15px;
    margin-top: 30px;
  }
}

/* 同意事項　リスト ul*/
.agreement-matter-container ul {
  padding-inline-start: 20px;
}

/* 同意事項　リスト li*/
.agreement-matter-container li {
  font-size: 15px;
  line-height: 22.5px;
  margin: 25px 0;

  /* スマホサイズ以下 */
  @media (max-width: 767px) {
    font-size: 12px;
    line-height: 18px;
    margin: 15px 0;
  }
}

/* 同意事項　チェックボックス */
.check-box {
  text-align: center;
}

/* ボタン
------------------------------------------------------- */

/* 送信ボタン */
.sending-btn {
  margin: 80px auto;
  text-align: center;

  /* スマホサイズ以下 */
  @media (max-width: 767px) {
    margin: 40px auto;
  }
}

/* 送信ボタン　無効時 */
.sending-btn .btn-pink-blue:disabled {
  background: var(--color-bg-gray);
}

/* 下矢印
------------------------------------------------------- */
.triangle {
  width: 153px;
  height: 40px;
  /* 塗りつぶしの色 */
  background-color: var(--color-line);
  /* 下向きの三角形を作成 */
  clip-path: polygon(50% 100%, 0% 0%, 100% 0%);
  margin: 80px auto;

  /* スマホサイズ以下 */
  @media (max-width: 767px) {
    width: 105px;
    height: 25px;
    margin: 40px auto;
  }
}

/* ------------------------------------------------------- */

/* 注意事項 pタグ */
.considerations-p {
  font-size: 15px;
  margin: 5px 0;
  line-height: 22.5px;

  /* タブレットサイズ以下 */
  @media (max-width: 960px) {
    font-size: 11px;
    line-height: 16.5px;
  }

  /* スマホサイズ以下 */
  @media (max-width: 767px) {
    font-size: var(--font-sp-small);
    line-height: 1.5;
  }
}

/* ご依頼の内容　注意事項 pタグ */
.order-content .considerations-p {
  /* スマホサイズ以下 */
  @media (max-width: 767px) {
    margin-left: 10px;
  }
}

/* タブレットサイズ未満のときに両端に3％余白をつける */
.question-container {
  row-gap: 10px;

  /* スマホサイズ以下 */
  @media (max-width: 767px) {
    margin: 0 3%;
  }
}

/* Contact Form7
------------------------------------------------------- */

/* その他 */
span.wpcf7-list-item.last.has-free-text {
  /* 入力欄と横並び */
  display: flex;
  /* 縦方向中央配置 */
  align-items: center;
  /* 折り返ししない */
  white-space: nowrap;
  /* 間隔 */
  gap: 10px;
}

/* ラジオボタン、
チェックボックス */
.wpcf7-radio,
.wpcf7-checkbox {
  /* 全てのラジオ担の要素を横並び */
  display: flex;
  /* 縦方向中央配置 */
  align-items: center;
  /* 小さい画面では折り返す */
  flex-wrap: wrap;
  /* 縦方向の間隔 */
  row-gap: 5px;
}

/* 同意のチェックボックスを横並び */
.wpcf7-list-item label {
  display: flex;
  align-items: center;
  gap: 5px;
}

/*デフォルトのスタイルを無効化する*/
input[type='submit'] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

/* Contact Form7がデフォルトで出力する｢spinner｣を非表示 */
span.wpcf7-spinner {
  display: none;
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output {
  font-weight: 18px;
  color: var(--color-error);
  font-weight: 900;
  border: 1.5px solid var(--color-error);
  border-radius: 2px;
  margin: 10%;
  padding: 0.5em 1em;
  text-align: center;

  /* タブレットサイズ以下 */
  @media (max-width: 960px) {
    font-size: 13px;
  }
}

/* フォームの送信結果メッセージ */
.wpcf7 form .wpcf7-response-output {
  /* スマホサイズ以下 */
  @media (max-width: 767px) {
    font-size: var(--font-sp-body);
  }
}

/* 入力エラー
入力内容に問題があります。確認して再度お試しください。 */
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output {
  border-color: var(--color-error);
  border-radius: 3px;
  margin: 10%;
  padding: 10px;
  text-align: center;
  color: var(--color-error);
}

/* 送信完了メッセージを表示しない */
.wpcf7-form.sent .wpcf7-response-output {
  display: none;
}