/* 「テストシナリオ」タブボタンのwidthサイズ別の設定 120px */
.tab-buttons_test_scenario span.content_test_scenario7 {
  font: 400 14px 'open sans', sans-serif;
  cursor: pointer;
  display: block;
  width: 120px;
  float: left;
  text-align: center;
  height: 60px;
  line-height: 60px;
  border-bottom: 1px solid #ddd;
}

/* 「テストシナリオ」タブボタンのwidthサイズ別（120px）の設定 ※改行対応 */
.tab-buttons_test_scenario span.content_test_scenario1,
span.content_test_scenario2,
span.content_test_scenario5,
span.content_test_scenario6,
span.content_test_scenario9,
span.content_test_scenario10,
span.content_test_scenario11,
span.content_test_scenario12,
span.content_test_scenario13 {
  font: 400 14px 'open sans', sans-serif;
  cursor: pointer;
  display: block;
  width: 120px;
  float: left;
  text-align: center;
  height: 60px;
  line-height: 30px;
  border-bottom: 1px solid #ddd;
}

/* 「テストシナリオ」タブボタンのwidthサイズ別（75px）の設定 */
.tab-buttons_test_scenario span.content_test_scenario8 {
  font: 400 14px 'open sans', sans-serif;
  cursor: pointer;
  display: block;
  width: 75px;
  float: left;
  text-align: center;
  height: 60px;
  line-height: 60px;
  border-bottom: 1px solid #ddd;
}

/* 「テストシナリオ」タブボタンのwidthサイズ別（75px）の設定 ※改行対応 */
.tab-buttons_test_scenario span.content_test_scenario3,
span.content_test_scenario4 {
  font: 400 14px 'open sans', sans-serif;
  cursor: pointer;
  display: block;
  width: 75px;
  float: left;
  text-align: center;
  height: 60px;
  line-height: 30px;
  border-bottom: 1px solid #ddd;
}

#lamp_test_scenario {
  width: 120px;
  height: 3px;
  background: #07ADDC;
  display: block;
  position: absolute;
  top: 59px;
  transition: all .3s ease-in;
}

#lamp_test_scenario.content_test_scenario1 {
  left: 0px;
  width: 120px;
  transition: all .3s ease-in;
}

#lamp_test_scenario.content_test_scenario2 {
  left: 120px;
  width: 120px;
  transition: all .3s ease-in;
}

#lamp_test_scenario.content_test_scenario3 {
  left: 240px;
  width: 75px;
  transition: all .3s ease-in;
}

#lamp_test_scenario.content_test_scenario4 {
  left: 315px;
  width: 75px;
  transition: all .3s ease-in;
}

#lamp_test_scenario.content_test_scenario5 {
  left: 390px;
  width: 120px;
  transition: all .3s ease-in;
}

#lamp_test_scenario.content_test_scenario6 {
  left: 510px;
  width: 120px;
  transition: all .3s ease-in;
}

#lamp_test_scenario.content_test_scenario7 {
  left: 630px;
  width: 120px;
  transition: all .3s ease-in;
}

#lamp_test_scenario.content_test_scenario8 {
  left: 750px;
  width: 75px;
  transition: all .3s ease-in;
}

#lamp_test_scenario.content_test_scenario9 {
  left: 825px;
  width: 120px;
  transition: all .3s ease-in;
}

#lamp_test_scenario.content_test_scenario10 {
  left: 945px;
  width: 120px;
  transition: all .3s ease-in;
}

#lamp_test_scenario.content_test_scenario11 {
  left: 1065px;
  width: 120px;
  transition: all .3s ease-in;
}

#lamp_test_scenario.content_test_scenario12 {
  left: 1185px;
  width: 120px;
  transition: all .3s ease-in;
}

#lamp_test_scenario.content_test_scenario13 {
  left: 1305px;
  width: 120px;
  transition: all .3s ease-in;
}

#lamp_test_scenario.content_test_scenario1_hover {
  left: 0px;
  width: 120px;
  background: gray;
  transition: all .3s ease-in;
}

#lamp_test_scenario.content_test_scenario2_hover {
  left: 120px;
  width: 120px;
  background: gray;
  transition: all .3s ease-in;
}

#lamp_test_scenario.content_test_scenario3_hover {
  left: 240px;
  width: 75px;
  background: gray;
  transition: all .3s ease-in;
}

#lamp_test_scenario.content_test_scenario4_hover {
  left: 315px;
  width: 75px;
  background: gray;
  transition: all .3s ease-in;
}

#lamp_test_scenario.content_test_scenario5_hover {
  left: 390px;
  width: 120px;
  background: gray;
  transition: all .3s ease-in;
}

#lamp_test_scenario.content_test_scenario6_hover {
  left: 510px;
  width: 120px;
  background: gray;
  transition: all .3s ease-in;
}

#lamp_test_scenario.content_test_scenario7_hover {
  left: 630px;
  width: 120px;
  background: gray;
  transition: all .3s ease-in;
}

#lamp_test_scenario.content_test_scenario8_hover {
  left: 750px;
  width: 75px;
  background: gray;
  transition: all .3s ease-in;
}

#lamp_test_scenario.content_test_scenario9_hover {
  left: 825px;
  width: 120px;
  background: gray;
  transition: all .3s ease-in;
}

#lamp_test_scenario.content_test_scenario10_hover {
  left: 945px;
  width: 120px;
  background: gray;
  transition: all .3s ease-in;
}

#lamp_test_scenario.content_test_scenario11_hover {
  left: 1065px;
  width: 120px;
  background: gray;
  transition: all .3s ease-in;
}

