@charset "utf-8";

/**
 * リッチフォーム
 * @version v1.0
 * @update 2020.04.13
 * @copyright Copyright 2020 Maven Inc. All rights reserved.
 * @summary フォントサイズに応じて変わるリッチUIフォーム
----------------------------------------------------------------
 * テキスト [type="text系"], textarea
 * ボタン [type="button系"], button
 * ラジオボタン label > [type="radio"] + span
 * チェックボタン label > [type="checkbox"] + span
 * トグルボタン label.toggle > [type="checkbox"] + span
 * コンテナ:ラジオボタン .radios > label > [type="radio"] + span
 * コンテナ:チェックボタン .checks > label > [type="checkbox"] + span
 * コンテナ:トグルボタン .toggles > label.toggle > [type="checkbox"] + span
 * コンテナ:ラジオボックス .radiobox > label > [type="radio"] + span
 * コンテナ:チェックボックス .checkbox > label > [type="checkbox"] + span
 * トグルボックス .togglebox > [type="checkbox"] + span*2
 * セレクトボックス .selectbox > label
 *               .selectbox > ul > li > label > [type="radio"] + span
 * コンテナ:ボタン .buttons > [type="button系"],
 *               .buttons > button
----------------------------------------------------------------
 * ◯ユーティリティ
 * フィールドセット fieldset > legend
 * 必須 fieldset.required > legend{
 * レイアウト余白 .between
 * 縦レイアウト .vertical
 * 接頭語・接尾語 .label > span
----------------------------------------------------------------
 * ◯スケール
 * 横幅(10文字分) .em10
 * 横幅(狭) .em-narrow
 * 横幅(中) .em-mid
 * 横幅(広) .em-wide
 * 横幅(無) .em-inherit
 * 相対的に大きいパーツ .big
----------------------------------------------------------------
 * ◯未実装
 * レンジボタン [type="range"]
 * ファイルボックス [type="file"]
 */

/**
 * 変数
----------------------------------------------------------------*/
.richform{

	/* 配色 */
	--black:rgb(60,60,60);
	--gray:#ccc;
	--silver:#f5f5f5;
	--blue:rgb(0,147,170);
	--blue-disabled:rgba(0,147,170,.5);
	--white:white;
	--red:crimson;
	--default-color:rgba(0,0,0,0);
	
	/* 内余白 */
	--padding:.2em .5em;
	--padding-top:.2em;
	--padding-left:.5em;
	--padding-interval:.2em;
	
	/* サイズ */
	--size-checkbutton:1.2em;
	--size-selectbutton:1.2em;
	
	/* 線幅 */
	--border-width:1px;
	--border-width-checkbutton:2px;
	
	/* その他 */
	--border-radius:.3em;
	--border-radius-top:var(--border-radius) var(--border-radius) 0 0;
	--border-radius-right:0 var(--border-radius) var(--border-radius) 0;
	--border-radius-bottom:0 0 var(--border-radius) var(--border-radius);
	--border-radius-left:var(--border-radius) 0 0 var(--border-radius);

}

/**
 * レイアウト
----------------------------------------------------------------*/
.richform .between{
	margin:calc(var(--padding-left) * -1);
	display:flex;
	flex-wrap:wrap;
}
.richform .between > *{ margin:var(--padding-left); }
.richform .between.vertical{ flex-direction:column; }

/**
 * 共通
----------------------------------------------------------------*/
/* 初期化 */
.richform [type="text"],
.richform [type="number"],
.richform [type="search"],
.richform [type="tel"],
.richform [type="url"],
.richform [type="email"],
.richform [type="password"],
.richform [type="datetime"],
.richform [type="date"],
.richform [type="month"],
.richform [type="week"],
.richform [type="time"],
.richform [type="datetime-local"],
.richform textarea,
.richform button,
.richform [type="button"],
.richform [type="reset"],
.richform [type="submit"]{
	font-size:inherit;
	line-height:inherit;
	margin:0;
}
.richform [type="checkbox"],
.richform [type="radio"]{ display:none; }
.richform :disabled{ cursor:not-allowed !important; }
.richform ul{
	padding:0;
	margin:0;
}
.richform li{ list-style:none; }

