div.maincol {
	width: 800px;
}


div.subcol300 {
	width: 300px;
}

	button.solid { border:0px solid #ffffff; }
	button.solid:hover { filter: brightness(130%) }

:root	{
--color_white		: #ffffff;	/* 白 */
--color_lightorange	: #ffa64d;	/* 明るいオレンジ */
--color_lightgreen	: #4dcc66;	/* 明るいグリーン */
--color_lightpink	: #ffcce6;	/* 明るいピンク */
--color_black		: #000000;	/* 黒 */
--color_red		: #ff0000;	/* 赤 */

--width		: 220px;	/* ボタン幅 */
--display	: inline-block;
--radius	: 10px 10px;          /* 角丸       */
--fontsize	: 12pt;        /* 文字サイズ */
--textalign	: center;      /* 文字位置   */
--cursor	: pointer;     /* カーソル   */
--padding	: 6px 6px;   /* 余白       */
--lineheight	: 1em;         /* 1行の高さ  */
--transition	: .3s;        /* なめらか変化 */
--boxshadow	: 6px 6px 3px #666666;  /* 影の設定 */
--border        : 2px solid;    /* 枠の指定 */
}

.normaltext {
  color         : var(--color_black);     /* 文字色     */
  font-size     : var(--fontsize);
  text-align    : var(--textalign);
}

.redbutton {
  color         : var(--color_white);     /* 文字色     */
  background    : var(--color_red);     /* 背景色     */
  border        : var(--border) var(--color_red);    /* 枠の指定 */
  display       : var(--display);
  border-radius : var(--radius);
  font-size     : var(--fontsize);
  text-align    : var(--textalign);
  cursor        : var(--cursor);
  padding       : var(--padding);
  line-height   : var(--lineheight);
  transition    : var(--transition); 
  width		: var(--width);
}
.redbutton:hover {
  box-shadow    : none;        /* カーソル時の影消去 */
  color         : var(--color_red);     /* 文字色     */
  background    : var(--color_white);     /* 背景色     */
  box-shadow    : var(--boxshadow);
}

.greenbutton {
  color         : var(--color_white);     /* 文字色     */
  background    : var(--color_lightgreen);     /* 背景色     */
  border        : var(--border) var(--color_lightgreen);    /* 枠の指定 */
  display       : var(--display);
  border-radius : var(--radius);
  font-size     : var(--fontsize);
  text-align    : var(--textalign);
  cursor        : var(--cursor);
  padding       : var(--padding);
  line-height   : var(--lineheight);
  transition    : var(--transition); 
  width		: var(--width);
}
.greenbutton:hover {
  box-shadow    : none;        /* カーソル時の影消去 */
  color         : var(--color_lightgreen);     /* 文字色     */
  background    : var(--color_white);     /* 背景色     */
  box-shadow    : var(--boxshadow);
}

.orangebutton {
  color         : var(--color_black);     /* 文字色     */
  background    : var(--color_lightorange);     /* 背景色     */
  border        : var(--border) var(--color_lightorange);    /* 枠の指定 */
  display       : var(--display);
  border-radius : var(--radius);
  font-size     : var(--fontsize);
  text-align    : var(--textalign);
  cursor        : var(--cursor);
  padding       : var(--padding);
  line-height   : var(--lineheight);
  transition    : var(--transition); 
  width		: var(--width);
}
.orangebutton:hover {
  box-shadow    : none;        /* カーソル時の影消去 */
  color         : var(--color_lightorange);     /* 文字色     */
  background    : var(--color_black);     /* 背景色     */
  box-shadow    : var(--boxshadow);
}

.pinkbutton {
  color         : var(--color_black);     /* 文字色     */
  background    : var(--color_lightpink);     /* 背景色     */
  border        : var(--border) var(--color_lightpink);    /* 枠の指定 */
  display       : var(--display);
  border-radius : var(--radius);
  font-size     : var(--fontsize);
  text-align    : var(--textalign);
  cursor        : var(--cursor);
  padding       : var(--padding);
  line-height   : var(--lineheight);
  transition    : var(--transition); 
  width		: var(--width);
}
.pinkbutton:hover {
  box-shadow    : none;        /* カーソル時の影消去 */
  color         : var(--color_lightpink);     /* 文字色     */
  background    : var(--color_black);     /* 背景色     */
  box-shadow    : var(--boxshadow);
}

.blackbutton {
  color         : var(--color_white);     /* 文字色     */
  background    : var(--color_black);     /* 背景色     */
  border        : var(--border) var(--color_black);    /* 枠の指定 */
  display       : var(--display);
  border-radius : var(--radius);
  font-size     : var(--fontsize);
  text-align    : var(--textalign);
  cursor        : var(--cursor);
  padding       : var(--padding);
  line-height   : var(--lineheight);
  transition    : var(--transition); 
  width		: var(--width);
}
.blackbutton:hover {
  box-shadow    : none;        /* カーソル時の影消去 */
  color         : var(--color_black);     /* 文字色     */
  background    : var(--color_white);     /* 背景色     */
  box-shadow    : var(--boxshadow);
}

.whitebutton {
  color         : var(--color_black);     /* 文字色     */
  background    : var(--color_white);     /* 背景色     */
  border        : var(--border) var(--color_black);    /* 枠の指定 */
  display       : var(--display);
  border-radius : var(--radius);
  font-size     : var(--fontsize);
  text-align    : var(--textalign);
  cursor        : var(--cursor);
  padding       : var(--padding);
  line-height   : var(--lineheight);
  transition    : var(--transition); 
  width		: var(--width);
}
.whitebutton:hover {
  box-shadow    : none;        /* カーソル時の影消去 */
  color         : var(--color_white);     /* 文字色     */
  background    : var(--color_black);     /* 背景色     */
  box-shadow    : var(--boxshadow);
}

/* 上記css参考 https://webparts.cman.jp/button/submit/  https://code-kitchen.dev/css/filter/	*/