Snow Monkey Forms│CSSを書くための変数ガイド

.smf-text-control__control::placeholder {
    color: #ADADAD;
}

:root {
    /*────────────────────────────
      ■ グローバル設定
      ・背景色や角丸など、全体に関わる基本設定
    ─────────────────────────────*/
    --_global--background-color: #0000;        /* 背景色 */
    --_global--border-radius: 3px;               /* 角丸 */

    /*────────────────────────────
      ■ カラーパレット
      ・テキストやボーダー、アクセントカラーなど
    ─────────────────────────────*/
    --_color-black: #111;                        /* ブラック系 */
    --_color-gray: #999;                         /* グレー */
    --_dark-color-gray: #666;                     /* やや暗いグレー */
    --_darker-color-gray: #444;                   /* さらに暗いグレー */
    --_darkest-color-gray: #3b3b3b;               /* 最も暗いグレー */
    --_light-color-gray: #ccc;                    /* やや明るいグレー */
    --_lighter-color-gray: #eee;                  /* さらに明るいグレー */
    --_lightest-color-gray: #f7f7f7;              /* 非常に明るいグレー */
    --_color-text: #333;                         /* 基本のテキスト色 */
    --_dark-color-text: #000;                    /* 濃いテキスト色 */
    --_darker-color-text: #000;                  /* さらに濃いテキスト色 */
    --_darkest-color-text: #000;                 /* 最も濃いテキスト色 */
    --_light-color-text: #666;                    /* やや明るいテキスト色 */
    --_lighter-color-text: #888;                  /* さらに明るいテキスト色 */
    --_lightest-color-text: #919191;              /* 非常に明るいテキスト色 */
    --_color-white: #fff;                        /* 白 */
    --_color-red: #e74c3c;                        /* アクセント用の赤 */

    /*────────────────────────────
      ■ コンテナ・フォーム・トランジション設定
      ・フォーム部分のボーダー色やコンテナの幅、動きの速さなど
    ─────────────────────────────*/
    --_global--container-margin: var(--_s1);     /* コンテナ周りの余白 */
    --_global--container-max-width: 1280px;        /* コンテナの最大幅 */
    --_list-item-indent: 1.5em;                   /* リストアイテムのインデント */
    --_form-control-border-color: var(--_light-color-gray);      /* フォームの境界線色 */
    --_form-control-border-color-hover: var(--_color-gray);        /* ホバー時の境界線色 */
    --_form-control-border-color-focus: #85b7d9;    /* フォーカス時の境界線色 */
    --_global--transition-duration: .2s;          /* アニメーションの時間 */
    --_global--transition-function-timing: ease-out; /* イージング（動きの加減） */
    --_global--transition-delay: 0s;              /* トランジションの遅延時間 */

    /*────────────────────────────
      ■ タイポグラフィ設定
      ・フォントファミリー、サイズ、行間などテキストに関わる設定
    ─────────────────────────────*/
    --_half-leading: 0.3;                         /* 行間の補正値 */
    --_global--line-height: calc(1 + var(--_half-leading)*2); /* 基本行高さ */
    --_base-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;  /* ベースフォント */
    --_global--font-family: var(--_base-font-family); /* 全体で使用するフォント */
    --_base-font-size-px: 16px;                    /* ベースフォントサイズ（ピクセル単位） */
    --_global--font-size-px: var(--_base-font-size-px); /* 基本フォントサイズ */

    /*────────────────────────────
      ■ 見出しのマージン設定
      ・h1～h6 など各見出しの上下の余白調整
    ─────────────────────────────*/
    --_margin-scale: 1;                           /* マージンの拡大・縮小スケール */
    --_h1-margin-top: 0;                          /* h1 上余白 */
    --_h1-margin-bottom: 1;                        /* h1 下余白 */
    --_h2-margin-top: 2;                          /* h2 上余白 */
    --_h2-margin-bottom: 1;                        /* h2 下余白 */
    --_h3-margin-top: 1.5;                        /* h3 上余白 */
    --_h3-margin-bottom: 1;                        /* h3 下余白 */
    --_h4-margin-top: 1.25;                        /* h4 上余白 */
    --_h4-margin-bottom: 1;                        /* h4 下余白 */
    --_h5-margin-top: 1;                           /* h5 上余白 */
    --_h5-margin-bottom: .5;                       /* h5 下余白 */
    --_h6-margin-top: 1;                           /* h6 上余白 */
    --_h6-margin-bottom: .5;                       /* h6 下余白 */

    /*────────────────────────────
      ■ スペーシング（余白・パディング）の基準
      ・全体のスペース計算の基本となる値（行高さを利用）
    ─────────────────────────────*/
    --_space-unitless: var(--_global--line-height);  /* スペース計算の基準値 */
    --_space: calc(var(--_global--line-height) * 1rem); /* 基本のスペース単位 */

    /*────────────────────────────
      ■ その他設定
    ─────────────────────────────*/
    --_page-effect-z-index: 1000000;              /* エフェクト等で使用する z-index */

    /*────────────────────────────
      ■ ハーモニックシーケンス（フォントサイズ・行間調整用）
      ・調和数列を利用して、サイズや行間のリズムを作成
    ─────────────────────────────*/
    --_harmonic-sequence-base: 8;
    --_min-harmonic-sequence-base: 9;
    --_max-harmonic-sequence-base: var(--_harmonic-sequence-base);
    --_line-height-slope: -0.16666;
    --_font-size-level: 0;

    /*────────────────────────────
      ■ マージン・パディング計算用数列（ms系）
      ・リズミカルな数列で余白の比率を設定
    ─────────────────────────────*/
    --_ms-2: calc(var(--_space-unitless) / 3 * 1);
    --_ms-1: calc(var(--_space-unitless) / 3 * 2);
    --_ms0: 0rem;
    --_ms1: calc(var(--_space-unitless) / 3 * 3);
    --_ms2: calc(var(--_space-unitless) / 3 * 5);
    --_ms3: calc(var(--_space-unitless) / 3 * 8);
    --_ms4: calc(var(--_space-unitless) / 3 * 13);
    --_ms5: calc(var(--_space-unitless) / 3 * 21);
    --_ms6: calc(var(--_space-unitless) / 3 * 34);
    --_ms7: calc(var(--_space-unitless) / 3 * 55);

    /*────────────────────────────
      ■ レスポンシブなスペーシング（s系）
      ・ms系の値に rem 単位や clamp() を用い、画面幅に応じたサイズに調整
    ─────────────────────────────*/
    --_s-2: calc(var(--_ms-2) * 1rem);
    --_s-1: calc(var(--_ms-1) * 1rem);
    --_s0: 0rem;
    --_s1: calc(var(--_ms1) * 1rem);
    --_s2: clamp(
        calc(var(--_ms1) + var(--_ms2) * 0.28125) * 1rem,
        calc(((var(--_ms2) - var(--_ms1) + var(--_ms2) * 0.28125) / 57.5 * -22.5
             + var(--_ms1) + var(--_ms2) * 0.28125) * 1rem
             + (var(--_ms2) - var(--_ms1) + var(--_ms2) * 0.28125) / 57.5 * 100vw),
        var(--_ms2) * 1rem
    );
    --_s3: clamp(
        calc(var(--_ms1) + var(--_ms3) * 0.28125) * 1rem,
        calc(((var(--_ms3) - var(--_ms1) + var(--_ms3) * 0.28125) / 57.5 * -22.5
             + var(--_ms1) + var(--_ms3) * 0.28125) * 1rem
             + (var(--_ms3) - var(--_ms1) + var(--_ms3) * 0.28125) / 57.5 * 100vw),
        var(--_ms3) * 1rem
    );
    --_s4: clamp(
        calc(var(--_ms1) + var(--_ms4) * 0.28125) * 1rem,
        calc(((var(--_ms4) - var(--_ms1) + var(--_ms4) * 0.28125) / 57.5 * -22.5
             + var(--_ms1) + var(--_ms4) * 0.28125) * 1rem
             + (var(--_ms4) - var(--_ms1) + var(--_ms4) * 0.28125) / 57.5 * 100vw),
        var(--_ms4) * 1rem
    );
    --_s5: clamp(
        calc(var(--_ms1) + var(--_ms5) * 0.28125) * 1rem,
        calc(((var(--_ms5) - var(--_ms1) + var(--_ms5) * 0.28125) / 57.5 * -22.5
             + var(--_ms1) + var(--_ms5) * 0.28125) * 1rem
             + (var(--_ms5) - var(--_ms1) + var(--_ms5) * 0.28125) / 57.5 * 100vw),
        var(--_ms5) * 1rem
    );
    --_s6: clamp(
        calc(var(--_ms1) + var(--_ms6) * 0.28125) * 1rem,
        calc(((var(--_ms6) - var(--_ms1) + var(--_ms6) * 0.28125) / 57.5 * -22.5
             + var(--_ms1) + var(--_ms6) * 0.28125) * 1rem
             + (var(--_ms6) - var(--_ms1) + var(--_ms6) * 0.28125) / 57.5 * 100vw),
        var(--_ms6) * 1rem
    );
    --_s7: clamp(
        calc(var(--_ms1) + var(--_ms7) * 0.28125) * 1rem,
        calc(((var(--_ms7) - var(--_ms1) + var(--_ms7) * 0.28125) / 57.5 * -22.5
             + var(--_ms1) + var(--_ms7) * 0.28125) * 1rem
             + (var(--_ms7) - var(--_ms1) + var(--_ms7) * 0.28125) / 57.5 * 100vw),
        var(--_ms7) * 1rem
    );

    /*────────────────────────────
      ■ マージン設定（レスポンシブ s系 × マージンスケール）
      ・外側の余白として利用（必要に応じて変更）
    ─────────────────────────────*/
    --_margin-2: calc(var(--_s-2) * var(--_margin-scale));
    --_margin-1: calc(var(--_s-1) * var(--_margin-scale));
    --_margin0: 0rem;
    --_margin1: calc(var(--_s1) * var(--_margin-scale));
    --_margin2: calc(var(--_s2) * var(--_margin-scale));
    --_margin3: calc(var(--_s3) * var(--_margin-scale));
    --_margin4: calc(var(--_s4) * var(--_margin-scale));
    --_margin5: calc(var(--_s5) * var(--_margin-scale));
    --_margin6: calc(var(--_s6) * var(--_margin-scale));
    --_margin7: calc(var(--_s7) * var(--_margin-scale));

    /*────────────────────────────
      ■ パディング設定（レスポンシブ s系そのまま）
      ・内側の余白として利用
    ─────────────────────────────*/
    --_padding-2: var(--_s-2);
    --_padding-1: var(--_s-1);
    --_padding0: 0rem;
    --_padding1: var(--_s1);
    --_padding2: var(--_s2);
    --_padding3: var(--_s3);
    --_padding4: var(--_s4);
    --_padding5: var(--_s5);
    --_padding6: var(--_s6);
    --_padding7: var(--_s7);
}