/* ラベル */
.richform label{
	border-radius:var(--border-radius);
	position:relative;
	display:inline-block;
}
.richform label:focus{ outline:none; }

/* ボタン */
.richform label:not(.togglebox) > [type="radio"] + span,
.richform label:not(.togglebox) > [type="checkbox"] + span,
.richform label.toggle > [type="checkbox"] + span{
	position:relative;
	padding:var(--padding);
	border:var(--border-width) solid rgba(0,0,0,0);
	border-radius:var(--border-radius);
	box-sizing:border-box;
	cursor:pointer;
}

/* ボックス */
.richform [type="text"],
.richform [type="number"],
.richform [type="search"],
.richform [type="tel"],
.richform [type="url"],
.richform [type="email"],
.richform [type="password"],
.richform [type="datetime"],
.richform [type="date"],
.richform [type="month"],
.richform [type="week"],
.richform [type="time"],
.richform [type="datetime-local"],
.richform textarea,
.richform button,
.richform [type="button"],
.richform [type="reset"],
.richform [type="submit"],
.richform .radiobox > label > [type="radio"] + span,
.richform .checkbox > label > [type="checkbox"] + span{
	position:relative;
	padding:var(--padding);
	border:var(--border-width) solid var(--gray);
	border-radius:var(--border-radius);
	box-sizing:border-box;
}

/* トランジション */
.richform label,
.richform label > span,
.richform label > span::before,
.richform label > span::after,
.richform label > span::after,
.richform input,
.richform textarea,
.richform button{ transition:background-color .2s, color .2s, border .2s, opacity .2s, margin .1s, left .1s; }

/* 必須 */
.richform fieldset.required > legend::before{
	content:'必須';
	background:var(--red);
	color:white;
	display:inline-block;
	margin-right:var(--padding-left);
	font-size:70%;
	padding:calc(var(--padding-left) / 4) var(--padding-left);
	vertical-align:middle;
}

/**
 * コンテナ
----------------------------------------------------------------*/
/* ボタン */
.richform .buttons{
	padding:var(--padding-left);
	text-align:center;
}
.richform .buttons > button,
.richform .buttons > [type="button"],
.richform .buttons > [type="reset"],
.richform .buttons > [type="submit"]{ margin:var(--padding-left); }

/* 本体 */
.richform .radios,
.richform .checks,
.richform .toggles,
.richform .radiobox,
.richform .checkbox{
	display:flex;
	flex-wrap:wrap;
}
.richform .radios > label:not(:last-child) > [type="radio"] + span,
.richform .checks > label:not(:last-child) > [type="checkbox"] + span,
.richform .toggles > label:not(:last-child) > [type="checkbox"] + span,
.richform .radiobox > label:not(:last-child) > [type="radio"] + span,
.richform .checkbox > label:not(:last-child) > [type="checkbox"] + span{ margin-right:calc(var(--border-width) * -1); }

/* 縦並び */
.richform .radios.vertical,
.richform .checks.vertical,
.richform .toggles.vertical,
.richform .radiobox.vertical,
.richform .checkbox.vertical{ display:block; }
.richform .radios.vertical > label,
.richform .checks.vertical > label,
.richform .toggles.vertical > label,
.richform .radiobox.vertical > label,
.richform .checkbox.vertical > label{ display:block; }
.richform .radios.vertical > label > [type="radio"] + span,
.richform .checks.vertical > label > [type="checkbox"] + span,
.richform .toggles.vertical > label > [type="checkbox"] + span,
.richform .radiobox.vertical > label > [type="radio"] + span,
.richform .checkbox.vertical > label > [type="checkbox"] + span{ display:block; }
.richform .radios.vertical > label:not(:last-child) > [type="radio"] + span,
.richform .checks.vertical > label:not(:last-child) > [type="checkbox"] + span,
.richform .toggles.vertical > label:not(:last-child) > [type="checkbox"] + span,
.richform .radiobox.vertical > label:not(:last-child) > [type="radio"] + span,
.richform .checkbox.vertical > label:not(:last-child) > [type="checkbox"] + span{
	margin-right:0;
	margin-bottom:calc(var(--border-width) * -1);
}