#lamp_test_scenario.content_test_scenario12_hover {
  left: 1185px;
  width: 120px;
  background: gray;
  transition: all .3s ease-in;
}

#lamp_test_scenario.content_test_scenario13_hover {
  left: 1305px;
  width: 120px;
  background: gray;
  transition: all .3s ease-in;
}

/* 「各API処理フロー」タブボタンのwidthサイズ別の設定 100px */
.tab-buttons_api_flow span.content_api_flow1,
span.content_api_flow2,
span.content_api_flow3,
span.content_api_flow4,
span.content_api_flow5,
span.content_api_flow6,
span.content_api_flow7,
span.content_api_flow8,
span.content_api_flow9 {
  font: 400 14px 'open sans', sans-serif;
  cursor: pointer;
  display: block;
  width: 100px;
  float: left;
  text-align: center;
  height: 60px;
  line-height: 60px;
  border-bottom: 1px solid #ddd;
}

#lamp_api_flow {
  width: 100px;
  height: 3px;
  background: #07ADDC;
  display: block;
  position: absolute;
  top: 59px;
  transition: all .3s ease-in;
}

#lamp_api_flow.content_api_flow1 {
  left: 0px;
  width: 100px;
  transition: all .3s ease-in;
}

#lamp_api_flow.content_api_flow2 {
  left: 100px;
  width: 100px;
  transition: all .3s ease-in;
}

#lamp_api_flow.content_api_flow3 {
  left: 200px;
  width: 100px;
  transition: all .3s ease-in;
}

#lamp_api_flow.content_api_flow4 {
  left: 300px;
  width: 100px;
  transition: all .3s ease-in;
}

#lamp_api_flow.content_api_flow5 {
  left: 400px;
  width: 100px;
  transition: all .3s ease-in;
}

#lamp_api_flow.content_api_flow6 {
  left: 500px;
  width: 100px;
  transition: all .3s ease-in;
}

#lamp_api_flow.content_api_flow7 {
  left: 600px;
  width: 100px;
  transition: all .3s ease-in;
}

#lamp_api_flow.content_api_flow8 {
  left: 700px;
  width: 100px;
  transition: all .3s ease-in;
}

#lamp_api_flow.content_api_flow9 {
  left: 800px;
  width: 100px;
  transition: all .3s ease-in;
}

#lamp_api_flow.content_api_flow1_hover {
  left: 0px;
  width: 100px;
  background: gray;
  transition: all .3s ease-in;
}

#lamp_api_flow.content_api_flow2_hover {
  left: 100px;
  width: 100px;
  background: gray;
  transition: all .3s ease-in;
}

#lamp_api_flow.content_api_flow3_hover {
  left: 200px;
  width: 100px;
  background: gray;
  transition: all .3s ease-in;
}

#lamp_api_flow.content_api_flow4_hover {
  left: 300px;
  width: 100px;
  background: gray;
  transition: all .3s ease-in;
}

#lamp_api_flow.content_api_flow5_hover {
  left: 400px;
  width: 100px;
  background: gray;
  transition: all .3s ease-in;
}

#lamp_api_flow.content_api_flow6_hover {
  left: 500px;
  width: 100px;
  background: gray;
  transition: all .3s ease-in;
}

#lamp_api_flow.content_api_flow7_hover {
  left: 600px;
  width: 100px;
  background: gray;
  transition: all .3s ease-in;
}

#lamp_api_flow.content_api_flow8_hover {
  left: 700px;
  width: 100px;
  background: gray;
  transition: all .3s ease-in;
}

#lamp_api_flow.content_api_flow9_hover {
  left: 800px;
  width: 100px;
  background: gray;
  transition: all .3s ease-in;
}

/* 「決済シーケンス」タブボタンの設定 */
.tab-buttons_payment_sequence span {
  font: 400 14px 'open sans', sans-serif;
  cursor: pointer;
  display: block;
  width: 150px;
  float: left;
  text-align: center;
  height: 40px;
  line-height: 40px;
  border-bottom: 1px solid #ddd;
}

#lamp_payment_sequence {
  width: 150px;
  height: 3px;
  background: #07ADDC;
  display: block;
  position: absolute;
  top: 39px;
  transition: all .3s ease-in;
}

#lamp_payment_sequence.content_payment_sequence1 {
  left: 0;
  transition: all .3s ease-in;
}

#lamp_payment_sequence.content_payment_sequence2 {
  left: 150px;
  transition: all .3s ease-in;
}

#lamp_payment_sequence.content_payment_sequence3 {
  left: 300px;
  transition: all .3s ease-in;
}

/* 「決済シーケンス」タブボタンへのマウスオーバー時のスタイル */
#lamp_payment_sequence.content_payment_sequence1_hover {
  left: 0;
  background: gray;
  transition: all .3s ease-in;
}

#lamp_payment_sequence.content_payment_sequence2_hover {
  left: 150px;
  background: gray;
  transition: all .3s ease-in;
}

#lamp_payment_sequence.content_payment_sequence3_hover {
  left: 300px;
  background: gray;
  transition: all .3s ease-in;
}

.annotation {
  margin-left: 1em;
  text-indent: -1em;
}

.annotation-list {
  list-style: none;
  counter-reset: custom-counter;
}

.annotation-list li {
  counter-increment: custom-counter;
  position: relative;
}

.annotation-list li::before {
  content: "※" counter(custom-counter);
  position: absolute;
  left: -2em;
  width: 2em;
}