/* アクション部分の上下マージン（シンプルテーブルも --_margin1 を使用） */
.smf-form--simple-table + .smf-action {
  margin: var(--_margin1) 0;
  text-align: center;
}
.smf-form--simple-table .smf-item {
  margin-bottom: 0;
  margin-top: 0;
  padding: 1rem 0;
}
/* 区切り線内の列は左右のパディング無し（固定） */
.smf-form--simple-table .smf-item--divider .smf-item__col {
  flex: 1 1 auto;
  max-width: none;
}
/* ラベル部分の下パディング：--_padding-1 を利用 */
.smf-form--simple-table .smf-item__col--label {
  padding-bottom: var(--_padding-1);
}
@media (min-width:640px) {
  .smf-form--simple-table .smf-item {
    display: flex;
  }
  .smf-form--simple-table .smf-item__col {
    flex: 1 1 auto;
  }
  .smf-form--simple-table .smf-item__col--label {
    flex: 0 0 14em;
    max-width: 14em;
    padding-bottom: 0;
    padding-right: var(--_padding1);  /* --_padding1 でラベルの右パディング調整 */
  }
  .smf-form--simple-table .smf-item__col--controls {
    flex: 1 1 calc(100% - 14em);
    max-width: calc(100% - 14em);
  }
}