/* 角丸半径 */
.richform .radiobox > label:not(.togglebox) > [type="radio"] + span,
.richform .checkbox > label:not(.togglebox) > [type="checkbox"] + span{ border-radius:0; }
.richform .radiobox > label:not(.togglebox):first-child > [type="radio"] + span,
.richform .checkbox > label:not(.togglebox):first-child > [type="checkbox"] + span{ border-radius:var(--border-radius-left); }
.richform .radiobox > label:not(.togglebox):last-child > [type="radio"] + span,
.richform .checkbox > label:not(.togglebox):last-child > [type="checkbox"] + span{ border-radius:var(--border-radius-right); }
.richform .radiobox.vertical > label:not(.togglebox):first-child > [type="radio"] + span,
.richform .checkbox.vertical > label:not(.togglebox):first-child > [type="checkbox"] + span{ border-radius:var(--border-radius-top); }
.richform .radiobox.vertical > label:not(.togglebox):last-child > [type="radio"] + span,
.richform .checkbox.vertical > label:not(.togglebox):last-child > [type="checkbox"] + span{ border-radius:var(--border-radius-bottom); }

/**
 * フィールドセット
----------------------------------------------------------------*/
/* 【本体】基本 */
.richform fieldset{
	margin:0;
	padding:0;
	border:0;
}

/* 【見出し】基本 */
.richform fieldset > legend{
	font-weight:bold;
	padding:var(--padding-top) 0;
}

/**
 * ラベル(接頭語・接尾語)
----------------------------------------------------------------*/
/* 【コンテナ】基本 */
.richform label.label{
	vertical-align:middle;
	display:flex;
}

/* 【本体】基本 */
.richform label.label > span{
	font-weight:bold;
	background:var(--silver);
	padding:0 var(--padding-left);
	border:var(--border-width) solid var(--gray);
	box-sizing:border-box;
	border-radius:var(--border-radius-left);
	border-right:0;
	cursor:pointer;
}
.richform label.label > span:last-child{
	border-radius:0 var(--border-radius) var(--border-radius) 0;
	border-left:0;
	border-right:var(--border-width) solid var(--gray);
}

/* 【本体】マウスオーバー：背景が濃くなる */
.richform label.label:hover > span:first-child,
.richform label.label:hover > span:last-child{ border-color:var(--black); }

/* 【テキスト】角丸調整 */
.richform label.label > input{ border-radius:var(--border-radius-left); }
.richform label.label > span + input{ border-radius:var(--border-radius-right); }

/**
 * テキスト
----------------------------------------------------------------*/
/* 【本体】基本 */
.richform [type="text"],
.richform [type="number"],
.richform [type="search"],
.richform [type="tel"],
.richform [type="url"],
.richform [type="email"],
.richform [type="password"],
.richform [type="datetime"],
.richform [type="date"],
.richform [type="month"],
.richform [type="week"],
.richform [type="time"],
.richform [type="datetime-local"],
.richform textarea{
	width:100%;
	box-sizing:border-box;
}

/* 【本体】マウスオーバー：線が黒くなる */
.richform [type="text"]:hover,
.richform [type="number"]:hover,
.richform [type="search"]:hover,
.richform [type="tel"]:hover,
.richform [type="url"]:hover,
.richform [type="email"]:hover,
.richform [type="password"]:hover,
.richform [type="datetime"]:hover,
.richform [type="date"]:hover,
.richform [type="month"]:hover,
.richform [type="week"]:hover,
.richform [type="time"]:hover,
.richform [type="datetime-local"]:hover,
.richform textarea:hover{ border-color:var(--black); }

/* 【本体】フォーカス：線が青くなる */
.richform [type="text"]:focus,
.richform [type="number"]:focus,
.richform [type="search"]:focus,
.richform [type="tel"]:focus,
.richform [type="url"]:focus,
.richform [type="email"]:focus,
.richform [type="password"]:focus,
.richform [type="datetime"]:focus,
.richform [type="date"]:focus,
.richform [type="month"]:focus,
.richform [type="week"]:focus,
.richform [type="time"]:focus,
.richform [type="datetime-local"]:focus,
.richform textarea:focus{ border-color:var(--blue); }

