<div class="sp-record-search-container">
  <div class="sp-record-search-parts sp-html-parts"><p>予約日検索</p></div>
  <!--/* 予約日 (reservationDate) */-->
  <sp:record-search-field name="f0xx"></sp:record-search-field>
  <div class="sp-record-search-parts sp-record-search-field">
    <div class="sp-record-search-label" th:text="${fields['f0xx'].label}">Label</div>
    <div class="sp-record-search-data">
      <div class="sp-form-datetimes">
        <div class="sp-form-date">
          <input type="date" class="sp-form-control" th:name="${fields['f0xx:after'].name}" th:placeholder="${fields['f0xx'].placeholder.startDate}" th:value="${inputs['f0xx:after']}">

          <span class="sp-form-date-separator">〜</span>
          <input type="date" class="sp-form-control" th:name="${fields['f0xx:before'].name}" th:placeholder="${fields['f0xx'].placeholder.endDate}" th:value="${inputs['f0xx:before']}">
        </div>
      </div>
      <span class="sp-form-noted" th:if="${fields['f0xx'].help != null}" th:text="${fields['f0xx'].help}">Help text</span>
    </div>
  </div>
  <div class="sp-form-item sp-form-html" th:inline="none">カレンダーマークを押すとカレンダーが表示されます。</div>
  <div class="sp-record-search-parts sp-form-interaction">
    <button class="sp-search-button" type="submit" name="action" value="search">検索</button>
  </div>
</div>

:root {
  /*=============================
	カスタムプロパティ
  ==============================*/
  --search-container-color: #FFFFFF; /* 検索コンテナの背景色 */
  --search-container-border: 1.5px solid #EBEBEB; /* 検索コンテナの枠線 */
  --search-container-shadow: 0 2px 5px rgba(0,0,0,0.2); /* 検索コンテナの影 */
  --search-label-txtcolor: #333333; /* ラベルの文字色 */
  --search-input-color: #F7F8FC; /* 入力欄の背景色 */
  --search-input-border-color: #F0F1F5; /* 入力欄の枠線の色 */
  --search-border-radius: 12px; /* 角の丸さ */
  text-align: center;
}

.sp-record-search-container {
  background-color:#ffffff;
  border-radius:var(--search-border-radius);
  -webkit-box-sizing:border-box;
  box-sizing:border-box;
  background: var(--search-container-color);
  color:#333333;
  padding:1rem;
  width:clamp(452px, 60%, 800px);
  margin:auto;
  margin-bottom:1rem;
  border: var(--search-container-border);
  box-shadow: var(--search-container-shadow);
  font-size: .9rem;
}

.sp-record-search-container .sp-record-search-parts {
  margin-bottom:.5rem;
}

.sp-record-search-container .sp-record-search-parts:last-child { margin-bottom:0; }

.sp-record-search-container .sp-html-parts p { margin:0; }

.sp-record-search-container .sp-record-search-field {
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-orient:vertical;
  -webkit-box-direction:normal;
  -ms-flex-direction:column;
  flex-direction:column;
}

.sp-record-search-container .sp-record-search-field>.sp-record-search-label {
  font-size:1rem;
  font-weight:bold;
  padding:.25rem .5rem;
  word-break:break-all;
  -webkit-box-sizing:border-box;
  box-sizing:border-box;
  color:#555555;
}

.sp-record-search-container .sp-record-search-field>.sp-record-search-data {
  padding:.25rem .5rem;
  -webkit-box-sizing:border-box;
  box-sizing:border-box;
  margin: auto;
}

.sp-record-search-container .sp-form-noted {
  font-size:.8rem;
  color:#808080;
  word-break:break-all;
  margin-top:.5rem;
}

.sp-record-search-container .sp-form-control {
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  font-family:inherit;
  font-size:1rem;
  line-height:1.5;
  padding:.3rem .7rem;
  color:#333333;
  background: var(--search-input-color);
  -webkit-box-sizing:border-box;
  box-sizing:border-box;
  width:100%;
  height:42px;
  outline:none;
  border:none;
  border-radius:calc(var(--search-border-radius) / 1.2);
  box-shadow:0 0 0 1px var(--search-input-border-color);
}

.sp-record-search-container .sp-form-control:focus {
  box-shadow:0 0 0 2px var(--main-color);
}

