@charset "utf-8";

/* カウンターを使うためのCSS */

body {
  counter-reset: counter figure command;
}

pre.counter:before {
  counter-increment: counter;
  content: "【サンプルコード "counter(counter)"】 ";
  font-weight: bold;
  margin-left:24px;
}

.figure {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width:100%;
  text-align: center;
}

.figure-caption {
  display: block;
  font-size: 14px;
  margin-left: auto;
  margin-right: auto;
  width:75%;
  background-color: #f0f0f0;
  border: 1px solid rgba(220, 220, 220, 1);
  box-shadow: 5px 5px 10px rgba(0,0,0,0.4);
  border-radius: 12px;
  padding: 5px;
  text-align: center;
  margin-top: 0;
  margin-bottom: 20px;
}

.figure-caption:before {
  counter-increment: figure;
  content: "図 " counter(figure) " ： ";
  font-weight: bold;
}


.command-caption {
  display: block;
  font-size: 14px;
  margin-left: 40px;
  margin-right: 0px;
  background-color: #ddd;
  border: 1px solid rgba(220, 220, 220, 1);
  border-radius: 8px 8px 0 0;
  padding: 5px 5px 5px 10px;
}

.command-caption:before {
  counter-increment: command;
  content: "【コマンド " counter(command) " 】 ";
  font-weight: bold;
}