/* 【本体】費アクティブ */
.richform [type="text"]:disabled,
.richform [type="number"]:disabled,
.richform [type="search"]:disabled,
.richform [type="tel"]:disabled,
.richform [type="url"]:disabled,
.richform [type="email"]:disabled,
.richform [type="password"]:disabled,
.richform [type="datetime"]:disabled,
.richform [type="date"]:disabled,
.richform [type="month"]:disabled,
.richform [type="week"]:disabled,
.richform [type="time"]:disabled,
.richform [type="datetime-local"]:disabled,
.richform textarea:disabled{ background:var(--silver); }

/* 【本体】微調整 */
.richform [type="number"]{
	text-align:right;
	-moz-appearance:textfield;
}

/**
 * ボタン
----------------------------------------------------------------*/
/* 【本体】基本 */
.richform button,
.richform [type="button"],
.richform [type="reset"],
.richform [type="submit"]{
	border-color:var(--blue);
	background:var(--blue);
	color:var(--white);
	cursor:pointer;
}

/* 【本体】マウスオーバー：背景が薄くなる */
.richform button:hover,
.richform [type="button"]:hover,
.richform [type="reset"]:hover,
.richform [type="submit"]:hover{
	background:var(--silver);
	color:var(--blue);
}

/* 【本体】フォーカス：線が黒くなる */
.richform button::-moz-focus-inner,
.richform [type="button"]::-moz-focus-inner,
.richform [type="reset"]::-moz-focus-inner,
.richform [type="submit"]::-moz-focus-inner{ border:0; }
.richform button:focus,
.richform [type="button"]:focus,
.richform [type="reset"]:focus,
.richform [type="submit"]:focus{ border:var(--border-width) solid var(--black); }

/* 【本体】非アクティブ */
.richform button:disabled,
.richform [type="button"]:disabled,
.richform [type="reset"]:disabled,
.richform [type="submit"]:disabled{
	border-color:var(--gray);
	background:var(--gray);
	color:var(--silver);
}

/**
 * チェックボタン・ラジオボタン
----------------------------------------------------------------*/
/* 【本体】基本 */
.richform label:not(.togglebox) > [type="radio"] + span,
.richform label:not(.togglebox) > [type="checkbox"] + span{
	display:inline-block;
	padding-left:calc(var(--size-checkbutton) + var(--padding-left) + var(--padding-interval));
	border:var(--border-width) solid rgba(0,0,0,0);
}

/* 【本体】マウスオーバー：文字色が青くなる */
.richform label:not(.togglebox):hover > [type="radio"] + span,
.richform label:not(.togglebox):hover > [type="checkbox"] + span{
	color:var(--blue);
	z-index:1;
}

/* 【疑似ボタン】基本 */
.richform label:not(.togglebox) > [type="radio"] + span::before,
.richform label:not(.togglebox) > [type="checkbox"] + span::before{
	--size:var(--size-checkbutton);
	content:'';
	position:absolute;
	top:50%;
	left:0;
	margin-top:calc(var(--size) * -1 / 2);
	margin-left:var(--padding-left);
	width:var(--size);
	height:var(--size);
	box-sizing:border-box;
	border:var(--border-width-checkbutton) solid var(--gray);
	background:var(--default-color);
}
.richform label:not(.togglebox) > [type="radio"] + span::before{ border-radius:50%; }
.richform label:not(.togglebox) > [type="checkbox"] + span::before{ border-radius:var(--border-radius); }

/* 【疑似ボタン】マウスオーバー：線が黒くなる */
.richform label:not(.togglebox):hover > [type="radio"] + span::before,
.richform label:not(.togglebox):hover > [type="checkbox"] + span::before{ border-color:var(--black); }

/* 【疑似ボタン】選択中：線が青くなる */
.richform label:not(.togglebox) > [type="radio"]:checked + span::before,
.richform label:not(.togglebox) > [type="checkbox"]:checked + span::before{ border-color:var(--blue); }

