@charset "UTF-8";
html {
  font-size: 62.5%;
  scroll-padding-top: 110px;
  overflow-x: hidden;
}
@media (max-width: 750px) {
  html {
    scroll-padding-top: 120px;
  }
}

* {
  box-sizing: border-box;
}

img {
  max-width: 100%;
  height: auto;
}

body {
  font-family: 'M PLUS 1', sans-serif;
  font-size: 1rem;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  position: relative;
}
@media screen and (min-width: 751px) {
  body {
    font-size: 1.8rem;
  }
}

ul, ol, dl {
  font-size: 1em;
}

ul li ul, ul li ol {
  margin: 0;
}

a, button {
  text-decoration: none;
  transition: opacity 0.3s ease;
}
a:hover, button:hover {
  opacity: 0.7;
}

.flex {
  display: flex;
}

.flex--space {
  justify-content: space-between;
}

.flex--wrap {
  flex-wrap: wrap;
}

@media (max-width: 750px) {
  .pc_only {
    display: none !important;
  }
}
@media screen and (min-width: 751px) {
  .sp_only {
    display: none !important;
  }
}
.inner-1200 {
  width: calc(100% - 80px);
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}
/* Margin
--------------------------------------------- */
/* Top */
.mt00 {margin-top: 0 !important;}
.mt05 {margin-top: 5px !important;}
.mt10 {margin-top: 10px !important;}
.mt15 {margin-top: 15px !important;}
.mt20 {margin-top: 20px !important;}
.mt25 {margin-top: 25px !important;}
.mt30 {margin-top: 30px !important;}
.mt35 {margin-top: 35px !important;}
.mt40 {margin-top: 40px !important;}
.mt45 {margin-top: 45px !important;}
.mt50 {margin-top: 50px !important;}
.mt10 {margin-top: 1.0em !important;}
.mt06 {margin-top: 0.6em !important;}
/* Right */
.mr05 {margin-right: 5px !important;}
.mr10 {margin-right: 10px !important;}
.mr15 {margin-right: 15px !important;}
.mr20 {margin-right: 20px !important;}
.mr25 {margin-right: 25px !important;}
.mr30 {margin-right: 30px !important;}
.mr35 {margin-right: 35px !important;}
.mr40 {margin-right: 40px !important;}
.mr45 {margin-right: 45px !important;}
.mr50 {margin-right: 50px !important;}
/* Bottom */
.mb00 {margin-bottom: 0px !important;}
.mb05 {margin-bottom: 5px !important;}
.mb10 {margin-bottom: 10px !important;}
.mb15 {margin-bottom: 15px !important;}
.mb20 {margin-bottom: 20px !important;}
.mb25 {margin-bottom: 25px !important;}
.mb30 {margin-bottom: 30px !important;}
.mb35 {margin-bottom: 35px !important;}
.mb40 {margin-bottom: 40px !important;}
.mb45 {margin-bottom: 45px !important;}
.mb50 {margin-bottom: 50px !important;}
/* Left */
.ml05 {margin-left: 5px !important;}
.ml10 {margin-left: 10px !important;}
.ml15 {margin-left: 15px !important;}
.ml20 {margin-left: 20px !important;}
.ml25 {margin-left: 25px !important;}
.ml30 {margin-left: 30px !important;}
.ml35 {margin-left: 35px !important;}
.ml40 {margin-left: 40px !important;}
.ml45 {margin-left: 45px !important;}
.ml50 {margin-left: 50px !important;}


/*----------------------------
下層ページ
-----------------------------*/
.wrapper .contents {
    min-height: calc(100vh - 298px);
    margin-top: 75px;
    margin-bottom: 50px;
}
.wrapper .mainVisual{
    margin-top: 60px;
    margin-bottom: 0;
    padding: 0;
    position: relative
}
.wrapper .mainVisual img{
    height: 320px;
    width: 100%;
}
.wrapper  .mainVisual h1{
    color: #fff;
    text-align: center;
    font-size: 42px;
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    margin: 0;
    padding: 0;
    width: 80%;
}
@media screen and (max-width: 1000px) {
  .wrapper  .mainVisual h1{
    font-size: 32px;
  }
}