.sp-record-search-container .sp-form-control::-webkit-input-placeholder { color:#aaaaaa; }

.sp-record-search-container .sp-form-control::-moz-placeholder { color:#aaaaaa; }

.sp-record-search-container .sp-form-control:-ms-input-placeholder { color:#aaaaaa; }

.sp-record-search-container .sp-form-control::-ms-input-placeholder { color:#aaaaaa; }

.sp-record-search-container .sp-form-control::placeholder { color:#aaaaaa; }

.sp-record-search-container textarea.sp-form-control { resize:vertical; }

.sp-record-search-container select.sp-form-control,
.sp-record-search-container option.sp-form-control {
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  padding-right:1.5rem;
}

.sp-record-search-container select.sp-form-control::-ms-expand { display:none; }

.sp-record-search-container .sp-form-dropdown { position:relative; }

.sp-record-search-container .sp-form-dropdown-icon {
  display:block;
  position:absolute;
  top:1rem;
  right:.5rem;
  line-height:0;
  pointer-events:none;
}

.sp-record-search-container .sp-form-dropdown-icon:after {
  content:"";
  display:block;
  border-top:.333rem solid #888888;
  border-right:.333rem solid transparent;
  border-left:.333rem solid transparent;
}

.sp-record-search-container .sp-form-selection {
  display:block;
  margin: 0 .5rem 0 0;
  padding:0 .8rem 0 0;
}

.sp-record-search-container .sp-form-selection-horizontal {
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-orient:horizontal;
  -webkit-box-direction:normal;
  -ms-flex-flow:row wrap;
  flex-flow:row wrap;
}

.sp-record-search-container .sp-form-selection-label { vertical-align:middle; }

.sp-record-search-container .sp-form-selection>input[type="checkbox"] {
  vertical-align:middle;
  margin-left:0;
}

.sp-record-search-container .sp-form-selection>input[type="checkbox"] {
  display: none;
  vertical-align:
  middle;
  margin-left:0;
}

.sp-record-search-container .sp-form-selection-label {
  display: inline-block;
  position: relative;
  vertical-align: middle;
  padding: 4px 0;
}

.sp-record-search-container .sp-form-selection>input[type="checkbox"]+.sp-form-selection-label::before{
  display: inline-block;
  content:"";
  position: relative;
  box-sizing: border-box;
  top: 4px;
  margin-right: 6px;
  width: 20px;
  height: 20px;
  background: #ffffff;
  border:10px solid #ffffff;
  box-shadow: 0 0 0 1px var(--search-input-border-color);
}

.sp-record-search-container .sp-form-selection>input[type="checkbox"]+.sp-form-selection-label::before {
  border-radius: min(calc(var(--search-border-radius) / 1.2), 4px);
}

.sp-record-search-container .sp-form-selection>input[type="checkbox"]+.sp-form-selection-label::before{
  background: var(--search-input-color);
  border:10px solid var(--search-input-color);
}

.sp-record-search-container .sp-form-selection>input[type="checkbox"]:hover+.sp-form-selection-label::before{
  border:10px solid #dddddd;
}

.sp-record-search-container .sp-form-selection>input[type="checkbox"]+.sp-form-selection-label::after{
  border-right: 3px solid var(--main-color);
  border-bottom: 3px solid var(--main-color);
  content: '';
  display: inline-block;
  width: 6px;
  height: 10px;
  left: 9px;
  margin-top: -7px;
  position: absolute;
  top: 50%;
  transform: rotate(45deg);
  opacity: 0;
}

.sp-record-search-container .sp-form-selection>input[type="checkbox"]:checked+.sp-form-selection-label::after{
  left: 6px;
  opacity: 1;
}

.sp-record-search-container .sp-form-datetimes,
.sp-record-search-container .sp-form-date,
.sp-record-search-container .sp-form-time,
.sp-record-search-container .sp-form-timezone {
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-orient:horizontal;
  -webkit-box-direction:normal;
  -ms-flex-flow:row wrap;
  flex-flow:row wrap;
  -webkit-box-align:center;
  -ms-flex-align:center;
  align-items:center;
}

.sp-record-search-container .sp-form-datetime,
.sp-record-search-container .sp-form-date,
.sp-record-search-container .sp-form-time,
.sp-record-search-container .sp-form-timezone {
  margin-right:.5rem;
  -ms-flex-wrap:nowrap;
  flex-wrap:nowrap;
}

.sp-record-search-container .sp-form-datetime { max-width:20rem; }

.sp-record-search-container .sp-form-date-separator {
  text-align:center;
  -ms-flex-negative:0;
  flex-shrink:0;
  margin:auto .5rem;
}

.sp-record-search-container .sp-form-date>input,
.sp-record-search-container .sp-form-time>input { max-width:9rem; }

.sp-record-search-container .sp-search-button {
  color:#ffffff;
  background-color: var(--main-color);
  border:1.0px solid var(--main-color);
  border-radius:calc(var(--search-border-radius) / 1.2);
}

.sp-record-search-container .sp-form-interaction {
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -ms-flex-wrap:wrap;
  flex-wrap:wrap;
  margin-top:.5rem;
}

.sp-record-search-container .sp-form-interaction>button {
  -webkit-box-flex:1;
  -ms-flex-positive:1;
  flex-grow:1;
  cursor:pointer;
  font-size:1rem;
  line-height:1.5;
  margin:.5rem;
  padding:.375rem 0;
  text-align:center;
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
  white-space:nowrap;
}

@media (min-width:768px) {
  .sp-record-search-container {
    padding:2rem 2rem 1rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
    width:clamp(452px, 60%, 800px);
    font-size: 1rem;
  }

  .sp-record-search-container .sp-record-search-field>.sp-record-search-label {
    font-size:1rem;
  }

  .sp-record-search-container .sp-record-search-field>.sp-record-search-data {
    font-size:1rem;
  }

  .sp-record-search-container .sp-form-control {
    font-size:.9rem;
    padding:.27rem .63rem;
  }

  .sp-record-search-container .sp-form-selection-vertical {
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-orient:vertical;
    -webkit-box-direction:normal;
    -ms-flex-direction:column;
    flex-direction:column;
  }

  .sp-record-search-container .sp-form-interaction {
    -webkit-box-pack:center;
    -ms-flex-pack:center;
    justify-content:center;
    margin-top:1rem;
  }

  .sp-record-search-container .sp-form-interaction>button {
    -webkit-box-flex:0;
    -ms-flex-positive:0;
    flex-grow:0;
    padding:.375rem 5rem;
  }
}

.sp-record-search-group {
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-orient:vertical;
  -webkit-box-direction:normal;
  -ms-flex-direction:column;
  flex-direction:column;
}

.sp-record-search-group>.sp-record-search-label {
  font-size:1.15em;
  font-weight:bold;
  padding:.25em .5em;
  word-break:break-all;
  box-sizing:border-box;
  color:#333333;
}

.sp-record-search-group>.sp-record-search-field {
  display:block;
  padding:.25em;
}

.sp-record-search-group>.sp-record-search-field>.sp-record-search-data {
  width:auto;
  padding:0;
}

.sp-record-search-group>.sp-record-search-field {
  border-bottom:none;
}

.sp-record-search-group>.sp-record-search-field>.sp-record-search-label {
  font-size:.9em;
  font-weight:normal;
  width:auto;
  padding:0;
  word-break:break-all;
  display:inline-block;
  margin-bottom:0.2em;
}

@media (min-width:768px) {

  .sp-record-search-group {
    -webkit-box-orient:horizontal;
    -webkit-box-direction:normal;
    -ms-flex-flow:row wrap;
    flex-flow:row wrap;
  }

  .sp-record-search-group>.sp-record-search-label {
    font-size:1em;
    width:100%;
  }

  .sp-record-search-group>.sp-record-search-data {
    font-size:1em;
    width:70%;
  }

  .sp-record-search-group>.sp-record-search-data {
    -webkit-box-orient:horizontal;
    -webkit-box-direction:normal;
    -ms-flex-flow:row wrap;
    flex-flow:row wrap;
  }
}

<!-- ヘッダ -->
<sp:block name="fcb0xxxx"></sp:block>
<!-- 物件詳細 -->
<h1>物件詳細ページ</h1>
<sp:block name="rib0xxxx"></sp:block>
<th:block th:if="${cp.result.value['check']} eq 0">
    <div class="sp-record-list-card-actions　sp-record-list-container sp-record-list-table sp-url-button">
        <a class="url-button button-l" th:href="${pages['p0xxxx']?.path ?:'/404'}">戻る</a>
    </div>
</th:block>

<th:block th:if="${cp.result.value['check']} eq 1">
    <div class="sp-record-list-card-actions　sp-record-list-container sp-record-list-table sp-url-button">
        <a class="url-button button-l" th:href="${pages['p0xxxx']?.path ?:'/404'}">戻る</a>
        <a class="url-button button-r" th:href="${cp.result.value['recordInfo']}">資料請求</a>
    </div>

    <!-- 予約日検索 -->
    <sp:block name="rsb0xxxx"></sp:block>
    <!-- 予約可能日一覧 -->
    <h2>予約をする場合は、「空席」または「残りわずか」を押してください。<br>※満席は予約できませんので、ご了承ください。<br>※当日分の予約に関しては、電話で承っております。</h2>
    <sp:block name="rlb0xxxx"></sp:block>
    <div class="sp-record-list-container sp-record-list-table sp-url-button">
        <a class="url-button button-l" th:href="${pages['p0xxxx']?.path ?:'/404'}">戻る</a>
        <a class="url-button button-r" th:href="${cp.result.value['recordInfo']}">資料請求</a>
    </div>
</th:block>
<!-- フッター -->
<sp:block name="fcb0xxxx"></sp:block>

h2 {
    text-align: center;
}

h1 {
    text-align: center;
}

.reserve_attention {
    display: block;
    text-align: center;
    margin: 0.5rem 0;
}

.url-button {
    width: auto;
    /* font-size:0.875rem; */
    padding:0.5rem 0;
    text-align:center;
    text-decoration:none;
    flex: 1;

    color: #ffffff;
    background-color: #0D60DB;
    border: 1.0px solid #0D60DB;
    border-radius: calc(12px / 1.2);
}

.button-l {
    padding:0.5rem 6%;
    margin-right: 0.5rem;
}

.button-r {
    padding:0.5rem 5%;
    margin-left: 0.5rem;
}

.button {
    padding:0.5rem 5%;
}

.sp-url-button {
    text-align: center;
    width: auto;
    margin: 1.5rem auto;
    /* border: 1px solid #dddddd; */
}

<?php
//------------------------------
// API設定
//------------------------------
//------------------------------
// 設定値
//------------------------------
define("API_URL", "https://api.spiral-platform.com/v1");
define("API_KEY", "APIキー"); //APIキー
define("APP_ROLE", "アプリロール"); //API権限を持つアプリロール識別名
define("DB_ID", "DBID"); //物件マスタDBID
define("APP_ID", "アプリID"); //モデルルーム予約管理アプリID

//------------------------------
// 残席数表示設定値
//------------------------------
$SPIRAL->setTHValue("SEAT_NUM_AVAIL_MESSAGE", "空席"); //残席数がたくさんある場合に表示するメッセージ
$SPIRAL->setTHValue("SEAT_NUM_FEW_MESSAGE", "残りわずか"); //残席数が少しの場合の表示するメッセージ
$SPIRAL->setTHValue("SEAT_NUM_FULL_MESSAGE", "満員"); //残席数が0の場合の表示するメッセージ
$SPIRAL->setTHValue("SEAT_NUM_AVAIL", array("0","1","2","3")); //残席数比較用（残席数が4～）
$SPIRAL->setTHValue("SEAT_NUM_FEW", array("1","2","3")); //残席数比較用（残席数が1~3）
$SPIRAL->setTHValue("SEAT_NUM_FULL", "0"); //残席数比較用（残席数が0）

$record = $SPIRAL->getParam("record");

$record_url = "/認証エリアの識別名/資料請求ページの識別名" . "?record=" . $record;
$SPIRAL->setTHValue("recordInfo", $record_url);

//------------------------------
// API実行
//------------------------------
// 物件ID確認
$commonBase = CommonBase::getInstance();

//------------------------------
// ページ表示設定
//------------------------------
$record = explode(".", $SPIRAL->getParam("record"));//レコードアイテムブロックが表示された時、URLクエリパラメータから「レコードID」を取得。
$recordId = $record[1];

$property_Id = $SPIRAL->getParam("rlb0xxxx_q_f0xx");//レコードリストブロックが表示された時、URLクエリパラメータから「物件ID」を取得。

$resultRecordSelect = $commonBase->apiCurlAction("GET", "/apps/". APP_ID. "/dbs/". DB_ID. "/records/". $recordId);

$check = 0;
if($property_Id == $resultRecordSelect['item']['propertyID']){
    $check = 1;
}

$SPIRAL->setTHValue("check", $check);//Thymeleafに比較結果をセット

//------------------------------
// 共通モジュール
//------------------------------
class CommonBase {
    /**
     * シングルトンインスタンス
     * @var UserManager
     */
    protected static $singleton;

    public function __construct() {
        if (self::$singleton) {
            throw new Exception('must be singleton');
        }
        self::$singleton = $this;
    }
    /**
     * シングルトンインスタンスを返す
     * @return UserManager
     */
    public static function getInstance() {
        if (!self::$singleton) {
            return new CommonBase();
        } else {
            return self::$singleton;
        }
    }
    /**
     * V2用 API送信ロジック
     * @return Result
     */
    function apiCurlAction($method, $addUrlPass, $data = null, $multiPart = null, $jsonDecode = null) {
        $header = array(
            "Authorization:Bearer ". API_KEY,
            "X-Spiral-Api-Version: 1.1",
        );
        if($multiPart) {
            $header = array_merge($header, array($multiPart));
        } else {
            $header = array_merge($header, array("Content-Type:application/json"));
        }
        if(APP_ROLE){
			$header = array_merge($header, array("X-Spiral-App-Role: ".APP_ROLE));
		}
        // curl
        $curl = curl_init();
        curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
        curl_setopt($curl, CURLOPT_URL, API_URL. $addUrlPass);
        curl_setopt($curl, CURLOPT_HTTPHEADER, $header);
        if ($method == "POST") {
            if ($multiPart) {
                curl_setopt($curl, CURLOPT_POSTFIELDS, $data);
            } else {
                curl_setopt($curl, CURLOPT_POSTFIELDS , json_encode($data));
            }
            curl_setopt($curl, CURLOPT_CUSTOMREQUEST, $method);
        }
        if ($method == "PATCH") {
            curl_setopt($curl, CURLOPT_POSTFIELDS, json_encode($data));
            curl_setopt($curl, CURLOPT_CUSTOMREQUEST, $method);
        }
        if ($method == "DELETE") {
            curl_setopt($curl, CURLOPT_POSTFIELDS, json_encode($data));
            curl_setopt($curl, CURLOPT_CUSTOMREQUEST, $method);
        }
        $response = curl_exec($curl);
        if (curl_errno($curl)) echo curl_error($curl);
        curl_close($curl);
        if($jsonDecode){
			return $response;
		}else{
            return json_decode($response, true);
		}
    }
}
?>

<div class="sp-form-container">
  <div class="sp-step-flow-f24431">
    <div class="large-setting arrow sp-clearfix">
      <div class="step active" title="入力">
        <span>入力</span>
      </div>
      <div class="step" title="確認">
        <span>確認</span>
      </div>
      <div class="step" title="完了">
        <span>完了</span>
      </div>
    </div>
    <div class="small-setting arrow sp-clearfix">
      <div class="step active" title="入力">
        <span>入力</span>
      </div>
      <div class="step" title="確認">
        <span>確認</span>
      </div>
      <div class="step" title="完了">
        <span>完了</span>
      </div>
    </div>
  </div>
  <div class="sp-form-item sp-form-html" th:inline="none"><p><span style="font-size: 18pt;">内覧予約登録フォーム</span></p></div>
  <div class="sp-form-item sp-form-html" th:inline="none">必要事項をご入力の上、「確認画面へ」ボタンを押してください</div>
  <!--/* 名前(name) */-->
  <sp:input-field name="f0xx"></sp:input-field>
  <div class="sp-form-item sp-form-field">
    <div class="sp-form-label">
      <th:block th:text="${fields['f0xx'].label}">
        Label
      </th:block>
      <span class="sp-form-required" th:if="${fields['f0xx'].required}" th:text="${fields['f0xx'].requiredIndicator}">*</span>
    </div>
    <div class="sp-form-data">
      <input type="text" class="sp-form-control" th:name="${fields['f0xx'].name}" th:placeholder="${fields['f0xx'].placeholder}" th:value="|${inputs['f0xx'] ?:'スパイラル太郎'}|" th:if="${fields['f0xx'].control == 'text'}">
      <!--ZipCode Option-->
      <div class="sp-form-zip-code" th:if="${fields['f0xx'].control == 'zipCode'}">
        <input type="text" class="sp-form-control" th:name="${fields['f0xx'].name}" th:placeholder="${fields['f0xx'].placeholder}" th:value="${inputs['f0xx']}">
        <button class="sp-form-zip-code-button" th:data-zipcode="|zipCodeSearch${fields['f0xx'].name}|" th:if="${fields['f0xx'].addressByZipCode != null}" th:text="${fields['f0xx'].zipCodeButtonLabel}">住所検索</button>
      </div>
      <span class="sp-form-noted" th:if="${fields['f0xx'].help != null}" th:text="${fields['f0xx'].help}">Help text</span>
      <span class="sp-form-error" th:data-zipcode="|zipCodeError${fields['f0xx'].name}|" th:text="${errors['f0xx']?.message}">Error message</span>
    </div>
  </div>
  <!--/* メールアドレス(mail) */-->
  <sp:input-field name="f0xx"></sp:input-field>
  <div class="sp-form-item sp-form-field">
    <div class="sp-form-label">
      <th:block th:text="${fields['f0xx'].label}">
        Label
      </th:block>
      <span class="sp-form-required" th:if="${fields['f0xx'].required}" th:text="${fields['f0xx'].requiredIndicator}">*</span>
    </div>
    <div class="sp-form-data">
      <input type="email" class="sp-form-control" th:name="${fields['f0xx'].name}" th:placeholder="${fields['f0xx'].placeholder}" th:value="|${inputs['f0xx'] ?:'sample@spiral-platform.co.jp'}|">
      <div th:if="${fields['f0xx'].collation}">
        <span class="sp-form-email-reenter" th:text="${fields['f0xx'].reenterLabel}">Re-enter to confirm</span>
        <input type="email" class="sp-form-control" th:name="${fields['f0xx:reenter'].name}" th:placeholder="${fields['f0xx'].placeholder}" th:value="|${inputs['f0xx'] ?:'sample@spiral-platform.co.jp'}|">
      </div>
      <span class="sp-form-noted" th:if="${fields['f0xx'].help != null}" th:text="${fields['f0xx'].help}">Help text</span>
      <span class="sp-form-error" th:if="${errors['f0xx'] != null}" th:text="${errors['f0xx'].message}">Error message</span>
    </div>
  </div>
  <!--/* 都道府県(pref) */-->
  <sp:input-field name="f0xx"></sp:input-field>
  <div class="sp-form-item sp-form-field">
    <div class="sp-form-label">
      <th:block th:text="${fields['f0xx'].label}">
        Label
      </th:block>
      <span class="sp-form-required" th:if="${fields['f0xx'].required}" th:text="${fields['f0xx'].requiredIndicator}">*</span>
    </div>
    <div class="sp-form-data">
        <div class="sp-form-dropdown">
        <select class="sp-form-control" th:name="${fields['f0xx'].name}">
          <option value="" th:text="${fields['f0xx'].unselectedLabel}" th:selected="${inputs['f0xx'] == null}">Select option</option>
          <option th:each="option : ${fields['f0xx'].options}" th:value="${option.id}" th:text="${option.label}" th:selected="${inputs['f0xx'] == #strings.toString(option.id)}">Item</option>
        </select>
        <span class="sp-form-dropdown-icon"></span>
        </div>
      <span class="sp-form-noted" th:if="${fields['f0xx'].help != null}" th:text="${fields['f0xx'].help}">Help text</span>
      <span class="sp-form-error" th:if="${errors['f0xx'] != null}" th:text="${errors['f0xx'].message}">Error message</span>
    </div>
  </div>
  <!--/* 郵便番号(zipCode) */-->
  <sp:input-field name="f0xx"></sp:input-field>
  <div class="sp-form-item sp-form-field">
    <div class="sp-form-label">
      <th:block th:text="${fields['f0xx'].label}">
        Label
      </th:block>
      <span class="sp-form-required" th:if="${fields['f0xx'].required}" th:text="${fields['f0xx'].requiredIndicator}">*</span>
    </div>
    <div class="sp-form-data">
      <input type="text" class="sp-form-control" th:name="${fields['f0xx'].name}" th:placeholder="${fields['f0xx'].placeholder}" th:value="${inputs['f0xx']}" th:if="${fields['f0xx'].control == 'text'}">
      <!--ZipCode Option-->
      <div class="sp-form-zip-code" th:if="${fields['f0xx'].control == 'zipCode'}">
        <input type="text" class="sp-form-control" th:name="${fields['f0xx'].name}" th:placeholder="${fields['f0xx'].placeholder}" th:value="${inputs['f0xx']}">
        <button class="sp-form-zip-code-button" th:data-zipcode="|zipCodeSearch${fields['f0xx'].name}|" th:if="${fields['f0xx'].addressByZipCode != null}" th:text="${fields['f0xx'].zipCodeButtonLabel}">住所検索</button>
      </div>
      <span class="sp-form-noted" th:if="${fields['f0xx'].help != null}" th:text="${fields['f0xx'].help}">Help text</span>
      <span class="sp-form-error" th:data-zipcode="|zipCodeError${fields['f0xx'].name}|" th:text="${errors['f0xx']?.message}">Error message</span>
    </div>
  </div>
  <!--/* 市区町村(municipalities) */-->
  <sp:input-field name="f0xx"></sp:input-field>
  <div class="sp-form-item sp-form-field">
    <div class="sp-form-label">
      <th:block th:text="${fields['f0xx'].label}">
        Label
      </th:block>
      <span class="sp-form-required" th:if="${fields['f0xx'].required}" th:text="${fields['f0xx'].requiredIndicator}">*</span>
    </div>
    <div class="sp-form-data">
      <input type="text" class="sp-form-control" th:name="${fields['f0xx'].name}" th:placeholder="${fields['f0xx'].placeholder}" th:value="|${inputs['f0xx'] ?:'港区赤坂2丁目'}|" th:if="${fields['f0xx'].control == 'text'}">
      <!--ZipCode Option-->
      <div class="sp-form-zip-code" th:if="${fields['f0xx'].control == 'zipCode'}">
        <input type="text" class="sp-form-control" th:name="${fields['f0xx'].name}" th:placeholder="${fields['f0xx'].placeholder}" th:value="${inputs['f0xx']}">
        <button class="sp-form-zip-code-button" th:data-zipcode="|zipCodeSearch${fields['f0xx'].name}|" th:if="${fields['f0xx'].addressByZipCode != null}" th:text="${fields['f0xx'].zipCodeButtonLabel}">住所検索</button>
      </div>
      <span class="sp-form-noted" th:if="${fields['f0xx'].help != null}" th:text="${fields['f0xx'].help}">Help text</span>
      <span class="sp-form-error" th:data-zipcode="|zipCodeError${fields['f0xx'].name}|" th:text="${errors['f0xx']?.message}">Error message</span>
    </div>
  </div>
  <!--/* 番地(block) */-->
  <sp:input-field name="f0xx"></sp:input-field>
  <div class="sp-form-item sp-form-field">
    <div class="sp-form-label">
      <th:block th:text="${fields['f0xx'].label}">
        Label
      </th:block>
      <span class="sp-form-required" th:if="${fields['f0xx'].required}" th:text="${fields['f0xx'].requiredIndicator}">*</span>
    </div>
    <div class="sp-form-data">
      <input type="text" class="sp-form-control" th:name="${fields['f0xx'].name}" th:placeholder="${fields['f0xx'].placeholder}" th:value="|${inputs['f0xx'] ?:'9番11号'}|" th:if="${fields['f0xx'].control == 'text'}">
      <!--ZipCode Option-->
      <div class="sp-form-zip-code" th:if="${fields['f0xx'].control == 'zipCode'}">
        <input type="text" class="sp-form-control" th:name="${fields['f0xx'].name}" th:placeholder="${fields['f0xx'].placeholder}" th:value="${inputs['f0xx']}">
        <button class="sp-form-zip-code-button" th:data-zipcode="|zipCodeSearch${fields['f0xx'].name}|" th:if="${fields['f0xx'].addressByZipCode != null}" th:text="${fields['f0xx'].zipCodeButtonLabel}">住所検索</button>
      </div>
      <span class="sp-form-noted" th:if="${fields['f0xx'].help != null}" th:text="${fields['f0xx'].help}">Help text</span>
      <span class="sp-form-error" th:data-zipcode="|zipCodeError${fields['f0xx'].name}|" th:text="${errors['f0xx']?.message}">Error message</span>
    </div>
  </div>
  <!--/* マンション・ビル名(building) */-->
  <sp:input-field name="f0xx"></sp:input-field>
  <div class="sp-form-item sp-form-field">
    <div class="sp-form-label">
      <th:block th:text="${fields['f0xx'].label}">
        Label
      </th:block>
      <span class="sp-form-required" th:if="${fields['f0xx'].required}" th:text="${fields['f0xx'].requiredIndicator}">*</span>
    </div>
    <div class="sp-form-data">
      <input type="text" class="sp-form-control" th:name="${fields['f0xx'].name}" th:placeholder="${fields['f0xx'].placeholder}" th:value="|${inputs['f0xx'] ?:'オリックス赤坂2丁目ビル'}|" th:if="${fields['f0xx'].control == 'text'}">
      <!--ZipCode Option-->
      <div class="sp-form-zip-code" th:if="${fields['f0xx'].control == 'zipCode'}">
        <input type="text" class="sp-form-control" th:name="${fields['f0xx'].name}" th:placeholder="${fields['f0xx'].placeholder}" th:value="${inputs['f0xx']}">
        <button class="sp-form-zip-code-button" th:data-zipcode="|zipCodeSearch${fields['f0xx'].name}|" th:if="${fields['f0xx'].addressByZipCode != null}" th:text="${fields['f0xx'].zipCodeButtonLabel}">住所検索</button>
      </div>
      <span class="sp-form-noted" th:if="${fields['f0xx'].help != null}" th:text="${fields['f0xx'].help}">Help text</span>
      <span class="sp-form-error" th:data-zipcode="|zipCodeError${fields['f0xx'].name}|" th:text="${errors['f0xx']?.message}">Error message</span>
    </div>
  </div>
  <!--/* 電話番号(phone) */-->
  <sp:input-field name="f0xx"></sp:input-field>
  <div class="sp-form-item sp-form-field">
    <div class="sp-form-label">
      <th:block th:text="${fields['f0xx'].label}">
        Label
      </th:block>
      <span class="sp-form-required" th:if="${fields['f0xx'].required}" th:text="${fields['f0xx'].requiredIndicator}">*</span>
    </div>
    <div class="sp-form-data">
      <div class="sp-form-phone">
        <div class="sp-form-dropdown" th:if="${fields['f0xx'].countryCode == null}">
          <select class="sp-form-control" th:name="${fields['f0xx:countryCode'].name}">
            <option value="" th:text="${fields['f0xx'].unselectedCodeLabel}" th:selected="${inputs['f0xx:countryCode'] == null}">Select option</option>
            <option th:each="countryCode : ${fields['f0xx'].countryCodes}" th:value="${countryCode.country.alpha2Code}" th:text="|${countryCode.country.alpha2Code}(+${countryCode.code})|" th:selected="${inputs['f0xx:countryCode'] == countryCode.country.alpha2Code}">Item</option>
          </select>
          <span class="sp-form-dropdown-icon"></span>
        </div>
        <input type="tel" class="sp-form-control" th:name="${fields['f0xx'].name}" th:placeholder="${fields['f0xx'].placeholder}" th:value="${inputs['f0xx']}">
      </div>
      <span class="sp-form-noted" th:if="${fields['f0xx'].help != null}" th:text="${fields['f0xx'].help}">Help text</span>
      <span class="sp-form-error" th:if="${errors['f0xx'] != null}" th:text="${errors['f0xx'].message}">Error message</span>
    </div>
  </div>
    <!--/* 職業(occupation) */-->
    <sp:input-field name="f0xx"></sp:input-field>
    <div class="sp-form-item sp-form-field">
      <div class="sp-form-label">
        <th:block th:text="${fields['f0xx'].label}">
          Label
        </th:block>
        <span class="sp-form-required" th:if="${fields['f0xx'].required}" th:text="${fields['f0xx'].requiredIndicator}">*</span>
      </div>
      <div class="sp-form-data">
         <div class="sp-form-dropdown">
          <select class="sp-form-control" th:name="${fields['f0xx'].name}">
            <option value="" th:text="${fields['f0xx'].unselectedLabel}" th:selected="${inputs['f0xx'] == null}">Select option</option>
            <option th:each="option : ${fields['f0xx'].options}" th:value="${option.id}" th:text="${option.label}" th:selected="${inputs['f0xx'] == #strings.toString(option.id)}">Item</option>
          </select>
          <span class="sp-form-dropdown-icon"></span>
          </div>
        <span class="sp-form-noted" th:if="${fields['f0xx'].help != null}" th:text="${fields['f0xx'].help}">Help text</span>
        <span class="sp-form-error" th:if="${errors['f0xx'] != null}" th:text="${errors['f0xx'].message}">Error message</span>
      </div>
    </div>
  <!--/* 希望占有面積(occupiedArea) */-->
  <sp:input-field name="f0xx"></sp:input-field>
  <div class="sp-form-item sp-form-field">
    <div class="sp-form-label">
      <th:block th:text="${fields['f0xx'].label}">
        Label
      </th:block>
      <span class="sp-form-required" th:if="${fields['f0xx'].required}" th:text="${fields['f0xx'].requiredIndicator}">*</span>
    </div>
    <div class="sp-form-data">
       <div class="sp-form-dropdown">
        <select class="sp-form-control" th:name="${fields['f0xx'].name}">
          <option value="" th:text="${fields['f0xx'].unselectedLabel}" th:selected="${inputs['f0xx'] == null}">Select option</option>
          <option th:each="option : ${fields['f0xx'].options}" th:value="${option.id}" th:text="${option.label}" th:selected="${inputs['f0xx'] == #strings.toString(option.id)}">Item</option>
        </select>
        <span class="sp-form-dropdown-icon"></span>
        </div>
      <span class="sp-form-noted" th:if="${fields['f0xx'].help != null}" th:text="${fields['f0xx'].help}">Help text</span>
      <span class="sp-form-error" th:if="${errors['f0xx'] != null}" th:text="${errors['f0xx'].message}">Error message</span>
    </div>
  </div>
  <!--/* ご予算(budget) */-->
  <sp:input-field name="f0xx"></sp:input-field>
  <div class="sp-form-item sp-form-field">
    <div class="sp-form-label">
      <th:block th:text="${fields['f0xx'].label}">
        Label
      </th:block>
      <span class="sp-form-required" th:if="${fields['f0xx'].required}" th:text="${fields['f0xx'].requiredIndicator}">*</span>
    </div>
    <div class="sp-form-data">
       <div class="sp-form-dropdown">
        <select class="sp-form-control" th:name="${fields['f0xx'].name}">
          <option value="" th:text="${fields['f0xx'].unselectedLabel}" th:selected="${inputs['f0xx'] == null}">Select option</option>
          <option th:each="option : ${fields['f0xx'].options}" th:value="${option.id}" th:text="${option.label}" th:selected="${inputs['f0xx'] == #strings.toString(option.id)}">Item</option>
        </select>
        <span class="sp-form-dropdown-icon"></span>
        </div>
      <span class="sp-form-noted" th:if="${fields['f0xx'].help != null}" th:text="${fields['f0xx'].help}">Help text</span>
      <span class="sp-form-error" th:if="${errors['f0xx'] != null}" th:text="${errors['f0xx'].message}">Error message</span>
    </div>
  </div>
  <!--/* 入居予定人数(residentNum) */-->
  <sp:input-field name="f0xx"></sp:input-field>
  <div class="sp-form-item sp-form-field">
    <div class="sp-form-label">
      <th:block th:text="${fields['f0xx'].label}">
        Label
      </th:block>
      <span class="sp-form-required" th:if="${fields['f0xx'].required}" th:text="${fields['f0xx'].requiredIndicator}">*</span>
    </div>
    <div class="sp-form-data">
       <div class="sp-form-dropdown">
        <select class="sp-form-control" th:name="${fields['f0xx'].name}">
          <option value="" th:text="${fields['f0xx'].unselectedLabel}" th:selected="${inputs['f0xx'] == null}">Select option</option>
          <option th:each="option : ${fields['f0xx'].options}" th:value="${option.id}" th:text="${option.label}" th:selected="${inputs['f0xx'] == #strings.toString(option.id)}">Item</option>
        </select>
        <span class="sp-form-dropdown-icon"></span>
        </div>
      <span class="sp-form-noted" th:if="${fields['f0xx'].help != null}" th:text="${fields['f0xx'].help}">Help text</span>
      <span class="sp-form-error" th:if="${errors['f0xx'] != null}" th:text="${errors['f0xx'].message}">Error message</span>
    </div>
  </div>
  <!--/* 来場人数(visitorNum) */-->
  <sp:input-field name="f0xx"></sp:input-field>
  <div class="sp-form-item sp-form-field">
    <div class="sp-form-label">
      <th:block th:text="${fields['f0xx'].label}">
        Label
      </th:block>
      <span class="sp-form-required" th:if="${fields['f0xx'].required}" th:text="${fields['f0xx'].requiredIndicator}">*</span>
    </div>
    <div class="sp-form-data">
       <div class="sp-form-dropdown">
        <select class="sp-form-control" th:name="${fields['f0xx'].name}">
          <option value="" th:text="${fields['f0xx'].unselectedLabel}" th:selected="${inputs['f0xx'] == null}">Select option</option>
          <option th:each="option : ${fields['f0xx'].options}" th:value="${option.id}" th:text="${option.label}" th:selected="${inputs['f0xx'] == #strings.toString(option.id)}">Item</option>
        </select>
        <span class="sp-form-dropdown-icon"></span>
        </div>
      <span class="sp-form-noted" th:if="${fields['f0xx'].help != null}" th:text="${fields['f0xx'].help}">Help text</span>
      <span class="sp-form-error" th:if="${errors['f0xx'] != null}" th:text="${errors['f0xx'].message}">Error message</span>
    </div>
  </div>
  <!--/* 参照_物件マスタDB(propertyRef) */-->
  <sp:input-field name="f0xx"></sp:input-field>
  <!-- <div class="sp-form-item sp-form-field"> -->
    <!-- <div class="sp-form-data"> -->
      <input type="hidden" class="sp-form-control" th:name="${fields['f0xx'].name}" th:placeholder="${fields['f0xx'].placeholder}" th:value="${inputs['f0xx']} ?: (${dbs[91210] != null} ? ${dbs[91210].record['_id']} : '')">
      <span class="sp-form-noted" th:if="${fields['f0xx'].help != null}" th:text="${fields['f0xx'].help}">Help text</span>
      <span class="sp-form-error" th:if="${errors['f0xx'] != null}" th:text="${errors['f0xx'].message}">Error message</span>
    <!-- </div> -->
  <!-- </div> -->
  <div class="sp-form-item sp-form-field" th:if="${fields['f0xx'].isTemporary}">
    <div class="sp-form-label">
      <th:block th:text="${fields['f0xx'].collationLabel}">
        Label
      </th:block>
      <span class="sp-form-required" th:if="${fields['f0xx'].required}" th:text="${fields['f0xx'].requiredIndicator}">*</span>
    </div>
    <div class="sp-form-data">
      <input type="text" class="sp-form-control" th:name="${fields['f0xx'].collationName}" th:placeholder="${fields['f0xx'].placeholder.collation}" th:value="${inputs['f0xx_collation']}">
      <span class="sp-form-error" th:if="${errors['f0xx_collation'] != null}" th:text="${errors['f0xx_collation'].message}">Error message</span>
    </div>
  </div>
  <!--/* カレンダーDB_物件ID(calendarRef_roomID) */-->
  <sp:input-field name="f0xx"></sp:input-field>
    <div class="sp-form-data">
      <input type="hidden" class="sp-form-control" th:name="${fields['f0xx'].name}" th:placeholder="${fields['f0xx'].placeholder}" th:value="${cp.result.value['propID']}" th:if="${fields['f0xx'].control == 'text'}">
      
      <div class="sp-form-zip-code" th:if="${fields['f0xx'].control == 'zipCode'}">
        <input type="text" class="sp-form-control" th:name="${fields['f0xx'].name}" th:placeholder="${fields['f0xx'].placeholder}" th:value="${inputs['f0xx']}">
        <button class="sp-form-zip-code-button" th:data-zipcode="|zipCodeSearch${fields['f0xx'].name}|" th:if="${fields['f0xx'].addressByZipCode != null}" th:text="${fields['f0xx'].zipCodeButtonLabel}">住所検索</button>
      </div>
      <span class="sp-form-noted" th:if="${fields['f0xx'].help != null}" th:text="${fields['f0xx'].help}">Help text</span>
      <span class="sp-form-error" th:data-zipcode="|zipCodeError${fields['f0xx'].name}|" th:text="${errors['f0xx']?.message}">Error message</span>
    </div>
  <!--/* 予約ID(reservationID) */-->
  <sp:input-field name="f0xx"></sp:input-field>
  <div class="sp-form-data">
    <input type="hidden" class="sp-form-control" th:name="${fields['f0xx'].name}" th:placeholder="${fields['f0xx'].placeholder}" th:value="${cp.result.value['resID']}" th:if="${fields['f0xx'].control == 'text'}">
    <span class="sp-form-noted" th:if="${fields['f0xx'].help != null}" th:text="${fields['f0xx'].help}">Help text</span>
    <span class="sp-form-error" th:if="${errors['f0xx'] != null}" th:text="${errors['f0xx'].message}">Error message</span>
  </div>
  <!--/* 予約日(reservationDate) */-->
  <sp:input-field name="f0xx" control="text"></sp:input-field>
  <div class="sp-form-data">
    <input type="hidden" class="sp-form-control sp-form-datetime" th:name="${fields['f0xx'].name}" th:placeholder="${fields['f0xx'].placeholder}" th:value="${cp.result.value['resDay']}">
    <span class="sp-form-noted" th:if="${fields['f0xx'].help != null}" th:text="${fields['f0xx'].help}">Help text</span>
    <span class="sp-form-error" th:if="${errors['f0xx'] != null}" th:text="${errors['f0xx'].message}">Error message</span>
  </div>
  <!--/* 予約時間(reservationTime) */-->
  <sp:input-field name="f0xx" control="text"></sp:input-field>
  <div class="sp-form-data">
    <input type="hidden" class="sp-form-control sp-form-datetime" th:name="${fields['f0xx'].name}" th:placeholder="${fields['f0xx'].placeholder}" th:value="${cp.result.value['resTim']}">
    <span class="sp-form-noted" th:if="${fields['f0xx'].help != null}" th:text="${fields['f0xx'].help}">Help text</span>
    <span class="sp-form-error" th:if="${errors['f0xx'] != null}" th:text="${errors['f0xx'].message}">Error message</span>
  </div>
    <!--/* 個人情報保護の同意(privacyPolicy) */-->
    <sp:input-field name="f0xx"></sp:input-field>
    <div class="sp-form-item sp-form-field">
      <div class="sp-form-label">
        <th:block th:text="${fields['f0xx'].label}">
          Label
        </th:block>
        <span class="sp-form-required" th:if="${fields['f0xx'].required}" th:text="${fields['f0xx'].requiredIndicator}">*</span>
      </div>
      <div class="sp-form-data">
         <div class="sp-form-dropdown">
          <label th:each="option : ${fields['f0xx'].options}"><input type="checkbox" th:name="f0xx" th:value="${option.id}" th:checked="${inputs['f0xx'] != null ? #lists.contains(inputs['f0xx'], #strings.toString(option.id)) : false}"><span th:text="${option.label}">Item</span></label>
          </div>
        <span class="sp-form-noted" th:if="${fields['f0xx'].help != null}" th:text="${fields['f0xx'].help}">Help text</span>
        <span class="sp-form-error" th:if="${errors['f0xx'] != null}" th:text="${errors['f0xx'].message}">Error message</span>
      </div>
    </div>

  <div class="sp-form-item sp-form-interaction">
    <button class="sp-form-prev-button" type="submit" name="action" value="previous" th:if="!${step.isFirst}" th:text="${step.prevButtonLabel}">Prev</button>
    <button class="sp-form-next-button" type="submit" name="action" value="next" th:text="${step.nextButtonLabel}">Next</button>
  </div>
</div>

:root {
  /*=============================
	カスタムプロパティ
  ==============================*/
  --base-color: #FFFFFF; /* フォームブロックの背景色 */
  --main-color: #0D60DB; /* メインカラー */
  --accent-color: #B8250F; /* アクセントカラー */
  --input-color: #F5F7FA; /* 入力欄の背景色 */
  --input-border-color: #D3D6DB; /* 入力欄の枠線の色 */
  --input-radius: 12px; /* 入力欄の角の丸さ */
  --transition: 0.1s; /* アニメーション時間 */

  /*------ 合計100%になるよう調整 -------*/
  --label-width: 25%; /* ラベル部分の幅 */
  --data-width: 75%; /* データ部分の幅 */
}

.sp-record-list-card-actions {
  width: auto;
  font-size:0.875rem;
  padding:0.5rem 0;
  text-align:center;
  text-decoration:none;
  flex: 1;
}

.sp-record-list-card-actions a {
  color: #ffffff;
  background-color: #0D60DB;
  border: 1.0px solid #0D60DB;
  border-radius: calc(12px / 1.2);
  /* background-color:#ffffff; */
  font-size:0.875rem;
  padding:0.5rem 0.75rem;
  text-align:center;
  text-decoration:none;
  flex: 1;
}

.sp-form-container {
  font-size:16px;
  padding:1em;
  box-sizing:border-box;
  max-width: 960px;
  color:#505050;
  background-color:var(--base-color);
  border:1px solid #E1E5EB;
  border-radius:var(--input-radius);
}

.sp-form-container .sp-form-item:not(:last-child) {
  margin-bottom:0.5em;
  padding:0.5em 1em;
}

.sp-form-field,
.sp-form-group {
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-orient:vertical;
  -webkit-box-direction:normal;
  -ms-flex-direction:column;
  flex-direction:column;
}

.sp-form-field>.sp-form-label,
.sp-form-group>.sp-form-label {
  font-size:1.15em;
  font-weight:bold;
  padding:.25em 0;
  word-break:break-all;
  box-sizing:border-box;
  color:#333333;
}

.sp-form-group-item>.sp-form-label {
  word-break:break-all;
  display:inline-block;
  margin-bottom:.2em;
}

.sp-form-field>.sp-form-data,
.sp-form-group>.sp-form-data {
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-orient:vertical;
  -webkit-box-direction:normal;
  -ms-flex-direction:column;
  flex-direction:column;
  word-break:break-all;
  padding:0.25em 0;
  box-sizing:border-box;
}

.sp-form-group-item>.sp-form-data {
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-orient:vertical;
  -webkit-box-direction:normal;
  -ms-flex-direction:column;
  flex-direction:column;
}

.sp-form-required {
  display:inline-block;
  margin:0 .5em;
  padding: 3px 6px;
  background:var(--accent-color);
  color:#ffffff;
  line-height:1;
  border-radius:.25em;
  font-size:0.7em;
  font-weight: bold;
  vertical-align: middle;
}

.sp-form-group-item:not(:last-child) { margin-bottom:.5em; }

.sp-form-noted {
  font-size:.8em;
  color:#808080;
  word-break:break-all;
  margin-top:.5em;
  padding-left:min(calc(var(--input-radius) / 2 - 4px), 8px);
}

.sp-form-error {
  font-size:.8em;
  color:var(--accent-color);
  padding-left:min(calc(var(--input-radius) / 2 - 4px), 8px);
}

.sp-form-control {
  -moz-appearance:none;
  -webkit-appearance:none;
  -ms-progress-appearance:none;
  appearance:none;
  font-family:inherit;
  font-size:1em;
  line-height:1.5;
  padding:.3em .7em;
  padding-left:clamp(12px, calc(var(--input-radius) - 2px), 24px);
  background:var(--input-color);
  color:#333333;
  box-sizing:border-box;
  width:100%;
  height:48px;
  margin-bottom:.3em;
  border:none;
  outline:none;
  border-radius:var(--input-radius);
  box-shadow:0 0 0 0.5px var(--input-border-color);
}
.sp-form-control:focus {
  box-shadow:0 0 0 2px var(--main-color);
}
.sp-form-control[type="number"] {
  height: 36px;
}

.sp-form-control:placeholder-shown { color:#aaa; }

.sp-form-control::placeholder { color:#aaa; }

.sp-form-control::-ms-input-placeholder { color:#aaa; }

.sp-form-control:-ms-input-placeholder { color:#aaa; }

.sp-form-control:-moz-placeholder { color:#aaa; }

textarea.sp-form-control {
  resize:vertical;
  padding-top:clamp(6px, calc(var(--input-radius) / 2), 18px);
  height:calc(1.5em * 5);
}

select.sp-form-control,
option.sp-form-control {
  -moz-appearance:none;
  -webkit-appearance:none;
  -ms-progress-appearance:none;
  appearance:none;
  padding-right:1.5em;
}

.sp-form-control>option { background:#FFFFFF;}

select.sp-form-control::-ms-expand { display:none; }

.sp-form-phone .sp-form-control { max-width:20em; }

.sp-form-phone>*:not(:only-child) { margin-right:.5rem; }

.sp-form-dropdown { position:relative; }

.sp-form-dropdown-icon {
  display:block;
  position:absolute;
  top:1.3em;
  right:1em;
  line-height:0;
  pointer-events:none;
}

.sp-form-dropdown-icon:after {
  content:"";
  display:block;
  border-top:0.333em solid #888;
  border-right:.333em solid transparent;
  border-left:.333em solid transparent;
}

.sp-form-selection {
  display:block;
  cursor: pointer;
  margin-bottom:.3em;
  padding:.25em .75em .35em;
  background:var(--input-color);
  border-radius: var(--input-radius);
  box-shadow:0 0 0 0.5px var(--input-border-color) ;
}

.sp-form-selection-label {
  display: inline-block;
  position: relative;
  vertical-align:middle;
  padding: 4px 0;
}

.sp-form-datetimes,
.sp-form-date,
.sp-form-time,
.sp-form-timezone {
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-orient:horizontal;
  -webkit-box-direction:normal;
  -ms-flex-flow:row wrap;
  flex-flow:row wrap;
  -webkit-box-align:center;
  -ms-flex-align:center;
  align-items:center;
}

.sp-form-datetime,
.sp-form-date,
.sp-form-time,
.sp-form-timezone {
  margin-right:.5rem;
  -ms-flex-wrap:nowrap;
  flex-wrap:nowrap;
}

.sp-form-datetime { max-width:20em; }

.sp-form-phone {
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-orient:horizontal;
  -webkit-box-direction:normal;
  -ms-flex-flow:row wrap;
  flex-flow:row wrap;
  -webkit-box-align:center;
  -ms-flex-align:center;
  align-items:center;
}

.sp-form-date-separator {
  width:1em;
  margin-bottom: .3em;
  text-align:center;
  -ms-flex-negative:1;
  flex-shrink:0;
}

.sp-form-number { max-width:20em; }

.sp-form-email-reenter,
.sp-form-password-reenter {
  font-size:.9em;
  margin-bottom:.2em;
  padding-left:min(calc(var(--input-radius) / 2 - 4px), 8px);
}

.sp-form-html p { margin:0; }

.sp-form-interaction {
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -ms-flex-wrap:wrap;
  flex-wrap:wrap;
  margin-top:1em;
}

.sp-form-prev-button {
  color:#333333;
  background-color:var(--base-color);
  border:2.0px solid #666666;
}

.sp-form-next-button,
.sp-form-login-button {
  color:#ffffff;
  background-color:var(--main-color);
  border:none;
}

.sp-form-field .sp-form-embedded { padding-left:.25em; }

.sp-form-selection>input[type="radio"],
.sp-form-selection>input[type="checkbox"] {
  display: none;
  vertical-align:middle;
  margin-left:0;
}

.sp-form-selection>input[type="radio"]+.sp-form-selection-label::before,
.sp-form-selection>input[type="checkbox"]+.sp-form-selection-label::before{
  display: inline-block;
  content:"";
  position: relative;
  box-sizing: border-box;
  top: 4px;
  margin-right: 6px;
  width: 20px;
  height: 20px;
  background: #ffffff;
  border:10px solid #ffffff;
  box-shadow: 0 0 0 0.5px var(--input-border-color);
  transition: var(--transition);
}

.sp-form-selection>input[type="radio"]+.sp-form-selection-label::before {
  border-radius: 50%;
}

.sp-form-selection>input[type="checkbox"]+.sp-form-selection-label::before {
  border-radius: min(var(--input-radius), 4px);
}

.sp-form-selection>input[type="radio"]:checked+.sp-form-selection-label::before{
  background: var(--main-color);
  border:4px solid #ffffff;
}
.sp-form-selection>input[type="checkbox"]+.sp-form-selection-label::after{
  border-right: 3px solid var(--main-color);
  border-bottom: 3px solid var(--main-color);
  content: '';
  display: inline-block;
  width: 6px;
  height: 10px;
  left: 9px;
  margin-top: -7px;
  position: absolute;
  top: 50%;
  transform: rotate(45deg);
  opacity: 0;
  transition: var(--transition);
}

.sp-form-selection>input[type="checkbox"]:checked+.sp-form-selection-label::after{
  left: 6px;
  opacity: 1;
}

.sp-form-date>input,
.sp-form-time>input { max-width:7em; }

.sp-form-date>input[type="date"]{
  min-width: 140px;
  max-width: none;
}
.sp-form-time>input[type="time"] {
  min-width: 92px;
  max-width: none;
}

.sp-form-interaction>button {
  -webkit-box-flex:1;
  -ms-flex-positive:1;
  flex-grow:1;
  cursor:pointer;
  font-size:1em;
  font-weight:bold;
  line-height:1.5;
  margin:.5rem;
  padding:.75rem 0;
  text-align:center;
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
  white-space:nowrap;
  border-radius:var(--input-radius);
}

@media (min-width:768px) {
  .sp-form-container {
    font-size:initial;
    padding:3em;
    margin:2em auto;
  }

.sp-form-container .sp-form-item:not(:last-child) {
  margin-bottom:0.5em;
  padding-bottom:0.5em;
}

  .sp-form-field,
  .sp-form-group {
    -webkit-box-orient:horizontal;
    -webkit-box-direction:normal;
    -ms-flex-flow:row nowrap;
    flex-flow:row nowrap;
  }

  .sp-form-field>.sp-form-label,
  .sp-form-group>.sp-form-label {
    font-size:1em;
    width:var(--label-width);
    padding:.5em;
  }

  .sp-form-group .sp-form-group-item>.sp-form-label {
    font-size:.9em;
    padding-right:.5em;
  }

  .sp-form-field>.sp-form-data,
  .sp-form-group>.sp-form-data {
    font-size:1em;
    width:var(--data-width);
    padding:.5em;
  }

  .sp-form-group>.sp-form-data {
    -webkit-box-orient:horizontal;
    -webkit-box-direction:normal;
    -ms-flex-flow:row wrap;
    flex-flow:row wrap;
  }

  .sp-form-group.sp-form-group-vertical>.sp-form-data {
    -webkit-box-orient:vertical;
    -webkit-box-direction:normal;
    -ms-flex-direction:column;
    flex-direction:column;
  }

  .sp-form-required {
    font-size:0.8em;
  }

  .sp-form-group-item { padding:.25em; }

  .sp-form-group-item:not(:last-child) { margin-bottom:0; }

  .sp-form-control { font-size:.9em; }

  .sp-form-selection {
    font-size:.9em;
    margin:0 .5em 0 0;
    padding-right:1em;
    background:none;
    box-shadow:none;
  }
  .sp-form-selection-vertical>.sp-form-selection {
    margin:0 auto 0 0;
    padding-right: 4em;
  }

  .sp-form-selection-vertical {
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-orient:vertical;
    -webkit-box-direction:normal;
    -ms-flex-direction:column;
    flex-direction:column;
  }

  .sp-form-selection-horizontal {
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-orient:horizontal;
    -webkit-box-direction:normal;
    -ms-flex-flow:row wrap;
    flex-flow:row wrap;
  }

  .sp-form-interaction {
    justify-content:center;
    margin-top:2em;
  }

  .sp-form-embedded { font-size:.9em; }

  .sp-form-group-item .sp-form-embedded { padding-right:5em; }

  .sp-form-selection>input[type="radio"]+.sp-form-selection-label::before,
  .sp-form-selection>input[type="checkbox"]+.sp-form-selection-label::before{
    background: var(--input-color);
    border:10px solid var(--input-color);
  }

  .sp-form-selection>input[type="radio"]:hover+.sp-form-selection-label::before,
  .sp-form-selection>input[type="checkbox"]:hover+.sp-form-selection-label::before{
    border:10px solid #dddddd;
  }

  .sp-form-selection>input[type="radio"]:checked+.sp-form-selection-label::before{
    border:4px solid var(--input-color);
  }

  .sp-form-date>input[type="date"]{
    min-width: unset;
  }
  .sp-form-time>input[type="time"] {
    min-width: unset;
  }

  .sp-form-interaction>button {
    -webkit-box-flex:0;
    -ms-flex-positive:0;
    flex-grow:0;
    padding:.75rem 5em;
  }
}

.sp-form-recaptcha {
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-pack:start;
  -ms-flex-pack:start;
  justify-content:flex-start;
}

.sp-form-recaptcha-right {
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-pack:end;
  -ms-flex-pack:end;
  justify-content:flex-end;
}

.sp-form-recaptcha-center {
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-pack:center;
  -ms-flex-pack:center;
  justify-content:center;
}

.sp-form-file-button {
  padding:.8em 2em;
  font-weight: bold;
  cursor:pointer;
  color:#666666;
  background-color:#f6f6f6;
  border:none;
  border: solid 2px #a0a0a0;
  border-radius:var(--input-radius);
  transition: var(--transition);
  align-items: center;
  justify-content: center;
}
.sp-form-file-button::before{
  display: inline-block;
  content: url('data:image/svg+xml;utf-8,<svg fill="%23666" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M14.4,7.9l-5.7,5.7c-0.4,0.4-0.8,0.6-1.2,0.8c-0.7,0.3-1.4,0.3-2.1,0.2c-0.7-0.1-1.4-0.5-1.9-1c-0.4-0.4-0.6-0.8-0.8-1.2c-0.3-0.7-0.3-1.4-0.2-2.1c0.1-0.7,0.5-1.4,1-1.9L9.7,2c0.2-0.2,0.5-0.4,0.8-0.5c0.4-0.2,0.9-0.2,1.3-0.1C12.2,1.4,12.6,1.6,13,2c0.2,0.2,0.4,0.5,0.5,0.8c0.2,0.4,0.2,0.9,0.1,1.3c-0.1,0.4-0.3,0.8-0.6,1.2l-6.2,6.2c-0.1,0.1-0.2,0.1-0.3,0.2c-0.1,0.1-0.3,0.1-0.5,0c-0.2,0-0.3-0.1-0.4-0.2c-0.1-0.1-0.1-0.2-0.2-0.3c-0.1-0.1-0.1-0.3,0-0.5c0-0.2,0.1-0.3,0.2-0.4l5.5-5.5l-0.9-0.9L4.7,9.3C4.5,9.5,4.4,9.7,4.3,10c-0.2,0.4-0.2,0.8-0.1,1.2c0.1,0.4,0.3,0.8,0.6,1.1c0.2,0.2,0.4,0.4,0.7,0.5c0.4,0.2,0.8,0.2,1.2,0.1c0.4-0.1,0.8-0.3,1.1-0.6l6.2-6.2c0.3-0.3,0.6-0.8,0.8-1.2c0.3-0.6,0.3-1.4,0.2-2c-0.1-0.7-0.5-1.3-1-1.8c-0.3-0.3-0.8-0.6-1.2-0.8c-0.6-0.3-1.4-0.3-2-0.2C10,0.2,9.3,0.5,8.8,1L2.5,7.4C2,7.9,1.6,8.5,1.4,9.1C1,10,0.9,11,1.1,11.9c0.2,1,0.6,1.9,1.4,2.6C3,15,3.5,15.4,4.1,15.6C5.1,16,6,16.1,7,15.9c1-0.2,1.9-0.6,2.6-1.4l5.7-5.7L14.4,7.9z"/></svg>');
  margin-left: -0.5em;
  width: 16px;
  height: 100%;
  vertical-align: middle;
}

.sp-form-file-button:focus { outline:0; }

.sp-from-file-default-drag-drop-area {
  color:#333333;
  background-color:var(--input-color);
  border:2.0px dashed #6c757d;
  border-radius:0;
  width:100%;
  height:200px;
  text-align:center;
  border-radius: var(--input-radius);
}

.sp-from-file-ondraghover-drag-drop-area {
  color:#333333;
  background-color:#dddddd;
  border:2.0px dashed #6c757d;
  border-radius:0;
  width:100%;
  height:200px;
  text-align:center;
  border-radius: var(--input-radius);
}

.sp-from-file-ondragleave-drag-drop-area {
  color:#333333;
  background-color:#dddddd;
  border:2.0px dashed #6c757d;
  border-radius:0;
  width:100%;
  height:200px;
  border-radius: var(--input-radius);
}

.sp-from-file-ondrop-drag-drop-area {
  color:#333333;
  background-color:var(--input-color);
  border:2.0px dashed #6c757d;
  border-radius:0;
  width:100%;
  height:200px;
  border-radius: var(--input-radius);
}

.sp-form-embedded>.sp-file-info:last-child { padding-bottom:0; }

.sp-file-info {
  padding-top:1em;
  padding-bottom:1em;
  line-height:1.5;
}

.sp-file-info>div { width:100%; }

.main-text {
  font-size:1em;
  font-weight:bold;
}

[class^="sp-step-flow-f"] {
  margin:3em 0 2em;
  }

[class^="sp-step-flow-f"]>.large-setting {
  display:flex;
  justify-content: center;
}

[class^="sp-step-flow-f"]>.small-setting { display:none; }

[class^="sp-step-flow-f"]>.large-setting,
[class^="sp-step-flow-f"]>.small-setting {
  text-align: center;
  margin: 0 auto;
  padding: 0 20px;
}

[class^="sp-step-flow-f"]>.large-setting>.step,
[class^="sp-step-flow-f"]>.small-setting>.step {
  word-wrap: break-word;
  min-width: 0;
  text-align:center;
}

[class^="sp-step-flow-f"]>.large-setting>.step {
  flex: 1;
  margin-right:36px;
  font-size:16px;
}

[class^="sp-step-flow-f"]>.small-setting>.step {
  font-size:14px;
}

[class^="sp-step-flow-f"]>.large-setting>.step:last-child,
[class^="sp-step-flow-f"]>.small-setting>.step:last-child {
  margin-right: 0;
}

[class^="sp-step-flow-f"]>.large-setting>.step>span,
[class^="sp-step-flow-f"]>.small-setting>.step>span {
  overflow: hidden;
  text-overflow: ellipsis;
  position:relative;
  display:block;
  padding-top: 16px;
  white-space:nowrap;
  color:#D3D6DB;
  font-weight:bold;
}

[class^="sp-step-flow-f"]>.large-setting>.step>span::before,
[class^="sp-step-flow-f"]>.small-setting>.step>span::before {
  position: absolute;
  content: "";
  display: block;
  top: 0;
  width: 100%;
  background: #D3D6DB;
}

[class^="sp-step-flow-f"]>.large-setting>.step>span::before {
  height: 6px;
  border-radius: 6px;
}

[class^="sp-step-flow-f"]>.small-setting>.step>span::before {
  height: 4px;
  border-radius: 4px;
}

[class^="sp-step-flow-f"]>.large-setting>.step.active>span,
[class^="sp-step-flow-f"]>.small-setting>.step.active>span { color:var(--main-color); }

[class^="sp-step-flow-f"]>.large-setting>.step.active>span::before,
[class^="sp-step-flow-f"]>.small-setting>.step.active>span::before { background:var(--main-color); }

@media (max-width: 765px) {
  [class^="sp-step-flow-f"]>.large-setting { display:none; }

  [class^="sp-step-flow-f"]>.small-setting {
    display:flex;
    justify-content: center;
    counter-reset:step;
  }

  [class^="sp-step-flow-f"]>.small-setting>.step>span { display: none; }

  [class^="sp-step-flow-f"]>.small-setting>.step {
    display: flex;
    align-items: center;
    width: auto;
    margin: 0;
    background: none;
    color: #ffffff;
    font-weight: bold;
  }

  [class^="sp-step-flow-f"]>.small-setting>.step::before {
    counter-increment: step 1;
    content: counter(step, decimal);
    width:24px;
    height:24px;
    background: var(--main-color);
    border-radius: 50%;
    font-size: 12px;
    line-height: 24px;
  }

  [class^="sp-step-flow-f"]>.small-setting>.step:not(:last-child) { flex-grow: 1; }

  [class^="sp-step-flow-f"]>.small-setting>.step:not(:last-child)::after {
    content: "";
    width: calc(100% - 24px);
    height:2px;
    background: var(--main-color);
    vertical-align: middle;
  }

  [class^="sp-step-flow-f"]>.small-setting>.step.active::after,
  [class^="sp-step-flow-f"]>.small-setting>.step.active~.step::before,
  [class^="sp-step-flow-f"]>.small-setting>.step.active~.step::after { background:#D3D6DB; }
}

<!--/* ヘッダ */-->
<sp:block name="fcb0xxxx"></sp:block>
<h1>内覧予約ページ</h1>
<th:block th:if="${cp.result.value['step_detail']} eq 1">
    <!--/* 物件詳細 */-->
    <sp:block name="rib0xxxx"></sp:block>
    <h2>この物件の<span th:text="${cp.result.value['resDay_display']}">12345</span>の<span th:text="${cp.result.value['resTim_display']}">12345</span>の内覧予約を行います。</h2>
</th:block>
<th:block th:if="${cp.result.value['check']} eq 1">
    <!--/* 内覧予約登録フォーム */-->
    <sp:block name="ifb0xxxx"></sp:block>
</th:block>
<th:block th:if="${cp.result.value['check']} eq 0">
    <!--/* エラーメッセージ */-->
    <sp:block name="fcb0xxxx"></sp:block>
</th:block>

<!--/* フッター */-->
<sp:block name="fcb0xxxx"></sp:block>

h2 {
    text-align: center;
}

h1 {
    text-align: center;
}

.reserve_attention {
    display: block;
    text-align: center;
    margin: 0.5rem 0;
}

.url-button {
    width: auto;
    /* font-size:0.875rem; */
    padding:0.5rem 0;
    text-align:center;
    text-decoration:none;
    flex: 1;

    color: #ffffff;
    background-color: #0D60DB;
    border: 1.0px solid #0D60DB;
    border-radius: calc(12px / 1.2);
}

.button-l {
    padding:0.5rem 6%;
    margin-right: 0.5rem;
}

.button-r {
    padding:0.5rem 5%;
    margin-left: 0.5rem;
}

.button {
    padding:0.5rem 5%;
}

.sp-url-button {
    text-align: center;
    width: auto;
    margin: 1.5rem auto;
    /* border: 1px solid #dddddd; */
}

<?php
//------------------------------
// API設定
//------------------------------
//------------------------------
// 設定値
//------------------------------
define("API_URL", "https://api.spiral-platform.com/v1");
define("API_KEY", "APIキー"); //APIキー
define("APP_ROLE", "アプリロール"); //API権限を持つアプリロール識別名
define("DB_ID", "DBID"); //物件マスタDBID
define("APP_ID", "アプリID"); //モデルルーム予約管理アプリID

define("DB_ID_2", "DBID"); //カレンダーDBID

//------------------------------
// API実行
//------------------------------
// 物件ID確認
$commonBase = CommonBase::getInstance();

//------------------------------
// 物件詳細ステップ出し分け
//------------------------------
$registForm_reg = $SPIRAL->getRegistrationForm("reservation_regist");
$step_detail = $registForm_reg->getStep();
$SPIRAL->setTHValue("step_detail", $step_detail);

$param_record = explode(".", $SPIRAL->getParam("record"));//レコードアイテムブロックが表示された時、URLクエリパラメータから「レコードID」を取得。
$recordId = $param_record[1];

$param_reservation = explode("_", $SPIRAL->getParam("reservationID"));//レコードアイテムブロックが表示された時、URLクエリパラメータから「物件ID」を取得。
$property_Id = $param_reservation[0];

$resultRecordSelect = $commonBase->apiCurlAction("GET", "/apps/". APP_ID. "/dbs/". DB_ID. "/records/". $recordId);

$SPIRAL->setTHValue("property_ID", $property_Id);//Thymeleafにパラメーターの物件IDをセット
$SPIRAL->setTHValue("calender", $resultRecordSelect['item']['propertyID']);//ThymeleafにカレンダーDBのレコードをセット

$check = 0;
if($property_Id == $resultRecordSelect['item']['propertyID']){
    $check = 1;
}

$SPIRAL->setTHValue("check", $check);//Thymeleafに比較結果をセット

//カレンダーDB取得、検索

//URLパラメータの値を物件IDと予約日、予約時間に分割する処理
$reserve = str_split($param_reservation[1],10);
$serevatinDate_bef = $reserve[0];//20250109
$reservationTime_bef = explode("-", $reserve[1]);//16

// フォーマット変更用処理
$SPIRAL->setTHValue("ans1", $serevatinDate_bef);

// 時間を加工
$reservationTime = $reservationTime_bef[1] . ":00:00";
$where = "?where=@propertyID='".$property_Id."'%20AND%20@reservationDate='".$serevatinDate_bef."'%20AND%20@reservationTime='".$reservationTime."'";

$result_recordListSelect_calender = $commonBase->apiCurlAction("GET", "/apps/". APP_ID. "/dbs/". DB_ID_2. "/records". $where);

$SPIRAL->setTHValue("ans1", $result_recordListSelect_calender);

// カレンダーDBのレコードID
$recordId_calender = $result_recordListSelect_calender['items'][0]['_id'];

// カレンダーDBのレコード取得
$resultRecordSelect_calender = $commonBase->apiCurlAction("GET", "/apps/". APP_ID. "/dbs/". DB_ID_2. "/records/". $recordId_calender);

// 物件ID、予約ID、予約日、予約時間をそれぞれ変数に格納
$php_propID = $resultRecordSelect_calender["item"]["propertyID"];
$php_resID = $resultRecordSelect_calender["item"]["reservationID"];
$php_resDay = $resultRecordSelect_calender["item"]["reservationDate"];
$php_resTim = $resultRecordSelect_calender["item"]["reservationTime"];

//ThymeleafにカレンダーDBの物件ID、予約ID、予約日、予約時間をセット
$SPIRAL->setTHValue("propID", $php_propID); // 物件ID
$SPIRAL->setTHValue("resID", $SPIRAL->getParam("reservationID")); // 予約ID
$SPIRAL->setTHValue("resDay", $resultRecordSelect_calender["item"]["reservationDate"]); // 予約日
$SPIRAL->setTHValue("resTim", $resultRecordSelect_calender["item"]["reservationTime"]); // 予約時間

// 予約日の整形
$resDay_ymd = explode("-", $resultRecordSelect_calender["item"]["reservationDate"]);
$resDay_display = $resDay_ymd[0]. "/" .$resDay_ymd[1] . "/".$resDay_ymd[2];
$SPIRAL->setTHValue("resDay_display", $resDay_display);

// 予約時間の表示
$resTim_hm = explode(":", $resultRecordSelect_calender["item"]["reservationTime"]);
$resTim_display = $resTim_hm[0]. ":" .$resTim_hm[1];
$SPIRAL->setTHValue("resTim_display", $resTim_display);

// hiddenで送られた物件ID、予約ID、予約日、予約時間をそれぞれ変数に格納
$hidden_propID = $SPIRAL->getParam("calendarRef_roomID");
$hidden_resID = $SPIRAL->getParam("reservationID");
$hidden_resDay = $SPIRAL->getParam("reservationDate");
$hidden_resTim = $SPIRAL->getParam("reservationTime");

// $SPIRAL->setTHValue("step", $step);

// 登録フォーム 確認画面遷移時のチェック
$registForm = $SPIRAL->getRegistrationForm("reservation_regist");
$step = $registForm->getStep();

// 物件ID、予約ID、予約日、予約時間が一致していない場合、checkFlagを0に更新
$step_checkFlag = 1;
if ($step == 2){
    if($hidden_propID != $php_propID) {
        $step_checkFlag = 0;
    }
    if($hidden_resID != $php_resID) {
        $step_checkFlag = 0;
    }
    if($hidden_resDay != $php_resDay) {
        $step_checkFlag = 0;
    }
    if($hidden_resTim != $php_resTim) {
        $step_checkFlag = 0;
    }
}
$SPIRAL->setTHValue("step", $step_checkFlag);

//------------------------------
// 共通モジュール
//------------------------------
class CommonBase {
    /**
     * シングルトンインスタンス
     * @var UserManager
     */
    protected static $singleton;

    public function __construct() {
        if (self::$singleton) {
            throw new Exception('must be singleton');
        }
        self::$singleton = $this;
    }
    /**
     * シングルトンインスタンスを返す
     * @return UserManager
     */
    public static function getInstance() {
        if (!self::$singleton) {
            return new CommonBase();
        } else {
            return self::$singleton;
        }
    }
    /**
     * V2用 API送信ロジック
     * @return Result
     */
    function apiCurlAction($method, $addUrlPass, $data = null, $multiPart = null, $jsonDecode = null) {
        $header = array(
            "Authorization:Bearer ". API_KEY,
            "X-Spiral-Api-Version: 1.1",
        );
        if($multiPart) {
            $header = array_merge($header, array($multiPart));
        } else {
            $header = array_merge($header, array("Content-Type:application/json"));
        }
        if(APP_ROLE){
			$header = array_merge($header, array("X-Spiral-App-Role: ".APP_ROLE));
		}
        // curl
        $curl = curl_init();
        curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
        curl_setopt($curl, CURLOPT_URL, API_URL. $addUrlPass);
        curl_setopt($curl, CURLOPT_HTTPHEADER, $header);
        if ($method == "POST") {
            if ($multiPart) {
                curl_setopt($curl, CURLOPT_POSTFIELDS, $data);
            } else {
                curl_setopt($curl, CURLOPT_POSTFIELDS , json_encode($data));
            }
            curl_setopt($curl, CURLOPT_CUSTOMREQUEST, $method);
        }
        if ($method == "PATCH") {
            curl_setopt($curl, CURLOPT_POSTFIELDS, json_encode($data));
            curl_setopt($curl, CURLOPT_CUSTOMREQUEST, $method);
        }
        if ($method == "DELETE") {
            curl_setopt($curl, CURLOPT_POSTFIELDS, json_encode($data));
            curl_setopt($curl, CURLOPT_CUSTOMREQUEST, $method);
        }
        $response = curl_exec($curl);
        if (curl_errno($curl)) echo curl_error($curl);
        curl_close($curl);
        if($jsonDecode){
			return $response;
		}else{
            return json_decode($response, true);
		}
    }
}
?>

<div class="sp-form-container">
  <div class="sp-step-flow-f24431">
    <div class="large-setting arrow sp-clearfix">
      <div class="step active" title="入力">
        <span>入力</span>
      </div>
      <div class="step" title="確認">
        <span>確認</span>
      </div>
      <div class="step" title="完了">
        <span>完了</span>
      </div>
    </div>
    <div class="small-setting arrow sp-clearfix">
      <div class="step active" title="入力">
        <span>入力</span>
      </div>
      <div class="step" title="確認">
        <span>確認</span>
      </div>
      <div class="step" title="完了">
        <span>完了</span>
      </div>
    </div>
  </div>
  <div class="sp-form-item sp-form-html" th:inline="none"><p><span style="font-size: 18pt;">資料請求フォーム</span></p></div>
  <div class="sp-form-item sp-form-html" th:inline="none">必要事項をご入力の上、「確認画面へ」ボタンを押してください</div>
  <!--/* 名前(name) */-->
  <sp:input-field name="f0xx"></sp:input-field>
  <div class="sp-form-item sp-form-field">
    <div class="sp-form-label">
      <th:block th:text="${fields['f0xx'].label}">
        Label
      </th:block>
      <span class="sp-form-required" th:if="${fields['f0xx'].required}" th:text="${fields['f0xx'].requiredIndicator}">*</span>
    </div>
    <div class="sp-form-data">
      <input type="text" class="sp-form-control" th:name="${fields['f0xx'].name}" th:placeholder="${fields['f0xx'].placeholder}" th:value="|${inputs['f0xx'] ?:'スパイラル太郎'}|" th:if="${fields['f0xx'].control == 'text'}">
      <!--ZipCode Option-->
      <div class="sp-form-zip-code" th:if="${fields['f0xx'].control == 'zipCode'}">
        <input type="text" class="sp-form-control" th:name="${fields['f0xx'].name}" th:placeholder="${fields['f0xx'].placeholder}" th:value="${fields['f0xx'].value}">
        <button class="sp-form-zip-code-button" th:data-zipcode="|zipCodeSearch${fields['f0xx'].name}|" th:if="${fields['f0xx'].addressByZipCode != null}" th:text="${fields['f0xx'].zipCodeButtonLabel}">住所検索</button>
      </div>
      <span class="sp-form-noted" th:if="${fields['f0xx'].help != null}" th:text="${fields['f0xx'].help}">Help text</span>
      <span class="sp-form-error" th:data-zipcode="|zipCodeError${fields['f0xx'].name}|" th:text="${errors['f0xx']?.message}">Error message</span>
    </div>
  </div>
  <!--/* メールアドレス(mail) */-->
  <sp:input-field name="f0xx"></sp:input-field>
  <div class="sp-form-item sp-form-field">
    <div class="sp-form-label">
      <th:block th:text="${fields['f0xx'].label}">
        Label
      </th:block>
      <span class="sp-form-required" th:if="${fields['f0xx'].required}" th:text="${fields['f0xx'].requiredIndicator}">*</span>
    </div>
    <div class="sp-form-data">
      <input type="email" class="sp-form-control" th:name="${fields['f0xx'].name}" th:placeholder="${fields['f0xx'].placeholder}" th:value="|${inputs['f0xx'] ?:'sample@spiral-platform.co.jp'}|">
      <div th:if="${fields['f0xx'].collation}">
        <span class="sp-form-email-reenter" th:text="${fields['f0xx'].reenterLabel}">Re-enter to confirm</span>
        <input type="email" class="sp-form-control" th:name="${fields['f0xx:reenter'].name}" th:placeholder="${fields['f0xx'].placeholder}" th:value="|${inputs['f0xx'] ?:'sample@spiral-platform.co.jp'}|">
      </div>
      <span class="sp-form-noted" th:if="${fields['f0xx'].help != null}" th:text="${fields['f0xx'].help}">Help text</span>
      <span class="sp-form-error" th:if="${errors['f0xx'] != null}" th:text="${errors['f0xx'].message}">Error message</span>
    </div>
  </div>
  <!--/* 都道府県(pref) */-->
  <sp:input-field name="f0xx"></sp:input-field>
  <div class="sp-form-item sp-form-field">
    <div class="sp-form-label">
      <th:block th:text="${fields['f0xx'].label}">
        Label
      </th:block>
      <span class="sp-form-required" th:if="${fields['f0xx'].required}" th:text="${fields['f0xx'].requiredIndicator}">*</span>
    </div>
    <div class="sp-form-data">
        <div class="sp-form-dropdown">
        <select class="sp-form-control" th:name="${fields['f0xx'].name}">
          <option value="" th:text="${fields['f0xx'].unselectedLabel}" th:selected="${inputs['f0xx'] == null}">Select option</option>
          <option th:each="option : ${fields['f0xx'].options}" th:value="${option.id}" th:text="${option.label}" th:selected="${inputs['f0xx'] == #strings.toString(option.id)}">Item</option>
        </select>
        <span class="sp-form-dropdown-icon"></span>
        </div>
      <span class="sp-form-noted" th:if="${fields['f0xx'].help != null}" th:text="${fields['f0xx'].help}">Help text</span>
      <span class="sp-form-error" th:if="${errors['f0xx'] != null}" th:text="${errors['f0xx'].message}">Error message</span>
    </div>
  </div>
  <!--/* 郵便番号(zipCode) */-->
  <sp:input-field name="f0xx"></sp:input-field>
  <div class="sp-form-item sp-form-field">
    <div class="sp-form-label">
      <th:block th:text="${fields['f0xx'].label}">
        Label
      </th:block>
      <span class="sp-form-required" th:if="${fields['f0xx'].required}" th:text="${fields['f0xx'].requiredIndicator}">*</span>
    </div>
    <div class="sp-form-data">
      <input type="text" class="sp-form-control" th:name="${fields['f0xx'].name}" th:placeholder="${fields['f0xx'].placeholder}" th:value="${inputs['f0xx']}" th:if="${fields['f0xx'].control == 'text'}">
      <!--ZipCode Option-->
      <div class="sp-form-zip-code" th:if="${fields['f0xx'].control == 'zipCode'}">
        <input type="text" class="sp-form-control" th:name="${fields['f0xx'].name}" th:placeholder="${fields['f0xx'].placeholder}" th:value="${inputs['f0xx']}">
        <button class="sp-form-zip-code-button" th:data-zipcode="|zipCodeSearch${fields['f0xx'].name}|" th:if="${fields['f0xx'].addressByZipCode != null}" th:text="${fields['f0xx'].zipCodeButtonLabel}">住所検索</button>
      </div>
      <span class="sp-form-noted" th:if="${fields['f0xx'].help != null}" th:text="${fields['f0xx'].help}">Help text</span>
      <span class="sp-form-error" th:data-zipcode="|zipCodeError${fields['f0xx'].name}|" th:text="${errors['f0xx']?.message}">Error message</span>
    </div>
  </div>
  <!--/* 市区町村(municipalities) */-->
  <sp:input-field name="f0xx"></sp:input-field>
  <div class="sp-form-item sp-form-field">
    <div class="sp-form-label">
      <th:block th:text="${fields['f0xx'].label}">
        Label
      </th:block>
      <span class="sp-form-required" th:if="${fields['f0xx'].required}" th:text="${fields['f0xx'].requiredIndicator}">*</span>
    </div>
    <div class="sp-form-data">
      <input type="text" class="sp-form-control" th:name="${fields['f0xx'].name}" th:placeholder="${fields['f0xx'].placeholder}" th:value="|${inputs['f0xx'] ?:'港区赤坂2丁目'}|" th:if="${fields['f0xx'].control == 'text'}">
      <!--ZipCode Option-->
      <div class="sp-form-zip-code" th:if="${fields['f0xx'].control == 'zipCode'}">
        <input type="text" class="sp-form-control" th:name="${fields['f0xx'].name}" th:placeholder="${fields['f0xx'].placeholder}" th:value="${inputs['f0xx']}">
        <button class="sp-form-zip-code-button" th:data-zipcode="|zipCodeSearch${fields['f0xx'].name}|" th:if="${fields['f0xx'].addressByZipCode != null}" th:text="${fields['f0xx'].zipCodeButtonLabel}">住所検索</button>
      </div>
      <span class="sp-form-noted" th:if="${fields['f0xx'].help != null}" th:text="${fields['f0xx'].help}">Help text</span>
      <span class="sp-form-error" th:data-zipcode="|zipCodeError${fields['f0xx'].name}|" th:text="${errors['f0xx']?.message}">Error message</span>
    </div>
  </div>
  <!--/* 番地(block) */-->
  <sp:input-field name="f0xx"></sp:input-field>
  <div class="sp-form-item sp-form-field">
    <div class="sp-form-label">
      <th:block th:text="${fields['f0xx'].label}">
        Label
      </th:block>
      <span class="sp-form-required" th:if="${fields['f0xx'].required}" th:text="${fields['f0xx'].requiredIndicator}">*</span>
    </div>
    <div class="sp-form-data">
      <input type="text" class="sp-form-control" th:name="${fields['f0xx'].name}" th:placeholder="${fields['f0xx'].placeholder}" th:value="|${inputs['f0xx'] ?:'9番11号'}|" th:if="${fields['f0xx'].control == 'text'}">
      <!--ZipCode Option-->
      <div class="sp-form-zip-code" th:if="${fields['f0xx'].control == 'zipCode'}">
        <input type="text" class="sp-form-control" th:name="${fields['f0xx'].name}" th:placeholder="${fields['f0xx'].placeholder}" th:value="${inputs['f0xx']}">
        <button class="sp-form-zip-code-button" th:data-zipcode="|zipCodeSearch${fields['f0xx'].name}|" th:if="${fields['f0xx'].addressByZipCode != null}" th:text="${fields['f0xx'].zipCodeButtonLabel}">住所検索</button>
      </div>
      <span class="sp-form-noted" th:if="${fields['f0xx'].help != null}" th:text="${fields['f0xx'].help}">Help text</span>
      <span class="sp-form-error" th:data-zipcode="|zipCodeError${fields['f0xx'].name}|" th:text="${errors['f0xx']?.message}">Error message</span>
    </div>
  </div>
  <!--/* マンション・ビル名(building) */-->
  <sp:input-field name="f0xx"></sp:input-field>
  <div class="sp-form-item sp-form-field">
    <div class="sp-form-label">
      <th:block th:text="${fields['f0xx'].label}">
        Label
      </th:block>
      <span class="sp-form-required" th:if="${fields['f0xx'].required}" th:text="${fields['f0xx'].requiredIndicator}">*</span>
    </div>
    <div class="sp-form-data">
      <input type="text" class="sp-form-control" th:name="${fields['f0xx'].name}" th:placeholder="${fields['f0xx'].placeholder}" th:value="|${inputs['f0xx'] ?:'オリックス赤坂2丁目ビル'}|" th:if="${fields['f0xx'].control == 'text'}">
      <!--ZipCode Option-->
      <div class="sp-form-zip-code" th:if="${fields['f0xx'].control == 'zipCode'}">
        <input type="text" class="sp-form-control" th:name="${fields['f0xx'].name}" th:placeholder="${fields['f0xx'].placeholder}" th:value="${inputs['f0xx']}">
        <button class="sp-form-zip-code-button" th:data-zipcode="|zipCodeSearch${fields['f0xx'].name}|" th:if="${fields['f0xx'].addressByZipCode != null}" th:text="${fields['f0xx'].zipCodeButtonLabel}">住所検索</button>
      </div>
      <span class="sp-form-noted" th:if="${fields['f0xx'].help != null}" th:text="${fields['f0xx'].help}">Help text</span>
      <span class="sp-form-error" th:data-zipcode="|zipCodeError${fields['f0xx'].name}|" th:text="${errors['f0xx']?.message}">Error message</span>
    </div>
  </div>
    <!--/* 電話番号(phone) */-->
    <sp:input-field name="f0xx"></sp:input-field>
    <div class="sp-form-item sp-form-field">
      <div class="sp-form-label">
        <th:block th:text="${fields['f0xx'].label}">
          Label
        </th:block>
        <span class="sp-form-required" th:if="${fields['f0xx'].required}" th:text="${fields['f0xx'].requiredIndicator}">*</span>
      </div>
      <div class="sp-form-data">
        <div class="sp-form-phone">
          <div class="sp-form-dropdown" th:if="${fields['f0xx'].countryCode == null}">
            <select class="sp-form-control" th:name="${fields['f0xx:countryCode'].name}">
              <option value="" th:text="${fields['f0xx'].unselectedCodeLabel}" th:selected="${inputs['f0xx:countryCode'] == null}">Select option</option>
              <option th:each="countryCode : ${fields['f0xx'].countryCodes}" th:value="${countryCode.country.alpha2Code}" th:text="|${countryCode.country.alpha2Code}(+${countryCode.code})|" th:selected="${inputs['f0xx:countryCode'] == countryCode.country.alpha2Code}">Item</option>
            </select>
            <span class="sp-form-dropdown-icon"></span>
          </div>
          <input type="tel" class="sp-form-control" th:name="${fields['f0xx'].name}" th:placeholder="${fields['f0xx'].placeholder}" th:value="${inputs['f0xx']}">
        </div>
        <span class="sp-form-noted" th:if="${fields['f0xx'].help != null}" th:text="${fields['f0xx'].help}">Help text</span>
        <span class="sp-form-error" th:if="${errors['f0xx'] != null}" th:text="${errors['f0xx'].message}">Error message</span>
      </div>
    </div>
    <!--/* 職業(occupation) */-->
    <sp:input-field name="f0xx"></sp:input-field>
    <div class="sp-form-item sp-form-field">
      <div class="sp-form-label">
        <th:block th:text="${fields['f0xx'].label}">
          Label
        </th:block>
        <span class="sp-form-required" th:if="${fields['f0xx'].required}" th:text="${fields['f0xx'].requiredIndicator}">*</span>
      </div>
      <div class="sp-form-data">
         <div class="sp-form-dropdown">
          <select class="sp-form-control" th:name="${fields['f0xx'].name}">
            <option value="" th:text="${fields['f0xx'].unselectedLabel}" th:selected="${inputs['f0xx'] == null}">Select option</option>
            <option th:each="option : ${fields['f0xx'].options}" th:value="${option.id}" th:text="${option.label}" th:selected="${inputs['f0xx'] == #strings.toString(option.id)}">Item</option>
          </select>
          <span class="sp-form-dropdown-icon"></span>
          </div>
        <span class="sp-form-noted" th:if="${fields['f0xx'].help != null}" th:text="${fields['f0xx'].help}">Help text</span>
        <span class="sp-form-error" th:if="${errors['f0xx'] != null}" th:text="${errors['f0xx'].message}">Error message</span>
      </div>
    </div>
    <!--/* 希望占有面積(occupiedArea) */-->
    <sp:input-field name="f0xx"></sp:input-field>
    <div class="sp-form-item sp-form-field">
      <div class="sp-form-label">
        <th:block th:text="${fields['f0xx'].label}">
          Label
        </th:block>
        <span class="sp-form-required" th:if="${fields['f0xx'].required}" th:text="${fields['f0xx'].requiredIndicator}">*</span>
      </div>
      <div class="sp-form-data">
         <div class="sp-form-dropdown">
          <select class="sp-form-control" th:name="${fields['f0xx'].name}">
            <option value="" th:text="${fields['f0xx'].unselectedLabel}" th:selected="${inputs['f0xx'] == null}">Select option</option>
            <option th:each="option : ${fields['f0xx'].options}" th:value="${option.id}" th:text="${option.label}" th:selected="${inputs['f0xx'] == #strings.toString(option.id)}">Item</option>
          </select>
          <span class="sp-form-dropdown-icon"></span>
          </div>
        <span class="sp-form-noted" th:if="${fields['f0xx'].help != null}" th:text="${fields['f0xx'].help}">Help text</span>
        <span class="sp-form-error" th:if="${errors['f0xx'] != null}" th:text="${errors['f0xx'].message}">Error message</span>
      </div>
    </div>
    <!--/* ご予算(budget) */-->
    <sp:input-field name="f0xx"></sp:input-field>
    <div class="sp-form-item sp-form-field">
      <div class="sp-form-label">
        <th:block th:text="${fields['f0xx'].label}">
          Label
        </th:block>
        <span class="sp-form-required" th:if="${fields['f0xx'].required}" th:text="${fields['f0xx'].requiredIndicator}">*</span>
      </div>
      <div class="sp-form-data">
         <div class="sp-form-dropdown">
          <select class="sp-form-control" th:name="${fields['f0xx'].name}">
            <option value="" th:text="${fields['f0xx'].unselectedLabel}" th:selected="${inputs['f0xx'] == null}">Select option</option>
            <option th:each="option : ${fields['f0xx'].options}" th:value="${option.id}" th:text="${option.label}" th:selected="${inputs['f0xx'] == #strings.toString(option.id)}">Item</option>
          </select>
          <span class="sp-form-dropdown-icon"></span>
          </div>
        <span class="sp-form-noted" th:if="${fields['f0xx'].help != null}" th:text="${fields['f0xx'].help}">Help text</span>
        <span class="sp-form-error" th:if="${errors['f0xx'] != null}" th:text="${errors['f0xx'].message}">Error message</span>
      </div>
    </div>
    <!--/* 入居予定人数(residentNum) */-->
    <sp:input-field name="f0xx"></sp:input-field>
    <div class="sp-form-item sp-form-field">
      <div class="sp-form-label">
        <th:block th:text="${fields['f0xx'].label}">
          Label
        </th:block>
        <span class="sp-form-required" th:if="${fields['f0xx'].required}" th:text="${fields['f0xx'].requiredIndicator}">*</span>
      </div>
      <div class="sp-form-data">
         <div class="sp-form-dropdown">
          <select class="sp-form-control" th:name="${fields['f0xx'].name}">
            <option value="" th:text="${fields['f0xx'].unselectedLabel}" th:selected="${inputs['f0xx'] == null}">Select option</option>
            <option th:each="option : ${fields['f0xx'].options}" th:value="${option.id}" th:text="${option.label}" th:selected="${inputs['f0xx'] == #strings.toString(option.id)}">Item</option>
          </select>
          <span class="sp-form-dropdown-icon"></span>
          </div>
        <span class="sp-form-noted" th:if="${fields['f0xx'].help != null}" th:text="${fields['f0xx'].help}">Help text</span>
        <span class="sp-form-error" th:if="${errors['f0xx'] != null}" th:text="${errors['f0xx'].message}">Error message</span>
      </div>
    </div>
      <!--/* 個人情報保護の同意(privacyPolicy) */-->
      <sp:input-field name="f0xx"></sp:input-field>
      <div class="sp-form-item sp-form-field">
        <div class="sp-form-label">
          <th:block th:text="${fields['f0xx'].label}">
            Label
          </th:block>
          <span class="sp-form-required" th:if="${fields['f0xx'].required}" th:text="${fields['f0xx'].requiredIndicator}">*</span>
        </div>
        <div class="sp-form-data">
          <div class="sp-form-dropdown">
            <label th:each="option : ${fields['f0xx'].options}"><input type="checkbox" th:name="f0xx" th:value="${option.id}" th:checked="${inputs['f0xx'] != null ? #lists.contains(inputs['f0xx'], #strings.toString(option.id)) : false}"><span th:text="${option.label}">Item</span></label>
          </div>
          <span class="sp-form-noted" th:if="${fields['f0xx'].help != null}" th:text="${fields['f0xx'].help}">Help text</span>
          <span class="sp-form-error" th:if="${errors['f0xx'] != null}" th:text="${errors['f0xx'].message}">Error message</span>
        </div>
      </div>
  <div class="sp-form-item sp-form-interaction">
    <button class="sp-form-prev-button" type="submit" name="action" value="previous" th:if="!${step.isFirst}" th:text="${step.prevButtonLabel}">Prev</button>
    <button class="sp-form-next-button" type="submit" name="action" value="next" th:text="${step.nextButtonLabel}">Next</button>
  </div>
</div>

:root {
  /*=============================
	カスタムプロパティ
  ==============================*/
  --base-color: #FFFFFF; /* フォームブロックの背景色 */
  --main-color: #0D60DB; /* メインカラー */
  --accent-color: #B8250F; /* アクセントカラー */
  --input-color: #F5F7FA; /* 入力欄の背景色 */
  --input-border-color: #D3D6DB; /* 入力欄の枠線の色 */
  --input-radius: 12px; /* 入力欄の角の丸さ */
  --transition: 0.1s; /* アニメーション時間 */

  /*------ 合計100%になるよう調整 -------*/
  --label-width: 25%; /* ラベル部分の幅 */
  --data-width: 75%; /* データ部分の幅 */
}

.sp-record-list-card-actions {
  width: auto;
  font-size:0.875rem;
  padding:0.5rem 0;
  text-align:center;
  text-decoration:none;
  flex: 1;
}

.sp-record-list-card-actions a {
  color: #ffffff;
  background-color: #0D60DB;
  border: 1.0px solid #0D60DB;
  border-radius: calc(12px / 1.2);
  /* background-color:#ffffff; */
  font-size:0.875rem;
  padding:0.5rem 0.75rem;
  text-align:center;
  text-decoration:none;
  flex: 1;
}

.sp-form-container {
  font-size:16px;
  padding:1em;
  box-sizing:border-box;
  max-width: 960px;
  color:#505050;
  background-color:var(--base-color);
  border:1px solid #E1E5EB;
  border-radius:var(--input-radius);
}

.sp-form-container .sp-form-item:not(:last-child) {
  margin-bottom:0.5em;
  padding:0.5em 1em;
}

.sp-form-field,
.sp-form-group {
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-orient:vertical;
  -webkit-box-direction:normal;
  -ms-flex-direction:column;
  flex-direction:column;
}

.sp-form-field>.sp-form-label,
.sp-form-group>.sp-form-label {
  font-size:1.15em;
  font-weight:bold;
  padding:.25em 0;
  word-break:break-all;
  box-sizing:border-box;
  color:#333333;
}

.sp-form-group-item>.sp-form-label {
  word-break:break-all;
  display:inline-block;
  margin-bottom:.2em;
}

.sp-form-field>.sp-form-data,
.sp-form-group>.sp-form-data {
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-orient:vertical;
  -webkit-box-direction:normal;
  -ms-flex-direction:column;
  flex-direction:column;
  word-break:break-all;
  padding:0.25em 0;
  box-sizing:border-box;
}

.sp-form-group-item>.sp-form-data {
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-orient:vertical;
  -webkit-box-direction:normal;
  -ms-flex-direction:column;
  flex-direction:column;
}

.sp-form-required {
  display:inline-block;
  margin:0 .5em;
  padding: 3px 6px;
  background:var(--accent-color);
  color:#ffffff;
  line-height:1;
  border-radius:.25em;
  font-size:0.7em;
  font-weight: bold;
  vertical-align: middle;
}

.sp-form-group-item:not(:last-child) { margin-bottom:.5em; }

.sp-form-noted {
  font-size:.8em;
  color:#808080;
  word-break:break-all;
  margin-top:.5em;
  padding-left:min(calc(var(--input-radius) / 2 - 4px), 8px);
}

.sp-form-error {
  font-size:.8em;
  color:var(--accent-color);
  padding-left:min(calc(var(--input-radius) / 2 - 4px), 8px);
}

.sp-form-control {
  -moz-appearance:none;
  -webkit-appearance:none;
  -ms-progress-appearance:none;
  appearance:none;
  font-family:inherit;
  font-size:1em;
  line-height:1.5;
  padding:.3em .7em;
  padding-left:clamp(12px, calc(var(--input-radius) - 2px), 24px);
  background:var(--input-color);
  color:#333333;
  box-sizing:border-box;
  width:100%;
  height:48px;
  margin-bottom:.3em;
  border:none;
  outline:none;
  border-radius:var(--input-radius);
  box-shadow:0 0 0 0.5px var(--input-border-color);
}
.sp-form-control:focus {
  box-shadow:0 0 0 2px var(--main-color);
}
.sp-form-control[type="number"] {
  height: 36px;
}

.sp-form-control:placeholder-shown { color:#aaa; }

.sp-form-control::placeholder { color:#aaa; }

.sp-form-control::-ms-input-placeholder { color:#aaa; }

.sp-form-control:-ms-input-placeholder { color:#aaa; }

.sp-form-control:-moz-placeholder { color:#aaa; }

textarea.sp-form-control {
  resize:vertical;
  padding-top:clamp(6px, calc(var(--input-radius) / 2), 18px);
  height:calc(1.5em * 5);
}

select.sp-form-control,
option.sp-form-control {
  -moz-appearance:none;
  -webkit-appearance:none;
  -ms-progress-appearance:none;
  appearance:none;
  padding-right:1.5em;
}

.sp-form-control>option { background:#FFFFFF;}

select.sp-form-control::-ms-expand { display:none; }

.sp-form-phone .sp-form-control { max-width:20em; }

.sp-form-phone>*:not(:only-child) { margin-right:.5rem; }

.sp-form-dropdown { position:relative; }

.sp-form-dropdown-icon {
  display:block;
  position:absolute;
  top:1.3em;
  right:1em;
  line-height:0;
  pointer-events:none;
}

.sp-form-dropdown-icon:after {
  content:"";
  display:block;
  border-top:0.333em solid #888;
  border-right:.333em solid transparent;
  border-left:.333em solid transparent;
}

.sp-form-selection {
  display:block;
  cursor: pointer;
  margin-bottom:.3em;
  padding:.25em .75em .35em;
  background:var(--input-color);
  border-radius: var(--input-radius);
  box-shadow:0 0 0 0.5px var(--input-border-color) ;
}

.sp-form-selection-label {
  display: inline-block;
  position: relative;
  vertical-align:middle;
  padding: 4px 0;
}

.sp-form-datetimes,
.sp-form-date,
.sp-form-time,
.sp-form-timezone {
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-orient:horizontal;
  -webkit-box-direction:normal;
  -ms-flex-flow:row wrap;
  flex-flow:row wrap;
  -webkit-box-align:center;
  -ms-flex-align:center;
  align-items:center;
}

.sp-form-datetime,
.sp-form-date,
.sp-form-time,
.sp-form-timezone {
  margin-right:.5rem;
  -ms-flex-wrap:nowrap;
  flex-wrap:nowrap;
}

.sp-form-datetime { max-width:20em; }

.sp-form-phone {
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-orient:horizontal;
  -webkit-box-direction:normal;
  -ms-flex-flow:row wrap;
  flex-flow:row wrap;
  -webkit-box-align:center;
  -ms-flex-align:center;
  align-items:center;
}

.sp-form-date-separator {
  width:1em;
  margin-bottom: .3em;
  text-align:center;
  -ms-flex-negative:1;
  flex-shrink:0;
}

.sp-form-number { max-width:20em; }

.sp-form-email-reenter,
.sp-form-password-reenter {
  font-size:.9em;
  margin-bottom:.2em;
  padding-left:min(calc(var(--input-radius) / 2 - 4px), 8px);
}

.sp-form-html p { margin:0; }

.sp-form-interaction {
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -ms-flex-wrap:wrap;
  flex-wrap:wrap;
  margin-top:1em;
}

.sp-form-prev-button {
  color:#333333;
  background-color:var(--base-color);
  border:2.0px solid #666666;
}

.sp-form-next-button,
.sp-form-login-button {
  color:#ffffff;
  background-color:var(--main-color);
  border:none;
}

.sp-form-field .sp-form-embedded { padding-left:.25em; }

.sp-form-selection>input[type="radio"],
.sp-form-selection>input[type="checkbox"] {
  display: none;
  vertical-align:middle;
  margin-left:0;
}

.sp-form-selection>input[type="radio"]+.sp-form-selection-label::before,
.sp-form-selection>input[type="checkbox"]+.sp-form-selection-label::before{
  display: inline-block;
  content:"";
  position: relative;
  box-sizing: border-box;
  top: 4px;
  margin-right: 6px;
  width: 20px;
  height: 20px;
  background: #ffffff;
  border:10px solid #ffffff;
  box-shadow: 0 0 0 0.5px var(--input-border-color);
  transition: var(--transition);
}

.sp-form-selection>input[type="radio"]+.sp-form-selection-label::before {
  border-radius: 50%;
}

.sp-form-selection>input[type="checkbox"]+.sp-form-selection-label::before {
  border-radius: min(var(--input-radius), 4px);
}

.sp-form-selection>input[type="radio"]:checked+.sp-form-selection-label::before{
  background: var(--main-color);
  border:4px solid #ffffff;
}
.sp-form-selection>input[type="checkbox"]+.sp-form-selection-label::after{
  border-right: 3px solid var(--main-color);
  border-bottom: 3px solid var(--main-color);
  content: '';
  display: inline-block;
  width: 6px;
  height: 10px;
  left: 9px;
  margin-top: -7px;
  position: absolute;
  top: 50%;
  transform: rotate(45deg);
  opacity: 0;
  transition: var(--transition);
}

.sp-form-selection>input[type="checkbox"]:checked+.sp-form-selection-label::after{
  left: 6px;
  opacity: 1;
}

.sp-form-date>input,
.sp-form-time>input { max-width:7em; }

.sp-form-date>input[type="date"]{
  min-width: 140px;
  max-width: none;
}
.sp-form-time>input[type="time"] {
  min-width: 92px;
  max-width: none;
}

.sp-form-interaction>button {
  -webkit-box-flex:1;
  -ms-flex-positive:1;
  flex-grow:1;
  cursor:pointer;
  font-size:1em;
  font-weight:bold;
  line-height:1.5;
  margin:.5rem;
  padding:.75rem 0;
  text-align:center;
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
  white-space:nowrap;
  border-radius:var(--input-radius);
}

@media (min-width:768px) {
  .sp-form-container {
    font-size:initial;
    padding:3em;
    margin:2em auto;
  }

.sp-form-container .sp-form-item:not(:last-child) {
  margin-bottom:0.5em;
  padding-bottom:0.5em;
}

  .sp-form-field,
  .sp-form-group {
    -webkit-box-orient:horizontal;
    -webkit-box-direction:normal;
    -ms-flex-flow:row nowrap;
    flex-flow:row nowrap;
  }

  .sp-form-field>.sp-form-label,
  .sp-form-group>.sp-form-label {
    font-size:1em;
    width:var(--label-width);
    padding:.5em;
  }

  .sp-form-group .sp-form-group-item>.sp-form-label {
    font-size:.9em;
    padding-right:.5em;
  }

  .sp-form-field>.sp-form-data,
  .sp-form-group>.sp-form-data {
    font-size:1em;
    width:var(--data-width);
    padding:.5em;
  }

  .sp-form-group>.sp-form-data {
    -webkit-box-orient:horizontal;
    -webkit-box-direction:normal;
    -ms-flex-flow:row wrap;
    flex-flow:row wrap;
  }

  .sp-form-group.sp-form-group-vertical>.sp-form-data {
    -webkit-box-orient:vertical;
    -webkit-box-direction:normal;
    -ms-flex-direction:column;
    flex-direction:column;
  }

  .sp-form-required {
    font-size:0.8em;
  }

  .sp-form-group-item { padding:.25em; }

  .sp-form-group-item:not(:last-child) { margin-bottom:0; }

  .sp-form-control { font-size:.9em; }

  .sp-form-selection {
    font-size:.9em;
    margin:0 .5em 0 0;
    padding-right:1em;
    background:none;
    box-shadow:none;
  }
  .sp-form-selection-vertical>.sp-form-selection {
    margin:0 auto 0 0;
    padding-right: 4em;
  }

  .sp-form-selection-vertical {
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-orient:vertical;
    -webkit-box-direction:normal;
    -ms-flex-direction:column;
    flex-direction:column;
  }

  .sp-form-selection-horizontal {
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-orient:horizontal;
    -webkit-box-direction:normal;
    -ms-flex-flow:row wrap;
    flex-flow:row wrap;
  }

  .sp-form-interaction {
    justify-content:center;
    margin-top:2em;
  }

  .sp-form-embedded { font-size:.9em; }

  .sp-form-group-item .sp-form-embedded { padding-right:5em; }

  .sp-form-selection>input[type="radio"]+.sp-form-selection-label::before,
  .sp-form-selection>input[type="checkbox"]+.sp-form-selection-label::before{
    background: var(--input-color);
    border:10px solid var(--input-color);
  }

  .sp-form-selection>input[type="radio"]:hover+.sp-form-selection-label::before,
  .sp-form-selection>input[type="checkbox"]:hover+.sp-form-selection-label::before{
    border:10px solid #dddddd;
  }

  .sp-form-selection>input[type="radio"]:checked+.sp-form-selection-label::before{
    border:4px solid var(--input-color);
  }

  .sp-form-date>input[type="date"]{
    min-width: unset;
  }
  .sp-form-time>input[type="time"] {
    min-width: unset;
  }

  .sp-form-interaction>button {
    -webkit-box-flex:0;
    -ms-flex-positive:0;
    flex-grow:0;
    padding:.75rem 5em;
  }
}

.sp-form-recaptcha {
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-pack:start;
  -ms-flex-pack:start;
  justify-content:flex-start;
}

.sp-form-recaptcha-right {
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-pack:end;
  -ms-flex-pack:end;
  justify-content:flex-end;
}

.sp-form-recaptcha-center {
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-pack:center;
  -ms-flex-pack:center;
  justify-content:center;
}

.sp-form-file-button {
  padding:.8em 2em;
  font-weight: bold;
  cursor:pointer;
  color:#666666;
  background-color:#f6f6f6;
  border:none;
  border: solid 2px #a0a0a0;
  border-radius:var(--input-radius);
  transition: var(--transition);
  align-items: center;
  justify-content: center;
}
.sp-form-file-button::before{
  display: inline-block;
  content: url('data:image/svg+xml;utf-8,<svg fill="%23666" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M14.4,7.9l-5.7,5.7c-0.4,0.4-0.8,0.6-1.2,0.8c-0.7,0.3-1.4,0.3-2.1,0.2c-0.7-0.1-1.4-0.5-1.9-1c-0.4-0.4-0.6-0.8-0.8-1.2c-0.3-0.7-0.3-1.4-0.2-2.1c0.1-0.7,0.5-1.4,1-1.9L9.7,2c0.2-0.2,0.5-0.4,0.8-0.5c0.4-0.2,0.9-0.2,1.3-0.1C12.2,1.4,12.6,1.6,13,2c0.2,0.2,0.4,0.5,0.5,0.8c0.2,0.4,0.2,0.9,0.1,1.3c-0.1,0.4-0.3,0.8-0.6,1.2l-6.2,6.2c-0.1,0.1-0.2,0.1-0.3,0.2c-0.1,0.1-0.3,0.1-0.5,0c-0.2,0-0.3-0.1-0.4-0.2c-0.1-0.1-0.1-0.2-0.2-0.3c-0.1-0.1-0.1-0.3,0-0.5c0-0.2,0.1-0.3,0.2-0.4l5.5-5.5l-0.9-0.9L4.7,9.3C4.5,9.5,4.4,9.7,4.3,10c-0.2,0.4-0.2,0.8-0.1,1.2c0.1,0.4,0.3,0.8,0.6,1.1c0.2,0.2,0.4,0.4,0.7,0.5c0.4,0.2,0.8,0.2,1.2,0.1c0.4-0.1,0.8-0.3,1.1-0.6l6.2-6.2c0.3-0.3,0.6-0.8,0.8-1.2c0.3-0.6,0.3-1.4,0.2-2c-0.1-0.7-0.5-1.3-1-1.8c-0.3-0.3-0.8-0.6-1.2-0.8c-0.6-0.3-1.4-0.3-2-0.2C10,0.2,9.3,0.5,8.8,1L2.5,7.4C2,7.9,1.6,8.5,1.4,9.1C1,10,0.9,11,1.1,11.9c0.2,1,0.6,1.9,1.4,2.6C3,15,3.5,15.4,4.1,15.6C5.1,16,6,16.1,7,15.9c1-0.2,1.9-0.6,2.6-1.4l5.7-5.7L14.4,7.9z"/></svg>');
  margin-left: -0.5em;
  width: 16px;
  height: 100%;
  vertical-align: middle;
}

.sp-form-file-button:focus { outline:0; }

.sp-from-file-default-drag-drop-area {
  color:#333333;
  background-color:var(--input-color);
  border:2.0px dashed #6c757d;
  border-radius:0;
  width:100%;
  height:200px;
  text-align:center;
  border-radius: var(--input-radius);
}

.sp-from-file-ondraghover-drag-drop-area {
  color:#333333;
  background-color:#dddddd;
  border:2.0px dashed #6c757d;
  border-radius:0;
  width:100%;
  height:200px;
  text-align:center;
  border-radius: var(--input-radius);
}

.sp-from-file-ondragleave-drag-drop-area {
  color:#333333;
  background-color:#dddddd;
  border:2.0px dashed #6c757d;
  border-radius:0;
  width:100%;
  height:200px;
  border-radius: var(--input-radius);
}

.sp-from-file-ondrop-drag-drop-area {
  color:#333333;
  background-color:var(--input-color);
  border:2.0px dashed #6c757d;
  border-radius:0;
  width:100%;
  height:200px;
  border-radius: var(--input-radius);
}

.sp-form-embedded>.sp-file-info:last-child { padding-bottom:0; }

.sp-file-info {
  padding-top:1em;
  padding-bottom:1em;
  line-height:1.5;
}

.sp-file-info>div { width:100%; }

.main-text {
  font-size:1em;
  font-weight:bold;
}

[class^="sp-step-flow-f"] {
  margin:3em 0 2em;
  }

[class^="sp-step-flow-f"]>.large-setting {
  display:flex;
  justify-content: center;
}

[class^="sp-step-flow-f"]>.small-setting { display:none; }

[class^="sp-step-flow-f"]>.large-setting,
[class^="sp-step-flow-f"]>.small-setting {
  text-align: center;
  margin: 0 auto;
  padding: 0 20px;
}

[class^="sp-step-flow-f"]>.large-setting>.step,
[class^="sp-step-flow-f"]>.small-setting>.step {
  word-wrap: break-word;
  min-width: 0;
  text-align:center;
}

[class^="sp-step-flow-f"]>.large-setting>.step {
  flex: 1;
  margin-right:36px;
  font-size:16px;
}

[class^="sp-step-flow-f"]>.small-setting>.step {
  font-size:14px;
}

[class^="sp-step-flow-f"]>.large-setting>.step:last-child,
[class^="sp-step-flow-f"]>.small-setting>.step:last-child {
  margin-right: 0;
}

[class^="sp-step-flow-f"]>.large-setting>.step>span,
[class^="sp-step-flow-f"]>.small-setting>.step>span {
  overflow: hidden;
  text-overflow: ellipsis;
  position:relative;
  display:block;
  padding-top: 16px;
  white-space:nowrap;
  color:#D3D6DB;
  font-weight:bold;
}

[class^="sp-step-flow-f"]>.large-setting>.step>span::before,
[class^="sp-step-flow-f"]>.small-setting>.step>span::before {
  position: absolute;
  content: "";
  display: block;
  top: 0;
  width: 100%;
  background: #D3D6DB;
}

[class^="sp-step-flow-f"]>.large-setting>.step>span::before {
  height: 6px;
  border-radius: 6px;
}

[class^="sp-step-flow-f"]>.small-setting>.step>span::before {
  height: 4px;
  border-radius: 4px;
}

[class^="sp-step-flow-f"]>.large-setting>.step.active>span,
[class^="sp-step-flow-f"]>.small-setting>.step.active>span { color:var(--main-color); }

[class^="sp-step-flow-f"]>.large-setting>.step.active>span::before,
[class^="sp-step-flow-f"]>.small-setting>.step.active>span::before { background:var(--main-color); }

@media (max-width: 765px) {
  [class^="sp-step-flow-f"]>.large-setting { display:none; }

  [class^="sp-step-flow-f"]>.small-setting {
    display:flex;
    justify-content: center;
    counter-reset:step;
  }

  [class^="sp-step-flow-f"]>.small-setting>.step>span { display: none; }

  [class^="sp-step-flow-f"]>.small-setting>.step {
    display: flex;
    align-items: center;
    width: auto;
    margin: 0;
    background: none;
    color: #ffffff;
    font-weight: bold;
  }

  [class^="sp-step-flow-f"]>.small-setting>.step::before {
    counter-increment: step 1;
    content: counter(step, decimal);
    width:24px;
    height:24px;
    background: var(--main-color);
    border-radius: 50%;
    font-size: 12px;
    line-height: 24px;
  }

  [class^="sp-step-flow-f"]>.small-setting>.step:not(:last-child) { flex-grow: 1; }

  [class^="sp-step-flow-f"]>.small-setting>.step:not(:last-child)::after {
    content: "";
    width: calc(100% - 24px);
    height:2px;
    background: var(--main-color);
    vertical-align: middle;
  }

  [class^="sp-step-flow-f"]>.small-setting>.step.active::after,
  [class^="sp-step-flow-f"]>.small-setting>.step.active~.step::before,
  [class^="sp-step-flow-f"]>.small-setting>.step.active~.step::after { background:#D3D6DB; }
}

<!-- ヘッダ -->
<sp:block name="fcb0xxxx"></sp:block>
<th:block th:if="${cp.result.value['step_detail']} eq 1">
    <!--/* 物件詳細 */-->
    <sp:block name="rib0xxxx"></sp:block>
    <div class="sp-record-list-card-actions　sp-record-list-container sp-record-list-table sp-url-button">
        <a class="url-button button-l" th:href="${pages['p0xxxx']?.path ?:'/404'}">戻る</a>
        <a class="url-button button-r" th:href="${cp.result.value['recordInfo']}">物件詳細</a>
    </div>
</th:block>
<!-- 資料請求フォーム -->
<h2>資料請求</h2>
<sp:block name="ifb0xxxx"></sp:block>
<!-- フッター -->
<sp:block name="fcb0xxxx"></sp:block>

h2 {
    text-align: center;
}

h1 {
    text-align: center;
}

.reserve_attention {
    display: block;
    text-align: center;
    margin: 0.5rem 0;
}

.url-button {
    width: auto;
    /* font-size:0.875rem; */
    padding:0.5rem 0;
    text-align:center;
    text-decoration:none;
    flex: 1;

    color: #ffffff;
    background-color: #0D60DB;
    border: 1.0px solid #0D60DB;
    border-radius: calc(12px / 1.2);
}

.button-l {
    padding:0.5rem 6%;
    margin-right: 0.5rem;
}

.button-r {
    padding:0.5rem 5%;
    margin-left: 0.5rem;
}

.button {
    padding:0.5rem 5%;
}

.sp-url-button {
    text-align: center;
    width: auto;
    margin: 1.5rem auto;
    /* border: 1px solid #dddddd; */
}

<?php
//------------------------------
// API設定
//------------------------------
//------------------------------
// 設定値
//------------------------------
define("API_URL", "https://api.spiral-platform.com/v1");
define("API_KEY", "APIキー"); //APIキー
define("APP_ROLE", "アプリロール"); //API権限を持つアプリロール識別名
define("DB_ID", "DBID"); //物件マスタDBID
define("APP_ID", "アプリID"); //モデルルーム予約管理アプリID

define("DB_ID_2", "DBID"); //カレンダーDBID

//------------------------------
// 物件詳細ステップ出し分け
//------------------------------
$registForm_reg = $SPIRAL->getRegistrationForm("資料請求フォームの識別名");
$step_detail = $registForm_reg->getStep();
$SPIRAL->setTHValue("step_detail", $step_detail);

//------------------------------
// API実行
//------------------------------
// 物件ID取得
$commonBase = CommonBase::getInstance();

$record = $SPIRAL->getParam("record");

//------------------------------
// 物件詳細ステップ出し分け
//------------------------------
$param_record = explode(".", $SPIRAL->getParam("record"));//レコードアイテムブロックが表示された時、URLクエリパラメータから「レコードID」を取得。
$recordId = $param_record[1];

$resultRecordSelect = $commonBase->apiCurlAction("GET", "/apps/". APP_ID. "/dbs/". DB_ID. "/records/". $recordId);

$SPIRAL->setTHValue("calender", $resultRecordSelect['item']['propertyID']);//ThymeleafにカレンダーDBのレコードをセット  $resultRecordSelect['item']['propertyID']

$record_url = "/認証エリアの識別名/物件詳細ページの識別名" . "?record=" . $record. "&rlb0xxxx_q_f0xx=". $resultRecordSelect['item']['propertyID'];
$SPIRAL->setTHValue("recordInfo", $record_url);

//------------------------------
// 共通モジュール
//------------------------------
class CommonBase {
    /**
     * シングルトンインスタンス
     * @var UserManager
     */
    protected static $singleton;

    public function __construct() {
        if (self::$singleton) {
            throw new Exception('must be singleton');
        }
        self::$singleton = $this;
    }
    /**
     * シングルトンインスタンスを返す
     * @return UserManager
     */
    public static function getInstance() {
        if (!self::$singleton) {
            return new CommonBase();
        } else {
            return self::$singleton;
        }
    }
    /**
     * V2用 API送信ロジック
     * @return Result
     */
    function apiCurlAction($method, $addUrlPass, $data = null, $multiPart = null, $jsonDecode = null) {
        $header = array(
            "Authorization:Bearer ". API_KEY,
            "X-Spiral-Api-Version: 1.1",
        );
        if($multiPart) {
            $header = array_merge($header, array($multiPart));
        } else {
            $header = array_merge($header, array("Content-Type:application/json"));
        }
        if(APP_ROLE){
			$header = array_merge($header, array("X-Spiral-App-Role: ".APP_ROLE));
		}
        // curl
        $curl = curl_init();
        curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
        curl_setopt($curl, CURLOPT_URL, API_URL. $addUrlPass);
        curl_setopt($curl, CURLOPT_HTTPHEADER, $header);
        if ($method == "POST") {
            if ($multiPart) {
                curl_setopt($curl, CURLOPT_POSTFIELDS, $data);
            } else {
                curl_setopt($curl, CURLOPT_POSTFIELDS , json_encode($data));
            }
            curl_setopt($curl, CURLOPT_CUSTOMREQUEST, $method);
        }
        if ($method == "PATCH") {
            curl_setopt($curl, CURLOPT_POSTFIELDS, json_encode($data));
            curl_setopt($curl, CURLOPT_CUSTOMREQUEST, $method);
        }
        if ($method == "DELETE") {
            curl_setopt($curl, CURLOPT_POSTFIELDS, json_encode($data));
            curl_setopt($curl, CURLOPT_CUSTOMREQUEST, $method);
        }
        $response = curl_exec($curl);
        if (curl_errno($curl)) echo curl_error($curl);
        curl_close($curl);
        if($jsonDecode){
			return $response;
		}else{
            return json_decode($response, true);
		}
    }
}
?>

<div class="sp-form-container">
  <div class="sp-step-flow-f24431">
    <div class="large-setting arrow sp-clearfix">
      <div class="step active" title="入力">
        <span>入力</span>
      </div>
      <div class="step" title="確認">
        <span>確認</span>
      </div>
      <div class="step" title="完了">
        <span>完了</span>
      </div>
    </div>
    <div class="small-setting arrow sp-clearfix">
      <div class="step active" title="入力">
        <span>入力</span>
      </div>
      <div class="step" title="確認">
        <span>確認</span>
      </div>
      <div class="step" title="完了">
        <span>完了</span>
      </div>
    </div>
  </div>
  <div class="sp-form-item sp-form-html" th:inline="none"><p><span style="font-size: 18pt;">登録情報変更フォーム</span></p></div>
  <div class="sp-form-item sp-form-html" th:inline="none">変更する登録情報をご入力の上、「確認画面へ」ボタンを押してください</div>
  <!--/* 名前(name) */-->
  <sp:input-field name="f0xx"></sp:input-field>
  <div class="sp-form-item sp-form-field">
    <div class="sp-form-label">
      <th:block th:text="${fields['f0xx'].label}">
        Label
      </th:block>
    </div>
      <span type="name" th:name="${fields['f0xx'].name}" th:text="${siteClient.record[1]}" th:value="${siteClient.record[1]}"></span>
      <input type="hidden" class="sp-form-control" th:name="${fields['f0xx'].name}" th:placeholder="${fields['f0xx'].placeholder}" th:value="${#maps.containsKey(inputs, 'f0xx') ? inputs['f0xx'] : siteClient.record[1]}" th:if="${fields['f0xx'].control == 'text'}">
      <!--ZipCode Option-->
      <div class="sp-form-zip-code" th:if="${fields['f0xx'].control == 'zipCode'}">
        <input type="text" class="sp-form-control" th:name="${fields['f0xx'].name}" th:placeholder="${fields['f0xx'].placeholder}" th:value="${#maps.containsKey(inputs, 'f0xx') ? inputs['f0xx'] : siteClient.record[1]}">
        <button class="sp-form-zip-code-button" th:data-zipcode="|zipCodeSearch${fields['f0xx'].name}|" th:if="${fields['f0xx'].addressByZipCode != null}" th:text="${fields['f0xx'].zipCodeButtonLabel}">住所検索</button>
      </div>
      <span class="sp-form-noted" th:if="${fields['f0xx'].help != null}" th:text="${fields['f0xx'].help}">Help text</span>
    </div>
    <!--/* メールアドレス(mail) */-->
    <sp:input-field name="f0xx"></sp:input-field>
    <div class="sp-form-item sp-form-field">
      <div class="sp-form-label">
        <th:block th:text="${fields['f0xx'].label}">
          Label
        </th:block>
      </div>
        <span type="email" th:name="${fields['f0xx'].name}" th:text="${siteClient.record[2]}" th:value="${siteClient.record[2]}"></span>
        <input type="hidden" class="sp-form-control" th:name="${fields['f0xx'].name}" th:placeholder="${fields['f0xx'].placeholder}" th:value="${#maps.containsKey(inputs, 'f0xx') ? inputs['f0xx'] : siteClient.record[2]}">
        <span class="sp-form-noted" th:if="${fields['f0xx'].help != null}" th:text="${fields['f0xx'].help}">Help text</span>
        <span class="sp-form-error" th:if="${errors['f0xx'] != null}" th:text="${errors['f0xx'].message}">Error message</span>
    </div>
      <!--/* 都道府県(pref) */-->
      <sp:input-field name="f0xx"></sp:input-field>
      <div class="sp-form-item sp-form-field">
        <div class="sp-form-label">
          <th:block th:text="${fields['f0xx'].label}">
            Label
          </th:block>
          <span class="sp-form-required" th:if="${fields['f0xx'].required}" th:text="${fields['f0xx'].requiredIndicator}">*</span>
        </div>
        <div class="sp-form-data">
        <div class="sp-form-dropdown">
          <select class="sp-form-control" th:name="${fields['f0xx'].name}" th:with="default=${#maps.containsKey(inputs, 'f0xx') ? inputs['f0xx'] : #strings.toString(siteClient.record[37]?.id)}">
            <option value="" th:text="${fields['f0xx'].unselectedLabel}" th:selected="${default == null}">Select option</option>
            <option th:each="option : ${fields['f0xx'].options}" th:value="${option.id}" th:text="${option.label}" th:selected="${default == #strings.toString(option.id)}">Item</option>
          </select>
          <span class="sp-form-dropdown-icon"></span>
        </div>
        <span class="sp-form-noted" th:if="${fields['f0xx'].help != null}" th:text="${fields['f0xx'].help}">Help text</span>
        <span class="sp-form-error" th:if="${errors['f0xx'] != null}" th:text="${errors['f0xx'].message}">Error message</span>
        </div>
      </div>
  <!--/* 郵便番号(zipCode) */-->
  <sp:input-field name="f0xx"></sp:input-field>
  <div class="sp-form-item sp-form-field">
    <div class="sp-form-label">
      <th:block th:text="${fields['f0xx'].label}">
        Label
      </th:block>
      <span class="sp-form-required" th:if="${fields['f0xx'].required}" th:text="${fields['f0xx'].requiredIndicator}">*</span>
    </div>
    <div class="sp-form-data">
      <input type="text" class="sp-form-control" th:name="${fields['f0xx'].name}" th:placeholder="${fields['f0xx'].placeholder}" th:value="${#maps.containsKey(inputs, 'f0xx') ? inputs['f0xx'] : siteClient.record[3]}" th:if="${fields['f0xx'].control == 'text'}">
      <!--ZipCode Option-->
      <div class="sp-form-zip-code" th:if="${fields['f0xx'].control == 'zipCode'}">
        <input type="text" class="sp-form-control" th:name="${fields['f0xx'].name}" th:placeholder="${fields['f0xx'].placeholder}" th:value="${#maps.containsKey(inputs, 'f0xx') ? inputs['f0xx'] : siteClient.record[3]}">
        <button class="sp-form-zip-code-button" th:data-zipcode="|zipCodeSearch${fields['f0xx'].name}|" th:if="${fields['f0xx'].addressByZipCode != null}" th:text="${fields['f0xx'].zipCodeButtonLabel}">住所検索</button>
      </div>
      <span class="sp-form-noted" th:if="${fields['f0xx'].help != null}" th:text="${fields['f0xx'].help}">Help text</span>
      <span class="sp-form-error" th:data-zipcode="|zipCodeError${fields['f0xx'].name}|" th:text="${errors['f0xx']?.message}">Error message</span>
    </div>
  </div>
  <!--/* 市区町村(municipalities) */-->
  <sp:input-field name="f0xx"></sp:input-field>
  <div class="sp-form-item sp-form-field">
    <div class="sp-form-label">
      <th:block th:text="${fields['f0xx'].label}">
        Label
      </th:block>
      <span class="sp-form-required" th:if="${fields['f0xx'].required}" th:text="${fields['f0xx'].requiredIndicator}">*</span>
    </div>
    <div class="sp-form-data">
      <input type="text" class="sp-form-control" th:name="${fields['f0xx'].name}" th:placeholder="${fields['f0xx'].placeholder}" th:value="${#maps.containsKey(inputs, 'f0xx') ? inputs['f0xx'] : siteClient.record[4]}" th:if="${fields['f0xx'].control == 'text'}">
      <!--ZipCode Option-->
      <div class="sp-form-zip-code" th:if="${fields['f0xx'].control == 'zipCode'}">
        <input type="text" class="sp-form-control" th:name="${fields['f0xx'].name}" th:placeholder="${fields['f0xx'].placeholder}" th:value="${#maps.containsKey(inputs, 'f0xx') ? inputs['f0xx'] : siteClient.record[4]}">
        <button class="sp-form-zip-code-button" th:data-zipcode="|zipCodeSearch${fields['f0xx'].name}|" th:if="${fields['f0xx'].addressByZipCode != null}" th:text="${fields['f0xx'].zipCodeButtonLabel}">住所検索</button>
      </div>
      <span class="sp-form-noted" th:if="${fields['f0xx'].help != null}" th:text="${fields['f0xx'].help}">Help text</span>
      <span class="sp-form-error" th:data-zipcode="|zipCodeError${fields['f0xx'].name}|" th:text="${errors['f0xx']?.message}">Error message</span>
    </div>
  </div>
  <!--/* 番地(block) */-->
  <sp:input-field name="f0xx"></sp:input-field>
  <div class="sp-form-item sp-form-field">
    <div class="sp-form-label">
      <th:block th:text="${fields['f0xx'].label}">
        Label
      </th:block>
      <span class="sp-form-required" th:if="${fields['f0xx'].required}" th:text="${fields['f0xx'].requiredIndicator}">*</span>
    </div>
    <div class="sp-form-data">
      <input type="text" class="sp-form-control" th:name="${fields['f0xx'].name}" th:placeholder="${fields['f0xx'].placeholder}" th:value="${#maps.containsKey(inputs, 'f0xx') ? inputs['f0xx'] : siteClient.record[5]}" th:if="${fields['f0xx'].control == 'text'}">
      <!--ZipCode Option-->
      <div class="sp-form-zip-code" th:if="${fields['f0xx'].control == 'zipCode'}">
        <input type="text" class="sp-form-control" th:name="${fields['f0xx'].name}" th:placeholder="${fields['f0xx'].placeholder}" th:value="${#maps.containsKey(inputs, 'f0xx') ? inputs['f0xx'] : siteClient.record[5]}">
        <button class="sp-form-zip-code-button" th:data-zipcode="|zipCodeSearch${fields['f0xx'].name}|" th:if="${fields['f0xx'].addressByZipCode != null}" th:text="${fields['f0xx'].zipCodeButtonLabel}">住所検索</button>
      </div>
      <span class="sp-form-noted" th:if="${fields['f0xx'].help != null}" th:text="${fields['f0xx'].help}">Help text</span>
      <span class="sp-form-error" th:data-zipcode="|zipCodeError${fields['f0xx'].name}|" th:text="${errors['f0xx']?.message}">Error message</span>
    </div>
  </div>
  <!--/* マンション・ビル名(building) */-->
  <sp:input-field name="f0xx"></sp:input-field>
  <div class="sp-form-item sp-form-field">
    <div class="sp-form-label">
      <th:block th:text="${fields['f0xx'].label}">
        Label
      </th:block>
      <span class="sp-form-required" th:if="${fields['f0xx'].required}" th:text="${fields['f0xx'].requiredIndicator}">*</span>
    </div>
    <div class="sp-form-data">
      <input type="text" class="sp-form-control" th:name="${fields['f0xx'].name}" th:placeholder="${fields['f0xx'].placeholder}" th:value="${#maps.containsKey(inputs, 'f0xx') ? inputs['f0xx'] : siteClient.record[6]}" th:if="${fields['f0xx'].control == 'text'}">
      <!--ZipCode Option-->
      <div class="sp-form-zip-code" th:if="${fields['f0xx'].control == 'zipCode'}">
        <input type="text" class="sp-form-control" th:name="${fields['f0xx'].name}" th:placeholder="${fields['f0xx'].placeholder}" th:value="${#maps.containsKey(inputs, 'f0xx') ? inputs['f0xx'] : siteClient.record[6]}">
        <button class="sp-form-zip-code-button" th:data-zipcode="|zipCodeSearch${fields['f0xx'].name}|" th:if="${fields['f0xx'].addressByZipCode != null}" th:text="${fields['f0xx'].zipCodeButtonLabel}">住所検索</button>
      </div>
      <span class="sp-form-noted" th:if="${fields['f0xx'].help != null}" th:text="${fields['f0xx'].help}">Help text</span>
      <span class="sp-form-error" th:data-zipcode="|zipCodeError${fields['f0xx'].name}|" th:text="${errors['f0xx']?.message}">Error message</span>
    </div>
  </div>
  <!--/* 希望占有面積(occupiedArea) */-->
  <sp:input-field name="f0xx"></sp:input-field>
  <div class="sp-form-item sp-form-field">
    <div class="sp-form-label">
      <th:block th:text="${fields['f0xx'].label}">
        Label
      </th:block>
      <span class="sp-form-required" th:if="${fields['f0xx'].required}" th:text="${fields['f0xx'].requiredIndicator}">*</span>
    </div>
    <div class="sp-form-data">
    <div class="sp-form-dropdown">
      <select class="sp-form-control" th:name="${fields['f0xx'].name}" th:with="default=${#maps.containsKey(inputs, 'f0xx') ? inputs['f0xx'] : #strings.toString(siteClient.record[9]?.id)}">
        <option value="" th:text="${fields['f0xx'].unselectedLabel}" th:selected="${default == null}">Select option</option>
        <option th:each="option : ${fields['f0xx'].options}" th:value="${option.id}" th:text="${option.label}" th:selected="${default == #strings.toString(option.id)}">Item</option>
      </select>
      <span class="sp-form-dropdown-icon"></span>
    </div>
    <span class="sp-form-noted" th:if="${fields['f0xx'].help != null}" th:text="${fields['f0xx'].help}">Help text</span>
    <span class="sp-form-error" th:if="${errors['f0xx'] != null}" th:text="${errors['f0xx'].message}">Error message</span>
    </div>
  </div>
  <!--/* ご予算(budget) */-->
  <sp:input-field name="f0xx"></sp:input-field>
  <div class="sp-form-item sp-form-field">
    <div class="sp-form-label">
      <th:block th:text="${fields['f0xx'].label}">
        Label
      </th:block>
      <span class="sp-form-required" th:if="${fields['f0xx'].required}" th:text="${fields['f0xx'].requiredIndicator}">*</span>
    </div>
    <div class="sp-form-data">
    <div class="sp-form-dropdown">
      <select class="sp-form-control" th:name="${fields['f0xx'].name}" th:with="default=${#maps.containsKey(inputs, 'f0xx') ? inputs['f0xx'] : #strings.toString(siteClient.record[10]?.id)}">
        <option value="" th:text="${fields['f0xx'].unselectedLabel}" th:selected="${default == null}">Select option</option>
        <option th:each="option : ${fields['f0xx'].options}" th:value="${option.id}" th:text="${option.label}" th:selected="${default == #strings.toString(option.id)}">Item</option>
      </select>
      <span class="sp-form-dropdown-icon"></span>
    </div>
    <span class="sp-form-noted" th:if="${fields['f0xx'].help != null}" th:text="${fields['f0xx'].help}">Help text</span>
    <span class="sp-form-error" th:if="${errors['f0xx'] != null}" th:text="${errors['f0xx'].message}">Error message</span>
    </div>
  </div>
  <!--/* 入居予定人数(residentNum) */-->
  <sp:input-field name="f0xx"></sp:input-field>
  <div class="sp-form-item sp-form-field">
    <div class="sp-form-label">
      <th:block th:text="${fields['f0xx'].label}">
        Label
      </th:block>
      <span class="sp-form-required" th:if="${fields['f0xx'].required}" th:text="${fields['f0xx'].requiredIndicator}">*</span>
    </div>
    <div class="sp-form-data">
    <div class="sp-form-dropdown">
      <select class="sp-form-control" th:name="${fields['f0xx'].name}" th:with="default=${#maps.containsKey(inputs, 'f0xx') ? inputs['f0xx'] : #strings.toString(siteClient.record[11]?.id)}">
        <option value="" th:text="${fields['f0xx'].unselectedLabel}" th:selected="${default == null}">Select option</option>
        <option th:each="option : ${fields['f0xx'].options}" th:value="${option.id}" th:text="${option.label}" th:selected="${default == #strings.toString(option.id)}">Item</option>
      </select>
      <span class="sp-form-dropdown-icon"></span>
    </div>
    <span class="sp-form-noted" th:if="${fields['f0xx'].help != null}" th:text="${fields['f0xx'].help}">Help text</span>
    <span class="sp-form-error" th:if="${errors['f0xx'] != null}" th:text="${errors['f0xx'].message}">Error message</span>
    </div>
  </div>
  <!--/* 来場人数(visitorNum) */-->
  <sp:input-field name="f0xx"></sp:input-field>
  <div class="sp-form-item sp-form-field">
    <div class="sp-form-label">
      <th:block th:text="${fields['f0xx'].label}">
        Label
      </th:block>
      <span class="sp-form-required" th:if="${fields['f0xx'].required}" th:text="${fields['f0xx'].requiredIndicator}">*</span>
    </div>
    <div class="sp-form-data">
    <div class="sp-form-dropdown">
      <select class="sp-form-control" th:name="${fields['f0xx'].name}" th:with="default=${#maps.containsKey(inputs, 'f0xx') ? inputs['f0xx'] : #strings.toString(siteClient.record[12]?.id)}">
        <option value="" th:text="${fields['f0xx'].unselectedLabel}" th:selected="${default == null}">Select option</option>
        <option th:each="option : ${fields['f0xx'].options}" th:value="${option.id}" th:text="${option.label}" th:selected="${default == #strings.toString(option.id)}">Item</option>
      </select>
      <span class="sp-form-dropdown-icon"></span>
    </div>
    <span class="sp-form-noted" th:if="${fields['f0xx'].help != null}" th:text="${fields['f0xx'].help}">Help text</span>
    <span class="sp-form-error" th:if="${errors['f0xx'] != null}" th:text="${errors['f0xx'].message}">Error message</span>
    </div>
  </div>

  <!--/* 予約日(reservationDate) */-->
  <sp:input-field name="f0xx" control="ymdText"></sp:input-field>
  <div class="sp-form-item sp-form-field">
    <div class="sp-form-label">
      <th:block th:text="${fields['f0xx'].label}">
        Label
      </th:block>
    </div>
    <div class="sp-form-data">
      <div class="sp-form-datetimes">
        <div class="sp-form-date">
          <span type="text" th:name="${fields['f0xx'].name}" th:text="${siteClient.record[15].year}" th:value="${siteClient.record[15].year}"></span>
          <input type="hidden" class="sp-form-control" th:name="${fields['f0xx:year'].name}" th:placeholder="${fields['f0xx'].placeholder.year}" th:value="${#maps.containsKey(inputs, 'f0xx:year') ? inputs['f0xx:year'] : siteClient.record[15]?.year}">
          <span class="sp-form-date-separator">/</span>
          <span type="text" th:name="${fields['f0xx'].name}" th:text="${siteClient.record[15].month}" th:value="${siteClient.record[15].month}"></span>
          <input type="hidden" class="sp-form-control" th:name="${fields['f0xx:month'].name}" th:placeholder="${fields['f0xx'].placeholder.month}" th:value="${#maps.containsKey(inputs, 'f0xx:month') ? inputs['f0xx:month'] : siteClient.record[15]?.month}">
          <span class="sp-form-date-separator">/</span>
          <span type="text" th:name="${fields['f0xx'].name}" th:text="${siteClient.record[15].day}" th:value="${siteClient.record[15].day}"></span>
          <input type="hidden" class="sp-form-control" th:name="${fields['f0xx:day'].name}" th:placeholder="${fields['f0xx'].placeholder.day}" th:value="${#maps.containsKey(inputs, 'f0xx:day') ? inputs['f0xx:day'] : siteClient.record[15]?.day}">
        </div>
      </div>
    </div>
  </div>
  <!--/* 予約時間(reservationTime) */-->
  <sp:input-field name="f0xx" control="hmsText"></sp:input-field>
  <div class="sp-form-item sp-form-field">
    <div class="sp-form-label">
      <th:block th:text="${fields['f0xx'].label}">
        Label
      </th:block>
    </div>
    <div class="sp-form-data">
      <div class="sp-form-datetimes">
        <div class="sp-form-time">
          <span type="text" th:name="${fields['f0xx'].name}" th:text="${siteClient.record[16]}" th:value="${siteClient.record[16]}"></span>
          <input type="hidden" class="sp-form-control" th:name="${fields['f0xx:hour'].name}" th:placeholder="${fields['f0xx'].placeholder.hour}" th:value="${#maps.containsKey(inputs, 'f0xx:hour') ? inputs['f0xx:hour'] : siteClient.record[16]?.hour}">
          <input type="hidden" class="sp-form-control" th:name="${fields['f0xx:minute'].name}" th:placeholder="${fields['f0xx'].placeholder.minute}" th:value="${#maps.containsKey(inputs, 'f0xx:minute') ? inputs['f0xx:minute'] : siteClient.record[16]?.minute}">
          <input type="hidden" class="sp-form-control" th:name="${fields['f0xx:second'].name}" th:placeholder="${fields['f0xx'].placeholder.second}" th:value="${#maps.containsKey(inputs, 'f0xx:second') ? inputs['f0xx:second'] : siteClient.record[16]?.second}">
        </div>
      </div>
    </div>
  </div>
  <div class="sp-form-item sp-form-interaction">
    <button class="sp-form-prev-button" type="submit" name="action" value="previous" th:if="!${step.isFirst}" th:text="${step.prevButtonLabel}">Prev</button>
    <button class="sp-form-next-button" type="submit" name="action" value="next" th:text="${step.nextButtonLabel}">Next</button>
  </div>
</div>

:root {
  /*=============================
	カスタムプロパティ
  ==============================*/
  --base-color: #FFFFFF; /* フォームブロックの背景色 */
  --main-color: #0D60DB; /* メインカラー */
  --accent-color: #B8250F; /* アクセントカラー */
  --input-color: #F5F7FA; /* 入力欄の背景色 */
  --input-border-color: #D3D6DB; /* 入力欄の枠線の色 */
  --input-radius: 12px; /* 入力欄の角の丸さ */
  --transition: 0.1s; /* アニメーション時間 */

  /*------ 合計100%になるよう調整 -------*/
  --label-width: 25%; /* ラベル部分の幅 */
  --data-width: 75%; /* データ部分の幅 */
}

.sp-form-container {
  font-size:16px;
  padding:1em;
  box-sizing:border-box;
  max-width: 960px;
  color:#505050;
  background-color:var(--base-color);
  border:1px solid #E1E5EB;
  border-radius:var(--input-radius);
}

.sp-form-container .sp-form-item:not(:last-child) {
  margin-bottom:0.5em;
  padding:0.5em 1em;
}

.sp-form-field,
.sp-form-group {
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-orient:vertical;
  -webkit-box-direction:normal;
  -ms-flex-direction:column;
  flex-direction:column;
}

.sp-form-field>.sp-form-label,
.sp-form-group>.sp-form-label {
  font-size:1.15em;
  font-weight:bold;
  padding:.25em 0;
  word-break:break-all;
  box-sizing:border-box;
  color:#333333;
}

.sp-form-group-item>.sp-form-label {
  word-break:break-all;
  display:inline-block;
  margin-bottom:.2em;
}

.sp-form-field>.sp-form-data,
.sp-form-group>.sp-form-data {
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-orient:vertical;
  -webkit-box-direction:normal;
  -ms-flex-direction:column;
  flex-direction:column;
  word-break:break-all;
  padding:0.25em 0;
  box-sizing:border-box;
}

.sp-form-group-item>.sp-form-data {
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-orient:vertical;
  -webkit-box-direction:normal;
  -ms-flex-direction:column;
  flex-direction:column;
}

.sp-form-required {
  display:inline-block;
  margin:0 .5em;
  padding: 3px 6px;
  background:var(--accent-color);
  color:#ffffff;
  line-height:1;
  border-radius:.25em;
  font-size:0.7em;
  font-weight: bold;
  vertical-align: middle;
}

.sp-form-group-item:not(:last-child) { margin-bottom:.5em; }

.sp-form-noted {
  font-size:.8em;
  color:#808080;
  word-break:break-all;
  margin-top:.5em;
  padding-left:min(calc(var(--input-radius) / 2 - 4px), 8px);
}

.sp-form-error {
  font-size:.8em;
  color:var(--accent-color);
  padding-left:min(calc(var(--input-radius) / 2 - 4px), 8px);
}

.sp-form-control {
  -moz-appearance:none;
  -webkit-appearance:none;
  -ms-progress-appearance:none;
  appearance:none;
  font-family:inherit;
  font-size:1em;
  line-height:1.5;
  padding:.3em .7em;
  padding-left:clamp(12px, calc(var(--input-radius) - 2px), 24px);
  background:var(--input-color);
  color:#333333;
  box-sizing:border-box;
  width:100%;
  height:48px;
  margin-bottom:.3em;
  border:none;
  outline:none;
  border-radius:var(--input-radius);
  box-shadow:0 0 0 0.5px var(--input-border-color);
}
.sp-form-control:focus {
  box-shadow:0 0 0 2px var(--main-color);
}
.sp-form-control[type="number"] {
  height: 36px;
}

.sp-form-control:placeholder-shown { color:#aaa; }

.sp-form-control::placeholder { color:#aaa; }

.sp-form-control::-ms-input-placeholder { color:#aaa; }

.sp-form-control:-ms-input-placeholder { color:#aaa; }

.sp-form-control:-moz-placeholder { color:#aaa; }

textarea.sp-form-control {
  resize:vertical;
  padding-top:clamp(6px, calc(var(--input-radius) / 2), 18px);
  height:calc(1.5em * 5);
}

select.sp-form-control,
option.sp-form-control {
  -moz-appearance:none;
  -webkit-appearance:none;
  -ms-progress-appearance:none;
  appearance:none;
  padding-right:1.5em;
}

.sp-form-control>option { background:#FFFFFF;}

select.sp-form-control::-ms-expand { display:none; }

.sp-form-phone .sp-form-control { max-width:20em; }

.sp-form-phone>*:not(:only-child) { margin-right:.5rem; }

.sp-form-dropdown { position:relative; }

.sp-form-dropdown-icon {
  display:block;
  position:absolute;
  top:1.3em;
  right:1em;
  line-height:0;
  pointer-events:none;
}

.sp-form-dropdown-icon:after {
  content:"";
  display:block;
  border-top:0.333em solid #888;
  border-right:.333em solid transparent;
  border-left:.333em solid transparent;
}

.sp-form-selection {
  display:block;
  cursor: pointer;
  margin-bottom:.3em;
  padding:.25em .75em .35em;
  background:var(--input-color);
  border-radius: var(--input-radius);
  box-shadow:0 0 0 0.5px var(--input-border-color) ;
}

.sp-form-selection-label {
  display: inline-block;
  position: relative;
  vertical-align:middle;
  padding: 4px 0;
}

.sp-form-datetimes,
.sp-form-date,
.sp-form-time,
.sp-form-timezone {
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-orient:horizontal;
  -webkit-box-direction:normal;
  -ms-flex-flow:row wrap;
  flex-flow:row wrap;
  -webkit-box-align:center;
  -ms-flex-align:center;
  align-items:center;
}

.sp-form-datetime,
.sp-form-date,
.sp-form-time,
.sp-form-timezone {
  margin-right:.5rem;
  -ms-flex-wrap:nowrap;
  flex-wrap:nowrap;
}

.sp-form-datetime { max-width:20em; }

.sp-form-phone {
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-orient:horizontal;
  -webkit-box-direction:normal;
  -ms-flex-flow:row wrap;
  flex-flow:row wrap;
  -webkit-box-align:center;
  -ms-flex-align:center;
  align-items:center;
}

.sp-form-date-separator {
  width:1em;
  margin-bottom: .3em;
  text-align:center;
  -ms-flex-negative:1;
  flex-shrink:0;
}

.sp-form-number { max-width:20em; }

.sp-form-email-reenter,
.sp-form-password-reenter {
  font-size:.9em;
  margin-bottom:.2em;
  padding-left:min(calc(var(--input-radius) / 2 - 4px), 8px);
}

.sp-form-html p { margin:0; }

.sp-form-interaction {
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -ms-flex-wrap:wrap;
  flex-wrap:wrap;
  margin-top:1em;
}

.sp-form-prev-button {
  color:#333333;
  background-color:var(--base-color);
  border:2.0px solid #666666;
}

.sp-form-next-button,
.sp-form-login-button {
  color:#ffffff;
  background-color:var(--main-color);
  border:none;
}

.sp-form-field .sp-form-embedded { padding-left:.25em; }

.sp-form-selection>input[type="radio"],
.sp-form-selection>input[type="checkbox"] {
  display: none;
  vertical-align:middle;
  margin-left:0;
}

.sp-form-selection>input[type="radio"]+.sp-form-selection-label::before,
.sp-form-selection>input[type="checkbox"]+.sp-form-selection-label::before{
  display: inline-block;
  content:"";
  position: relative;
  box-sizing: border-box;
  top: 4px;
  margin-right: 6px;
  width: 20px;
  height: 20px;
  background: #ffffff;
  border:10px solid #ffffff;
  box-shadow: 0 0 0 0.5px var(--input-border-color);
  transition: var(--transition);
}

.sp-form-selection>input[type="radio"]+.sp-form-selection-label::before {
  border-radius: 50%;
}

.sp-form-selection>input[type="checkbox"]+.sp-form-selection-label::before {
  border-radius: min(var(--input-radius), 4px);
}

.sp-form-selection>input[type="radio"]:checked+.sp-form-selection-label::before{
  background: var(--main-color);
  border:4px solid #ffffff;
}
.sp-form-selection>input[type="checkbox"]+.sp-form-selection-label::after{
  border-right: 3px solid var(--main-color);
  border-bottom: 3px solid var(--main-color);
  content: '';
  display: inline-block;
  width: 6px;
  height: 10px;
  left: 9px;
  margin-top: -7px;
  position: absolute;
  top: 50%;
  transform: rotate(45deg);
  opacity: 0;
  transition: var(--transition);
}

.sp-form-selection>input[type="checkbox"]:checked+.sp-form-selection-label::after{
  left: 6px;
  opacity: 1;
}

.sp-form-date>input,
.sp-form-time>input { max-width:7em; }

.sp-form-date>input[type="date"]{
  min-width: 140px;
  max-width: none;
}
.sp-form-time>input[type="time"] {
  min-width: 92px;
  max-width: none;
}

.sp-form-interaction>button {
  -webkit-box-flex:1;
  -ms-flex-positive:1;
  flex-grow:1;
  cursor:pointer;
  font-size:1em;
  font-weight:bold;
  line-height:1.5;
  margin:.5rem;
  padding:.75rem 0;
  text-align:center;
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
  white-space:nowrap;
  border-radius:var(--input-radius);
}

@media (min-width:768px) {
  .sp-form-container {
    font-size:initial;
    padding:3em;
    margin:2em auto;
  }

.sp-form-container .sp-form-item:not(:last-child) {
  margin-bottom:0.5em;
  padding-bottom:0.5em;
}

  .sp-form-field,
  .sp-form-group {
    -webkit-box-orient:horizontal;
    -webkit-box-direction:normal;
    -ms-flex-flow:row nowrap;
    flex-flow:row nowrap;
  }

  .sp-form-field>.sp-form-label,
  .sp-form-group>.sp-form-label {
    font-size:1em;
    width:var(--label-width);
    padding:.5em;
  }

  .sp-form-group .sp-form-group-item>.sp-form-label {
    font-size:.9em;
    padding-right:.5em;
  }

  .sp-form-field>.sp-form-data,
  .sp-form-group>.sp-form-data {
    font-size:1em;
    width:var(--data-width);
    padding:.5em;
  }

  .sp-form-group>.sp-form-data {
    -webkit-box-orient:horizontal;
    -webkit-box-direction:normal;
    -ms-flex-flow:row wrap;
    flex-flow:row wrap;
  }

  .sp-form-group.sp-form-group-vertical>.sp-form-data {
    -webkit-box-orient:vertical;
    -webkit-box-direction:normal;
    -ms-flex-direction:column;
    flex-direction:column;
  }

  .sp-form-required {
    font-size:0.8em;
  }

  .sp-form-group-item { padding:.25em; }

  .sp-form-group-item:not(:last-child) { margin-bottom:0; }

  .sp-form-control { font-size:.9em; }

  .sp-form-selection {
    font-size:.9em;
    margin:0 .5em 0 0;
    padding-right:1em;
    background:none;
    box-shadow:none;
  }
  .sp-form-selection-vertical>.sp-form-selection {
    margin:0 auto 0 0;
    padding-right: 4em;
  }

  .sp-form-selection-vertical {
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-orient:vertical;
    -webkit-box-direction:normal;
    -ms-flex-direction:column;
    flex-direction:column;
  }

  .sp-form-selection-horizontal {
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-orient:horizontal;
    -webkit-box-direction:normal;
    -ms-flex-flow:row wrap;
    flex-flow:row wrap;
  }

  .sp-form-interaction {
    justify-content:center;
    margin-top:2em;
  }

  .sp-form-embedded { font-size:.9em; }

  .sp-form-group-item .sp-form-embedded { padding-right:5em; }

  .sp-form-selection>input[type="radio"]+.sp-form-selection-label::before,
  .sp-form-selection>input[type="checkbox"]+.sp-form-selection-label::before{
    background: var(--input-color);
    border:10px solid var(--input-color);
  }

  .sp-form-selection>input[type="radio"]:hover+.sp-form-selection-label::before,
  .sp-form-selection>input[type="checkbox"]:hover+.sp-form-selection-label::before{
    border:10px solid #dddddd;
  }

  .sp-form-selection>input[type="radio"]:checked+.sp-form-selection-label::before{
    border:4px solid var(--input-color);
  }

  .sp-form-date>input[type="date"]{
    min-width: unset;
  }
  .sp-form-time>input[type="time"] {
    min-width: unset;
  }

  .sp-form-interaction>button {
    -webkit-box-flex:0;
    -ms-flex-positive:0;
    flex-grow:0;
    padding:.75rem 5em;
  }
}

.sp-form-recaptcha {
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-pack:start;
  -ms-flex-pack:start;
  justify-content:flex-start;
}

.sp-form-recaptcha-right {
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-pack:end;
  -ms-flex-pack:end;
  justify-content:flex-end;
}

.sp-form-recaptcha-center {
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-pack:center;
  -ms-flex-pack:center;
  justify-content:center;
}

.sp-form-file-button {
  padding:.8em 2em;
  font-weight: bold;
  cursor:pointer;
  color:#666666;
  background-color:#f6f6f6;
  border:none;
  border: solid 2px #a0a0a0;
  border-radius:var(--input-radius);
  transition: var(--transition);
  align-items: center;
  justify-content: center;
}
.sp-form-file-button::before{
  display: inline-block;
  content: url('data:image/svg+xml;utf-8,<svg fill="%23666" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M14.4,7.9l-5.7,5.7c-0.4,0.4-0.8,0.6-1.2,0.8c-0.7,0.3-1.4,0.3-2.1,0.2c-0.7-0.1-1.4-0.5-1.9-1c-0.4-0.4-0.6-0.8-0.8-1.2c-0.3-0.7-0.3-1.4-0.2-2.1c0.1-0.7,0.5-1.4,1-1.9L9.7,2c0.2-0.2,0.5-0.4,0.8-0.5c0.4-0.2,0.9-0.2,1.3-0.1C12.2,1.4,12.6,1.6,13,2c0.2,0.2,0.4,0.5,0.5,0.8c0.2,0.4,0.2,0.9,0.1,1.3c-0.1,0.4-0.3,0.8-0.6,1.2l-6.2,6.2c-0.1,0.1-0.2,0.1-0.3,0.2c-0.1,0.1-0.3,0.1-0.5,0c-0.2,0-0.3-0.1-0.4-0.2c-0.1-0.1-0.1-0.2-0.2-0.3c-0.1-0.1-0.1-0.3,0-0.5c0-0.2,0.1-0.3,0.2-0.4l5.5-5.5l-0.9-0.9L4.7,9.3C4.5,9.5,4.4,9.7,4.3,10c-0.2,0.4-0.2,0.8-0.1,1.2c0.1,0.4,0.3,0.8,0.6,1.1c0.2,0.2,0.4,0.4,0.7,0.5c0.4,0.2,0.8,0.2,1.2,0.1c0.4-0.1,0.8-0.3,1.1-0.6l6.2-6.2c0.3-0.3,0.6-0.8,0.8-1.2c0.3-0.6,0.3-1.4,0.2-2c-0.1-0.7-0.5-1.3-1-1.8c-0.3-0.3-0.8-0.6-1.2-0.8c-0.6-0.3-1.4-0.3-2-0.2C10,0.2,9.3,0.5,8.8,1L2.5,7.4C2,7.9,1.6,8.5,1.4,9.1C1,10,0.9,11,1.1,11.9c0.2,1,0.6,1.9,1.4,2.6C3,15,3.5,15.4,4.1,15.6C5.1,16,6,16.1,7,15.9c1-0.2,1.9-0.6,2.6-1.4l5.7-5.7L14.4,7.9z"/></svg>');
  margin-left: -0.5em;
  width: 16px;
  height: 100%;
  vertical-align: middle;
}

.sp-form-file-button:focus { outline:0; }

.sp-from-file-default-drag-drop-area {
  color:#333333;
  background-color:var(--input-color);
  border:2.0px dashed #6c757d;
  border-radius:0;
  width:100%;
  height:200px;
  text-align:center;
  border-radius: var(--input-radius);
}

.sp-from-file-ondraghover-drag-drop-area {
  color:#333333;
  background-color:#dddddd;
  border:2.0px dashed #6c757d;
  border-radius:0;
  width:100%;
  height:200px;
  text-align:center;
  border-radius: var(--input-radius);
}

.sp-from-file-ondragleave-drag-drop-area {
  color:#333333;
  background-color:#dddddd;
  border:2.0px dashed #6c757d;
  border-radius:0;
  width:100%;
  height:200px;
  border-radius: var(--input-radius);
}

.sp-from-file-ondrop-drag-drop-area {
  color:#333333;
  background-color:var(--input-color);
  border:2.0px dashed #6c757d;
  border-radius:0;
  width:100%;
  height:200px;
  border-radius: var(--input-radius);
}

.sp-form-embedded>.sp-file-info:last-child { padding-bottom:0; }

.sp-file-info {
  padding-top:1em;
  padding-bottom:1em;
  line-height:1.5;
}

.sp-file-info>div { width:100%; }

.main-text {
  font-size:1em;
  font-weight:bold;
}

[class^="sp-step-flow-f"] {
  margin:3em 0 2em;
  }

[class^="sp-step-flow-f"]>.large-setting {
  display:flex;
  justify-content: center;
}

[class^="sp-step-flow-f"]>.small-setting { display:none; }

[class^="sp-step-flow-f"]>.large-setting,
[class^="sp-step-flow-f"]>.small-setting {
  text-align: center;
  margin: 0 auto;
  padding: 0 20px;
}

[class^="sp-step-flow-f"]>.large-setting>.step,
[class^="sp-step-flow-f"]>.small-setting>.step {
  word-wrap: break-word;
  min-width: 0;
  text-align:center;
}

[class^="sp-step-flow-f"]>.large-setting>.step {
  flex: 1;
  margin-right:36px;
  font-size:16px;
}

[class^="sp-step-flow-f"]>.small-setting>.step {
  font-size:14px;
}

[class^="sp-step-flow-f"]>.large-setting>.step:last-child,
[class^="sp-step-flow-f"]>.small-setting>.step:last-child {
  margin-right: 0;
}

[class^="sp-step-flow-f"]>.large-setting>.step>span,
[class^="sp-step-flow-f"]>.small-setting>.step>span {
  overflow: hidden;
  text-overflow: ellipsis;
  position:relative;
  display:block;
  padding-top: 16px;
  white-space:nowrap;
  color:#D3D6DB;
  font-weight:bold;
}

[class^="sp-step-flow-f"]>.large-setting>.step>span::before,
[class^="sp-step-flow-f"]>.small-setting>.step>span::before {
  position: absolute;
  content: "";
  display: block;
  top: 0;
  width: 100%;
  background: #D3D6DB;
}

[class^="sp-step-flow-f"]>.large-setting>.step>span::before {
  height: 6px;
  border-radius: 6px;
}

[class^="sp-step-flow-f"]>.small-setting>.step>span::before {
  height: 4px;
  border-radius: 4px;
}

[class^="sp-step-flow-f"]>.large-setting>.step.active>span,
[class^="sp-step-flow-f"]>.small-setting>.step.active>span { color:var(--main-color); }

[class^="sp-step-flow-f"]>.large-setting>.step.active>span::before,
[class^="sp-step-flow-f"]>.small-setting>.step.active>span::before { background:var(--main-color); }

@media (max-width: 765px) {
  [class^="sp-step-flow-f"]>.large-setting { display:none; }

  [class^="sp-step-flow-f"]>.small-setting {
    display:flex;
    justify-content: center;
    counter-reset:step;
  }

  [class^="sp-step-flow-f"]>.small-setting>.step>span { display: none; }

  [class^="sp-step-flow-f"]>.small-setting>.step {
    display: flex;
    align-items: center;
    width: auto;
    margin: 0;
    background: none;
    color: #ffffff;
    font-weight: bold;
  }

  [class^="sp-step-flow-f"]>.small-setting>.step::before {
    counter-increment: step 1;
    content: counter(step, decimal);
    width:24px;
    height:24px;
    background: var(--main-color);
    border-radius: 50%;
    font-size: 12px;
    line-height: 24px;
  }

  [class^="sp-step-flow-f"]>.small-setting>.step:not(:last-child) { flex-grow: 1; }

  [class^="sp-step-flow-f"]>.small-setting>.step:not(:last-child)::after {
    content: "";
    width: calc(100% - 24px);
    height:2px;
    background: var(--main-color);
    vertical-align: middle;
  }

  [class^="sp-step-flow-f"]>.small-setting>.step.active::after,
  [class^="sp-step-flow-f"]>.small-setting>.step.active~.step::before,
  [class^="sp-step-flow-f"]>.small-setting>.step.active~.step::after { background:#D3D6DB; }
}