/* 【疑似フラグ】基本 */
.richform label:not(.togglebox) > [type="radio"] + span::after,
.richform label:not(.togglebox) > [type="checkbox"] + span::after{
	content:'';
	position:absolute;
	top:50%;
	left:0;
	opacity:0;
}
.richform label:not(.togglebox) > [type="radio"] + span::after{
	--size:calc(var(--size-checkbutton) / 2);
	margin-top:calc(var(--size) / 2 * -1);
	margin-left:calc(var(--size) / 2 + var(--padding-left));
	width:var(--size);
	height:var(--size);
	background:var(--black);
	border-radius:50%;
}
.richform label:not(.togglebox) > [type="checkbox"] + span::after{
	--size:var(--size-checkbutton);
	margin-top:calc(var(--size) / 2 * -1);
	margin-left:var(--padding-left);
	width:var(--size);
	height:var(--size);
	background:url('data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2020%2020%22%20enable-background%3D%22new%200%200%2020%2020%22%20xml%3Aspace%3D%22preserve%22%3E%3Cpolyline%20fill%3D%22none%22%20stroke%3D%22%233C3C3C%22%20stroke-width%3D%221.7594%22%20stroke-miterlimit%3D%2210%22%20points%3D%223.19%2C8.82%207.99%2C13.63%2017.6%2C4.02%20%22%2F%3E%3C%2Fsvg%3E') scroll no-repeat center center / contain;
}

/* 【疑似フラグ】選択中：チェックが入る */
.richform label:not(.togglebox) > [type="radio"]:checked + span::after,
.richform label:not(.togglebox) > [type="checkbox"]:checked + span::after{ opacity:1; }

/* 【疑似フラグ】フォーカス＆非マウスオーバー：点線になる */
.richform label:not(.togglebox):focus:not(:hover) > [type="radio"] + span,
.richform label:not(.togglebox):focus:not(:hover) > [type="checkbox"] + span{
	z-index:1;
	border:var(--border-width) dashed var(--gray);
}

/* 【本体】非アクティブ */
.richform label:not(.togglebox) > [type="radio"]:disabled + span,
.richform label:not(.togglebox) > [type="checkbox"]:disabled + span{
	color:var(--gray);
	cursor:not-allowed;
}

/* 【疑似ボタン】非アクティブ */
.richform label:not(.togglebox) > [type="radio"]:disabled + span::before,
.richform label:not(.togglebox) > [type="checkbox"]:disabled + span::before{ border-color:var(--gray); }

/* 【疑似フラグ】非アクティブ＆選択中 */
.richform label:not(.togglebox) > [type="radio"]:disabled:checked + span::after{ background:var(--gray); }

/**
 * トグルボタン
----------------------------------------------------------------*/
/* 【本体】基本 */
.richform label.toggle > [type="checkbox"] + span{ padding-left:calc(1.2em * 2 + .5em + .2em); }

/* 【疑似ボタン】基本 */
.richform label.toggle > [type="checkbox"] + span::before{
	width:calc(1.2em * 2);
	border-radius:1.2em;
}

/* 【疑似フラグ】基本 */
.richform label.toggle > [type="checkbox"] + span::after{
	--border:calc(var(--border-width-checkbutton) * 2);
	--size:calc(var(--size-checkbutton) - var(--border) * 2);
	margin-top:calc(var(--size) / 2 * -1);
	margin-left:calc(var(--border) + var(--padding-left) + var(--size-checkbutton));
	width:var(--size);
	height:var(--size);
	background:var(--gray);
	border-radius:50%;
	opacity:1;
}

/* 【疑似ボタン】マウスオーバー */
.richform label.toggle:hover > [type="checkbox"]:not(:disabled) + span::before{ border-color:var(--black); }

/* 【疑似フラグ】マウスオーバー */
.richform label.toggle:hover > [type="checkbox"]:not(:disabled) + span::after{ background:var(--black); }

/* 【疑似ボタン】選択中 */
.richform label.toggle > [type="checkbox"]:checked + span::before{ border-color:var(--blue); }

/* 【疑似フラグ】選択中 */
.richform label.toggle > [type="checkbox"]:checked + span::after{
	margin-left:calc(var(--border) + var(--padding-left));
	background:var(--blue);
}

/* 【疑似ボタン】選択中＆マウスオーバー */
.richform label.toggle:hover > [type="checkbox"]:checked:not(:disabled) + span::before{ border-color:var(--blue); }

/* 【疑似フラグ】選択中＆マウスオーバー */
.richform label.toggle:hover > [type="checkbox"]:checked:not(:disabled) + span::after{ background:var(--blue); }