.wrapper .contents .webinarDetail{
  margin: 120px auto;
  max-width: 900px;
}
.wrapper .contents .webinarDetail .webinarDetailBox{
  background: #FFFFFF 0% 0% no-repeat padding-box;
  border: 1px solid #707070;
}
.wrapper .contents h2.title{
  color: #333333;
  font-size: 3.5rem;
  font-weight: bold;
  text-align: center;
  margin-bottom: 15px;
  margin-top: 0;
  padding-top: 20px;
}
.wrapper .contents p.cautionNote{
    margin-bottom: 8px;
    font-size: 0.9em;
    color: #afafaf;
}

<title th:text="${page.title}"></title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v6.1.1/css/all.css">
<!--/* Font */-->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=M+PLUS+1:wght@500;700&display=swap" rel="stylesheet">
<!--/* Font */-->

<!--/* ページ共通のCSS */-->

<!--/* ページ共通のCSS */-->

<div class="sp-record-list-container">
    <div class="sp-record-list-parts">
        <div class="containerBox">
            <div class="webinar" th:each="record, stat : ${pageRecords}">
                <!--/* フィールド指定：メイン画像 */-->
                <sp:record-data-field name="f0xx"></sp:record-data-field>
                <th:block th:with="files=${record['f0xx']}" th:remove="${files == null ? 'body' : 'none'}">
                    <img th:if="${files.size == 1}" th:with="file=${files[0]}" class="imgBox" th:src="${file.fileUrl}" alt="" />
                </th:block>
                <div class="textBox">
                    <!--/* フィールド指定：ウェビナータイトル */-->
                    <sp:record-data-field name="f0xx"></sp:record-data-field>
                    <p class="titleTxt" th:text="${record['f0xx']}">Example</p>
                    <!--/* フィールド指定：開催日、開催時間、終了時間 */-->
                    <sp:record-data-field name="f0xx"></sp:record-data-field>
                    <sp:record-data-field name="f0xx"></sp:record-data-field>
                    <sp:record-data-field name="f0xx"></sp:record-data-field>
                    <p class="dateTxt" th:with="week=${ { '', '日', '月', '火', '水', '木', '金', '土' } }" th:text="${record['f0xx'] != null && record['f0xx'] != null && record['f0xx'] != null} ? '開催日：'+${record['f0xx'].format('yyyy/MM/dd')}+ |（${week[record['f0xx'].format('e')]}）|+ ${record['f0xx'].format('HH:mm')}+' ～ '+${record['f0xx'].format('HH:mm')} : ''">2000/01/01 </p>
                    <p class="seminarTxt" ><span style="color:#afafaf;">開催概要</span><br />
                    <!--/* フィールド指定：ウェビナー概要 (text) */-->
                    <sp:record-data-field name="f0xx"></sp:record-data-field>
                    <span th:text="${record['f0xx']}">Example</span>
                    </p><br />
                    <sp:record-data-field name="f_id"></sp:record-data-field>
                    <!--/* ページ指定：ウェビナー詳細(未ログイン) */-->
                    <a th:if="!${cp.result.value['login']}" th:href="|${pages['p0xxxxx']?.path ?: '/404'}?${record.linkParam}|" class="webinarLink">詳細を見る</a>
                    <!--/* ページ指定：ウェビナー詳細 */-->
                    <a th:if="${cp.result.value['login']}" th:href="|${pages['p0xxxxx']?.path ?: '/404'}?${record.linkParam}|" class="webinarLink">詳細を見る</a>
                </div>
            </div>
        </div>
        <div class="sp-record-list-no-records" th:if="${recordList.totalRecordCount == 0}">
            開催中のウェビナーはありません。
        </div>
    </div>
</div>

.webinar{
    border: solid;
    margin-bottom: 25px;
    display: flex;
    border-color: #eeeeee;
    border-width: 1px;
    overflow: hidden;
    border-radius: 10px;
}
.webinar .imgBox{
    display: inline-block;
    width: 512px;
    margin: 0;
}
.webinar .textBox {
    display: inline-block;
    margin-left: 15px;
    vertical-align: top;
    padding: 10px;
    font-size: 20px;
    width: 600px;
}