/* アクション部分の上下マージン（レタータイプも --_margin1 を使用） */
.smf-form--letter + .smf-action {
  margin: var(--_margin1) 0;
  text-align: center;
}
.smf-form--letter .smf-item {
  margin-bottom: 0;
  margin-top: 0;
  padding: 1rem 0;  /* 固定値 */
}
/* ラベル部分の下パディング：--_padding-1 を変更すると、ラベル下の余白が変わる */
.smf-form--letter .smf-item__col--label {
  padding-bottom: var(--_padding-1);
}
.smf-form--letter .smf-text-control__control {
  max-width: 100%;
  width: 100%;
}

/* フォーム下部のアクション部分（ボタンなど）の上下マージン */
.smf-form--business + .smf-action {
  margin: var(--_margin1) 0;  /* --_margin1 を変更すると、アクション部分の上下余白が変わる */
  text-align: center;
}

/* 各項目の枠線設定（固定値） */
.smf-form--business .smf-item {
  border: 1px solid #ddd;
  margin-bottom: 0;
  margin-top: 0;
}

/* 最初の項目以外は上のボーダーを非表示 */
.smf-form--business .smf-item:not(:first-child) {
  border-top: none;
}

/* 区切り線アイテムの左右ボーダーを除去 */
.smf-form--business .smf-item--divider {
  border-left: none;
  border-right: none;
}