/* 【本体】非アクティブ */
.richform label.toggle > [type="radio"]:disabled + span,
.richform label.toggle > [type="checkbox"]:disabled + span{
	color:var(--gray);
	cursor:not-allowed;
}

/* 【疑似ボタン】非アクティブ */
.richform label.toggle > [type="radio"]:disabled + span::before,
.richform label.toggle > [type="checkbox"]:disabled + span::before{ border-color:var(--gray); }

/* 【疑似フラグ】非アクティブ */
.richform label.toggle > [type="radio"]:disabled + span::after,
.richform label.toggle > [type="checkbox"]:disabled + span::after{ background:var(--gray); }

/* 【疑似ボタン】非アクティブ＆選択中 */
.richform label.toggle > [type="radio"]:disabled:checked + span::before,
.richform label.toggle > [type="checkbox"]:disabled:checked + span::before{ border-color:var(--blue-disabled); }

/* 【疑似フラグ】非アクティブ＆選択中 */
.richform label.toggle > [type="radio"]:disabled:checked + span::after,
.richform label.toggle > [type="checkbox"]:disabled:checked + span::after{ background:var(--blue-disabled); }

/**
 * チェックボックス・ラジオボックス
----------------------------------------------------------------*/
/* 【本体】基本 */
.richform .radiobox > label > [type="radio"] + span,
.richform .checkbox > label > [type="checkbox"] + span{
	border-color:var(--gray);
	background:var(--default-color);
}

/* 【本体】マウスオーバー：背景が薄くなる */
.richform .radiobox > label:hover > [type="radio"]:not(:disabled) + span,
.richform .checkbox > label:hover > [type="checkbox"]:not(:disabled) + span{
	background:var(--silver);
	color:inherit;
}

/* 【本体】選択中：背景が青くなる */
.richform .radiobox > label > [type="radio"]:checked + span,
.richform .checkbox > label > [type="checkbox"]:checked + span{
	background:var(--blue);
	color:var(--white);
}

/* 【本体】フォーカス＆非マウスオーバー：線が黒くなる */
.richform .radiobox > label:focus,
.richform .checkbox > label:focus{ outline:none; }
.richform .radiobox > label:focus:not(:hover) > [type="radio"] + span,
.richform .checkbox > label:focus:not(:hover) > [type="checkbox"] + span{ border:var(--border-width) solid var(--black); }

/* 【本体】ポインターモードでない場合：線が黒くなる */
.richform .radiobox:not(.pointer) > label > [type="radio"] + span,
.richform .checkbox:not(.pointer) > label > [type="checkbox"] + span{ padding-left:var(--padding-left); }

/* 【本体】マウスオーバー＆選択中：線が黒くなる */
.richform .radiobox > label:hover > [type="radio"]:checked:not(:disabled) + span,
.richform .checkbox > label:hover > [type="checkbox"]:checked:not(:disabled) + span{
	border-color:var(--black);
	background:var(--blue);
	color:var(--white);
}

/* 【疑似ボタン】選択中：背景が青くなる */
.richform .radiobox > label > [type="radio"]:checked + span::before,
.richform .checkbox > label > [type="checkbox"]:checked + span::before{ background:white; }

/* 【疑似ボタン】マウスオーバー＆選択中：背景が青くなる */
.richform .radiobox > label:hover > [type="radio"]:checked:not(:disabled) + span::before,
.richform .checkbox > label:hover > [type="checkbox"]:checked:not(:disabled) + span::before{ border-color:var(--black); }

/* 【疑似ボタン・疑似フラグ】ポインターモードでない場合：線が黒くなる */
.richform .radiobox:not(.pointer) > label > [type="radio"] + span::before,
.richform .checkbox:not(.pointer) > label > [type="checkbox"] + span::before,
.richform .radiobox:not(.pointer) > label > [type="radio"] + span::after,
.richform .checkbox:not(.pointer) > label > [type="checkbox"] + span::after{ content:none; }

/* 【本体】非アクティブ */
.richform .radiobox > label > [type="radio"]:checked:disabled + span,
.richform .checkbox > label > [type="checkbox"]:checked:disabled + span{ background:var(--blue-disabled); }

/**
 * トグルボックス
----------------------------------------------------------------*/
/* 【本体】基本 */
.richform label.togglebox > span{
	padding:var(--padding);
	border:var(--border-width) solid rgba(0,0,0,0);
	display:inline-block;
	cursor:pointer;
}