@media (max-width: 1201px) {
  .webinar{
    display: block;
    overflow: hidden;
  }
  .webinar .imgBox{
    width: 100%;
    margin:0 auto;
  }
  .webinar .textBox {
      width:100%;
      margin:0;
  }
}


.webinar .textBox p.titleTxt{
    font-weight: bold;
    margin: 0 0 8px;
}

.webinar .textBox p.dateTxt,
.webinar .textBox p.seminarTxt{
    font-size:16px;
}
.webinar .textBox span{
    font-size:14px;
}
.webinar .textBox a{
    font-size:14px;
    text-decoration: underline;
    color:#0064B1;
    text-underline-offset: 0.15em;
}

<div class="wrapper">
    <!--/* ブロック：共通ヘッダブロック */-->
    <sp:block name="fcb0xxxxx"></sp:block>
    <div class="mainVisual">
        <!--/* サイトファイル：メインビジュアル */-->
        <img src="/_media/fy23_065_006.jpg" alt="maiVisual.jpg">
        <h1>ウェビナーアプリ デモ</h1>
    </div>        
    <div class="contents inner-1200 inner-sp mt00">
        <div class="webinarArea">
            <h2 class="title">開催予定のウェビナー</h2>
            <!--/* ブロック：ウェビナー一覧ブロック */-->
            <sp:block name="rlb0xxxx"></sp:block>
            <h2 class="title">ウェビナーアーカイブ</h2>
            <P class="cautionNote">※ アーカイブ動画を視聴するためには、会員登録が必要です。</P>
            <!--/* ブロック：アーカイブ一覧ブロック */-->
            <sp:block name="rlb0xxxx"></sp:block>
        </div>
    </div>
</div>

<?php
$SPIRAL->setTHValue("login",false);

<div class="sp-form-container">
    <!--/* id(id) */--> 
    <div class="sp-form-item sp-form-field"> 
      <div class="sp-form-label" th:text="${fields['id'].label}">
        Label
      </div> 
      <div class="sp-form-data">
        <input type="text" class="sp-form-control" name="id" autocomplete="off" th:value="${inputs['id']}" th:placeholder="${fields['id'].placeholder}">
      </div> 
    </div> 
    <!--/* password(password) */--> 
    <div class="sp-form-item sp-form-field"> 
      <div class="sp-form-label" th:text="${fields['password'].label}">
        Label
      </div> 
      <div class="sp-form-data">
        <input type="password" class="sp-form-control" name="password" autocomplete="off" th:placeholder="${fields['password'].placeholder}">
      </div> 
    </div> 
    <div class="sp-form-item sp-form-message">
      <span class="sp-form-error" th:if="${errors['login'] != null}" th:text="${errors['login'].message}">Error message</span>
    </div> 
      <div class="sp-form-item sp-form-interaction">
        <button class="sp-form-login-button" type="submit" name="action" value="login" th:text="${step.loginButtonLabel}">ログイン</button>
      </div>
    <div class="sp-form-item sp-form-LinkArea">
      <!--/* ページ指定：会員登録ページ */-->
      <a th:href="${pages['p0xxxxx']?.path ?:'/404'}">会員登録　<span class="fas fa-angle-right"></span></a><br />
    </div>
  </div>

.wrapper .contents .sp-form-container h3.title {
    position: relative;
    padding-bottom: 0;
    text-align: center;
    color: #333;
    font-size: 1.5em;
}
.wrapper .contents .sp-form-container .sp-form-message{
  text-align: center;
}
.wrapper .contents .sp-form-container .sp-form-message a{
  color: #0064B1;
}
.wrapper .contents div.cautionBox {
    font-weight: bold;
    line-height: 2em;
    text-align: center;
}
.sp-form-LinkArea{
  text-align: center;
  line-height: 1.8;
  font-size: 1.2em;
}
.sp-form-LinkArea a{
  color: #0064B1;
}
: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-login-button,
.sp-form-next-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;
    margin: auto;
  }

  .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; }
}

<div class="wrapper">
    <!--/* ブロック指定：共通ヘッダブロック  */-->
    <sp:block name="fcb0xxxxx"></sp:block>
    <div class="contents inner-1200 inner-sp">
         <!--/* ブロック指定：ログインブロック */-->
        <sp:block name="lfb0xxxx"></sp:block>
    </div>
</div>