/* 区切り線内の各列：左右のパディングは固定（0） */
.smf-form--business .smf-item--divider .smf-item__col {
  flex: 1 1 auto;
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}

/* 各列の内側余白：ここで --_padding1 を利用
     → この値を変更すると、項目内の左右パディングが調整できる */
.smf-form--business .smf-item__col {
  padding: var(--_padding1);
}

/* ラベル部分の背景色と下部ボーダー（固定値） */
.smf-form--business .smf-item__col--label {
  background-color: #f7f7f7;
  border-bottom: 1px solid #ddd;
}

/* 画面幅 640px 以上の場合のレイアウト調整 */
@media (min-width:640px) {
  .smf-form--business .smf-item {
    display: flex;  /* 横並びにする */
  }
  .smf-form--business .smf-item__col {
    flex: 1 1 auto;
  }
  .smf-form--business .smf-item__col--label {
    border-bottom: none;
    border-right: 1px solid #ddd;
    flex: 0 0 14em;
    max-width: 14em;
  }
  .smf-form--business .smf-item__col--controls {
    flex: 1 1 calc(100% - 14em);
    max-width: calc(100% - 14em);
  }
}

/* ボタン内の左右パディング：--_padding1 を調整すると、ボタンの左右余白が変わる */
.smf-action .smf-button-control__control {
  padding-left: var(--_padding1);
  padding-right: var(--_padding1);
}
/* ボタン同士の間隔：--_margin-1 で調整 */
.smf-action .smf-button-control + .smf-button-control {
  margin-left: var(--_margin-1);
}
/* ボタン内に配置する「送信中」アイコンは位置を絶対指定 */
.smf-action .smf-button-control__control {
  position: relative;
}
.smf-action .smf-button-control__control .smf-sending {
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
}

/* フィールドセット内の各要素の上マージン：--_margin-2 で調整 */
.smf-control-fieldset > * + * {
  margin-top: var(--_margin-2);
}

/* 説明文の文字色は --_dark-color-gray を使用 */
.smf-control-description {
  color: var(--_dark-color-gray);
  margin-top: var(--_margin-2);
  --_font-size-level: -1; /* タイポグラフィ用の微調整（詳細は全体設定参照） */
  font-size: var(--_font-size);  /* --_font-size を変更すると、説明文のフォントサイズも変わる */
  line-height: var(--_line-height);  /* 行間は --_line-height に依存 */
}

.smf-error-messages {
  color: #cc3033;  /* 固定色 */
  margin-top: var(--_margin-2);
}