/* 【疑似フラグ・疑似ボタン】基本 */
.richform label.togglebox > span::before{
	content:'';
	display:inline-block;
	position:absolute;
	top:0;
	left:0;
	bottom:0;
	right:0;
	box-sizing:border-box;
	border:var(--border-width) solid var(--gray);
}

/* 【疑似フラグ】基本 */
.richform label.togglebox > span:first-of-type::before{
	border-radius:var(--border-radius);
	z-index:-1;
	background:var(--silver);
}

/* 【疑似ボタン】基本 */
.richform label.togglebox > span:last-of-type::before{
	border-radius:calc(var(--border-radius) * .8);
	background:var(--white);
	width:calc(50% - var(--padding-interval));
	height:calc(100% - var(--padding-interval) * 2);
	margin:var(--padding-interval);
}

/* 【本体・疑似フラグ・疑似ボタン】選択中：背景が青くなり、ボタンがスライドする */
.richform label.togglebox > [type="checkbox"]:checked ~ span{ color:var(--white); }
.richform label.togglebox > [type="checkbox"]:checked ~ span:first-of-type::before{ background:var(--blue); }
.richform label.togglebox > [type="checkbox"]:checked ~ span:last-of-type::before{
	left:calc(50% - var(--padding-interval));
	border-color:var(--blue);
}

/* 【疑似フラグ・疑似ボタン】マウスオーバー：線が青くなる */
.richform label.togglebox:hover > [type="checkbox"]:not(:disabled) ~ span:first-of-type::before,
.richform label.togglebox:hover > [type="checkbox"]:not(:disabled) ~ span:last-of-type::before{ border-color:var(--black); }

/* 【疑似ボタン】未選択中＆マウスオーバー：線が黒くなる */
.richform label.togglebox:focus{ background:inherit; }
.richform label.togglebox:focus:not(:hover) > [type="checkbox"] + span:first-of-type::before,
.richform label.togglebox:focus:not(:hover) > [type="checkbox"] + span:last-of-type::before{ border-color:var(--black); }

/* 【本体】非アクティブ */
.richform label.togglebox > [type="checkbox"]:disabled ~ span{ cursor:not-allowed; }

/* 【疑似フラグ・疑似ボタン】非アクティブ＆選択中 */
.richform label.togglebox > [type="checkbox"]:disabled:checked ~ span:first-of-type::before{ background:var(--blue-disabled); }
.richform label.togglebox > [type="checkbox"]:disabled:checked ~ span:last-of-type::before{ border-color:var(--blue-disabled); }

/**
 * セレクトボックス
----------------------------------------------------------------*/
/* 【コンテナ】基本 */
.richform .selectbox{
	display:flex;
	flex-direction:column;
	position:relative;
}

/* 【コンテナ】フォーカス */
.richform .selectbox:focus{ outline:none; }

/* 【デフォルト値】基本 */
.richform .selectbox > label{
	position:relative;
	padding:var(--padding);
	border:var(--border-width) solid var(--gray);
	border-radius:var(--border-radius);
	color:var(--gray);
	cursor:pointer;
	white-space:nowrap;
	overflow:hidden;
	background:var(--default-color) url("data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2020%2020%22%20style%3D%22enable-background%3Anew%200%200%2020%2020%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E.st0%7Bfill%3Anone%3Bstroke%3A%233C3C3C%3Bstroke-width%3A1.7594%3Bstroke-miterlimit%3A10%3B%7D%3C%2Fstyle%3E%3Cpolyline%20class%3D%22st0%22%20points%3D%225.2%2C7.6%2010%2C12.4%2014.8%2C7.6%20%22%2F%3E%3C%2Fsvg%3E") scroll no-repeat right var(--padding-interval) center / var(--size-selectbutton);
}

/* 【デフォルト値】マウスオーバー */
.richform .selectbox:hover > label{ border-radius:var(--border-radius-top); }
.richform .selectbox > label:hover{ background-color:var(--silver); }

/* 【デフォルト値】非マウスオーバー＆フォーカス */
.richform .selectbox:not(:hover):focus > label{ border:var(--border-width) solid var(--blue); }

/* 【選択肢ボックス】基本 */
.richform .selectbox > ul{
	position:absolute;
	left:0;
	right:0;
	top:0;
	z-index:100;
}
.richform .selectbox > ul > li > label{
	display:flex;
	flex-direction:column;
}

/* 【選択肢ボックス】マウスオーバー */
.richform .selectbox:hover > ul{ top:100%; }

/* 【選択肢】初期化 */
.richform .selectbox > ul > li > label > [type="radio"] + span::before,
.richform .selectbox > ul > li > label > [type="radio"] + span::after{ content:none; }

/* 【選択肢】基本 */
.richform .selectbox > ul > li > label > [type="radio"] + span{
	padding:var(--padding);
	border:var(--border-width) solid var(--gray);
	background:white;
	border-radius:0;
	display:none;
}
.richform .selectbox > ul > li:first-child > label > [type="radio"] + span{ border-top:calc(var(--border-width) * -1); }
.richform .selectbox > ul > li:last-child > label > [type="radio"] + span{ border-radius:var(--border-radius-bottom); }
.richform .selectbox > ul > li:not(:last-child) > label > [type="radio"] + span{ border-bottom:calc(var(--border-width) * -1); }

/* 【選択肢】マウスオーバー */
.richform .selectbox > ul > li > label > [type="radio"] + span:hover{
	background:var(--silver);
	color:inherit;
}
.richform .selectbox:hover > ul > li > label > [type="radio"] + span{ display:inline-block; }

/* 【選択肢】選択中＆マウスオーバー */
.richform .selectbox:hover > ul > li > label > [type="radio"]:checked + span{
	background:var(--blue);
	color:var(--white);
}

/* 【選択値】選択中＆非マウスオーバー */
.richform .selectbox:not(:hover) > ul > li > label > [type="radio"]:checked + span{
	display:block;
	position:absolute;
	top:0;
	left:0;
	right:0;
	border:var(--border-width) solid var(--gray);
	border-radius:var(--border-radius);
	color:var(--white);
	background:var(--blue) url("data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2020%2020%22%20style%3D%22enable-background%3Anew%200%200%2020%2020%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E.st0%7Bfill%3Anone%3Bstroke%3A%23FFFFFF%3Bstroke-width%3A1.7594%3Bstroke-miterlimit%3A10%3B%7D%3C%2Fstyle%3E%3Cpolyline%20class%3D%22st0%22%20points%3D%225.2%2C7.6%2010%2C12.4%2014.8%2C7.6%20%22%2F%3E%3C%2Fsvg%3E") scroll no-repeat right var(--padding-interval) center / var(--size-selectbutton);
}

/* 【選択値】選択中＆非マウスオーバー＆フォーカス */
.richform .selectbox:not(:hover):focus > ul > li > label > [type="radio"]:checked + span{ border-color:var(--black); }

/**
 * その他
----------------------------------------------------------------*/
/* 長さ */
.richform .em10{ width:100px; }
.richform .em-narrow{ width:120px; }
.richform .em-mid{ width:260px; }
.richform .em-wide{ width:400px; }
.richform .em-inherit{ width:inherit; }
.
/* サイズ */
.richform .big{
	font-size:120%;
	padding:calc(var(--padding-top) * 3) calc(var(--padding-left) * 3);
}
.richform .big [type="text"],
.richform .big [type="number"],
.richform .big [type="search"],
.richform .big [type="tel"],
.richform .big [type="url"],
.richform .big [type="email"],
.richform .big [type="password"],
.richform .big [type="datetime"],
.richform .big [type="date"],
.richform .big [type="month"],
.richform .big [type="week"],
.richform .big [type="time"],
.richform .big [type="datetime-local"],
.richform .big textarea,
.richform [type="text"].big,
.richform [type="number"].big,
.richform [type="search"].big,
.richform [type="tel"].big,
.richform [type="url"].big,
.richform [type="email"].big,
.richform [type="password"].big,
.richform [type="datetime"].big,
.richform [type="date"].big,
.richform [type="month"].big,
.richform [type="week"].big,
.richform [type="time"].big,
.richform [type="datetime-local"].big,
.richform textarea.big{ padding:calc(var(--padding-top) * 3) calc(var(--padding-left) * 1); }