.smf-progress-tracker {
  display: flex;
  flex-wrap: nowrap;
  list-style: none;
  margin-bottom: var(--_margin1);  /* 下マージンは --_margin1 を利用 */
  margin-left: 0;
  padding-left: 0;
}
.smf-progress-tracker__item {
  align-items: center;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  margin: 0;
  position: relative;
  width: 33.33333%;
}
/* 進捗バー（横線）の色は --_light-color-gray で指定 */
.smf-progress-tracker__item:after,
.smf-progress-tracker__item:before {
  background-color: var(--_light-color-gray);
  content: "";
  display: block;
  height: 1px;
  position: absolute;
  top: 12px;
}
.smf-progress-tracker__item:before {
  left: 0;
  right: 50%;
}
.smf-progress-tracker__item:after {
  left: 50%;
  right: 0;
}
/* 完了・入力中状態の表示切替 */
.smf-progress-tracker__item--complete:after,
.smf-progress-tracker__item--input:before {
  display: none;
}
/* 番号の表示（丸い背景）には --_light-color-gray を使用 */
.smf-progress-tracker__item__number {
  align-items: center;
  background-color: var(--_light-color-gray);
  border-radius: 100%;
  color: #fff;
  display: flex;
  height: 24px;
  justify-content: center;
  letter-spacing: 0;
  overflow: hidden;
  position: relative;
  width: 24px;
  z-index: 1;
}
/* 番号下のテキストは --_light-color-gray で色指定 */
.smf-progress-tracker__item__text {
  color: var(--_light-color-gray);
  margin-top: 0.5em;
}
/* 進行状況に応じた背景・文字色：--_color-text を利用 */
[data-screen=back] .smf-progress-tracker__item--input .smf-progress-tracker__item__number,
[data-screen=complete] .smf-progress-tracker__item--complete .smf-progress-tracker__item__number,
[data-screen=confirm] .smf-progress-tracker__item--confirm .smf-progress-tracker__item__number,
[data-screen=input] .smf-progress-tracker__item--input .smf-progress-tracker__item__number,
[data-screen=invalid] .smf-progress-tracker__item--input .smf-progress-tracker__item__number {
  background-color: var(--_color-text);
  font-weight: 700;
}
[data-screen=back] .smf-progress-tracker__item--input .smf-progress-tracker__item__text,
[data-screen=complete] .smf-progress-tracker__item--complete .smf-progress-tracker__item__text,
[data-screen=confirm] .smf-progress-tracker__item--confirm .smf-progress-tracker__item__text,
[data-screen=input] .smf-progress-tracker__item--input .smf-progress-tracker__item__text,
[data-screen=invalid] .smf-progress-tracker__item--input .smf-progress-tracker__item__text {
  color: var(--_color-text);
  font-weight: 700;
}

@keyframes smf-sending {
  0% { transform: rotate(0deg); }
  to { transform: rotate(1turn); }
}
.smf-sending[aria-hidden=true] {
  visibility: hidden;
}
.smf-sending:before {
  animation: smf-sending 2s ease-out 0s infinite;
  border: 1px solid #00000080;
  border-radius: 100%;
  border-top-color: #0000;
  content: "";
  display: block;
  height: 10px;
  width: 10px;
}

.smf-system-error-status-text {
  color: var(--_color-gray);  /* --_color-gray を変更するとエラー時の文字色が変わる */
  --_font-size-level: -1;
  font-size: var(--_font-size);
  line-height: var(--_line-height);
}
.snow-monkey-form[data-screen=loading] {
  visibility: hidden;
}
.smf-form [data-invalid="1"] {
  border-color: #d98585;
}

.smf-action .smf-button-control__control {
  background-color: var(--_lighter-color-gray);  /* --_lighter-color-gray でボタン背景色を調整 */
  background-image: linear-gradient(180deg, #fff, var(--_lighter-color-gray));
  border-radius: var(--_global--border-radius);  /* --_global--border-radius でボタンの角丸を調整 */
  color: var(--_color-text);  /* --_color-text でボタンの文字色を変更 */
  cursor: pointer;
  display: inline-block;
  padding: var(--_padding-2) var(--_padding-1);  /* 上下余白は --_padding-2、左右余白は --_padding1 で調整 */
  text-decoration: none;
  --_border-radius: var(--_global--border-radius);
  --_border-color: var(--_form-control-border-color);  /* --_form-control-border-color で初期のボタン枠色を指定 */
  border: 1px solid var(--_border-color);
  border-radius: var(--_border-radius);
  outline: 0;
  --_transition-duration: var(--_global--transition-duration);  /* アニメーションの時間 */
  --_transition-function-timing: var(--_global--transition-function-timing);  /* イージング設定 */
  --_transition-delay: var(--_global--transition-delay);
  transition: border var(--_transition-duration) var(--_transition-function-timing) var(--_transition-delay);
}
.smf-action .smf-button-control__control:hover {
  --_border-color: var(--_form-control-border-color-hover);  /* ホバー時の枠色：--_form-control-border-color-hover を調整 */
}
.smf-action .smf-button-control__control:active,
.smf-action .smf-button-control__control:focus,
.smf-action .smf-button-control__control:focus-within,
.smf-action .smf-button-control__control[aria-selected=true] {
  --_border-color: var(--_form-control-border-color-focus);  /* フォーカス時の枠色：--_form-control-border-color-focus を調整 */
}
/* ボタン内の input や textarea は枠線無しに */
.smf-action .smf-button-control__control > input,
.smf-action .smf-button-control__control > textarea {
  border: none;
  outline: none;
}