.code_detail {
    margin: -7.2px 0 5px;
}
.code_explain_hidden {
    background: #F5F5F5;
    display: none;
    transition: display 1.1s;
    font-size: 13px;
}
/* 普通の下地に書いた場合 */
div.code_explain_hidden ol li {
    position: relative;
    margin-left: 88px;
    padding-right: 24px;
    list-style-type: none;
    color: #333333;
}
div.code_explain_hidden ol li::before {
    content: "line" counter(cnt) ":";
    left: -68px;
    counter-increment: cnt;
    position: absolute;
    color: #a7a7a7;
}
/* 普通の下地に for や while、with ブロックを設定する場合（9階層まで作成） */
.regular_indent_1floor {
    background: linear-gradient(90deg,transparent 0px,transparent 88px,#E1BD9D 88px,#E1BD9D 100%);
}
.regular_indent_2floor {
    background: linear-gradient(90deg,transparent 0px,transparent 88px,#E1BD9D 88px,#E1BD9D 108px,#E5C6AA 108px, #E5C6AA 100%);
}
div.code_explain_hidden ol.regular_indent_2floor li {
    position: relative;
    margin-left: 108px;
    padding-right: 24px;
    list-style-type: none;
    color: #333333;
}
div.code_explain_hidden ol.regular_indent_2floor li:before {
    content: "line" counter(cnt) ":";
    counter-increment: cnt;
    position: absolute;
    left: -88px;
}
.regular_indent_3floor {
    background: linear-gradient(90deg,transparent 0px,transparent 88px,#E1BD9D 88px,#E1BD9D 108px,#E5C6AA 108px,#E5C6AA 128px,#E9CEB7 128px,#E9CEB7  100%);
}
div.code_explain_hidden ol.regular_indent_3floor li {
    position: relative;
    margin-left: 128px;
    padding-right: 24px;
    list-style-type: none;
    color: #333333;
}
div.code_explain_hidden ol.regular_indent_3floor li:before {
    content: "line" counter(cnt) ":";
    counter-increment: cnt;
    position: absolute;
    left: -108px;
}
.regular_indent_4floor {
    background: linear-gradient(90deg,transparent 0px,transparent 88px,#E1BD9D 88px,#E1BD9D 108px,#E5C6AA 108px,#E5C6AA 128px,#E9CEB7 128px,#E9CEB7 148px,#EDD7C4 148px, #EDD7C4 100%);
}
div.code_explain_hidden ol.regular_indent_4floor li {
    position: relative;
    margin-left: 148px;
    padding-right: 24px;
    list-style-type: none;
    color: #333333;
}
div.code_explain_hidden ol.regular_indent_4floor li:before {
    content: "line" counter(cnt) ":";
    counter-increment: cnt;
    position: absolute;
    left: -128px;
}
.regular_indent_5floor {
    background: linear-gradient(90deg,transparent 0px,transparent 88px,#E1BD9D 88px,#E1BD9D 108px,#E5C6AA 108px,#E5C6AA 128px,#E9CEB7 128px,#E9CEB7 148px,#EDD7C4 148px, #EDD7C4 168px,#F1E0D1 168px,#F1E0D1 100%);
}
div.code_explain_hidden ol.regular_indent_5floor li {
    position: relative;
    margin-left: 168px;
    padding-right: 24px;
    list-style-type: none;
    color: #333333;
}
div.code_explain_hidden ol.regular_indent_5floor li:before {
    content: "line" counter(cnt) ":";
    counter-increment: cnt;
    position: absolute;
    left: -148px;
}
.regular_indent_6floor {
    background: linear-gradient(90deg,transparent 0px,transparent 88px,#E1BD9D 88px,#E1BD9D 108px,#E5C6AA 108px,#E5C6AA 128px,#E9CEB7 128px,#E9CEB7 148px,#EDD7C4 148px, #EDD7C4 168px,#F1E0D1 168px,#F1E0D1 188px,#F5E9DE 188px,#F5E9DE 100%);
}
div.code_explain_hidden ol.regular_indent_6floor li {
    position: relative;
    margin-left: 188px;
    padding-right: 24px;
    list-style-type: none;
    color: #333333;
}
div.code_explain_hidden ol.regular_indent_6floor li:before {
    content: "line" counter(cnt) ":";
    counter-increment: cnt;
    position: absolute;
    left: -168px;
}
.regular_indent_7floor {
    background: linear-gradient(90deg,transparent 0px,transparent 88px,#E1BD9D 88px,#E1BD9D 108px,#E5C6AA 108px,#E5C6AA 128px,#E9CEB7 128px,#E9CEB7 148px,#EDD7C4 148px, #EDD7C4 168px,#F1E0D1 168px,#F1E0D1 188px,#F5E9DE 188px,#F5E9DE 208px,#F9F2EB 208px,#F9F2EB 100%);
}
div.code_explain_hidden ol.regular_indent_7floor li {
    position: relative;
    margin-left: 208px;
    padding-right: 24px;
    list-style-type: none;
    color: #333333;
}
div.code_explain_hidden ol.regular_indent_7floor li:before {
    content: "line" counter(cnt) ":";
    counter-increment: cnt;
    position: absolute;
    left: -188px;
}
.regular_indent_8floor {
    background: linear-gradient(90deg,transparent 0px,transparent 88px,#E1BD9D 88px,#E1BD9D 108px,#E5C6AA 108px,#E5C6AA 128px,#E9CEB7 128px,#E9CEB7 148px,#EDD7C4 148px, #EDD7C4 168px,#F1E0D1 168px,#F1E0D1 188px,#F5E9DE 188px,#F5E9DE 208px,#F9F2EB 208px,#F9F2EB 228px,#FDFAF8 228px,#FDFAF8 100%);
}
div.code_explain_hidden ol.regular_indent_8floor li {
    position: relative;
    margin-left: 228px;
    padding-right: 24px;
    list-style-type: none;
    color: #333333;
}
div.code_explain_hidden ol.regular_indent_8floor li:before {
    content: "line" counter(cnt) ":";
    counter-increment: cnt;
    position: absolute;
    left: -208px;
}
.regular_indent_9floor {
    background: linear-gradient(90deg,transparent 0px,transparent 88px,#E1BD9D 88px,#E1BD9D 108px,#E5C6AA 108px,#E5C6AA 128px,#E9CEB7 128px,#E9CEB7 148px,#EDD7C4 148px, #EDD7C4 168px,#F1E0D1 168px,#F1E0D1 188px,#F5E9DE 188px,#F5E9DE 208px,#F9F2EB 208px,#F9F2EB 228px,#FDFAF8 228px,#FDFAF8 248px,#FFF 248px,#FFF 100%);
}
div.code_explain_hidden ol.regular_indent_9floor li {
    position: relative;
    margin-left: 248px;
    padding-right: 24px;
    list-style-type: none;
    color: #333333;
}
div.code_explain_hidden ol.regular_indent_9floor li:before {
    content: "line" counter(cnt) ":";
    counter-increment: cnt;
    position: absolute;
    left: -228px;
}
/* functionブロックを設定する場合（9階層まで作成） */
.function_indent_1floor {
    background: linear-gradient(90deg,transparent 0px,transparent 88px,#C1CDAE 88px,#C1CDAE 100%);
}
.function_indent_2floor {
    background: linear-gradient(90deg,transparent 0px,transparent 88px,#C1CDAE 88px,#C1CDAE 108px,#C9D4B8 108px, #C9D4B8 100%);
}
div.code_explain_hidden ol.function_indent_2floor li {
    position: relative;
    margin-left: 108px;
    padding-right: 24px;
    list-style-type: none;
    color: #333333;
}
div.code_explain_hidden ol.function_indent_2floor li:before {
    content: "line" counter(cnt) ":";
    counter-increment: cnt;
    position: absolute;
    left: -88px;
}
.function_indent_3floor {
    background: linear-gradient(90deg,transparent 0px,transparent 88px,#C1CDAE 88px,#C1CDAE 108px,#C9D4B8 108px,#C9D4B8 128px,#D1DAC3 128px,#D1DAC3  100%);
}
div.code_explain_hidden ol.function_indent_3floor li {
    position: relative;
    margin-left: 128px;
    padding-right: 24px;
    list-style-type: none;
    color: #333333;
}
div.code_explain_hidden ol.function_indent_3floor li:before {
    content: "line" counter(cnt) ":";
    counter-increment: cnt;
    position: absolute;
    left: -108px;
}
.function_indent_4floor {
    background: linear-gradient(90deg,transparent 0px,transparent 88px,#C1CDAE 88px,#C1CDAE 108px,#C9D4B8 108px,#C9D4B8 128px,#D1DAC3 128px,#D1DAC3 148px,#D9E0CE 148px, #D9E0CE 100%);
}
div.code_explain_hidden ol.function_indent_4floor li {
    position: relative;
    margin-left: 148px;
    padding-right: 24px;
    list-style-type: none;
    color: #333333;
}
div.code_explain_hidden ol.function_indent_4floor li:before {
    content: "line" counter(cnt) ":";
    counter-increment: cnt;
    position: absolute;
    left: -128px;
}
.function_indent_5floor {
    background: linear-gradient(90deg,transparent 0px,transparent 88px,#C1CDAE 88px,#C1CDAE 108px,#C9D4B8 108px,#C9D4B8 128px,#D1DAC3 128px,#D1DAC3 148px,#D9E0CE 148px, #D9E0CE 168px,#E1E7D8 168px,#E1E7D8 100%);
}
div.code_explain_hidden ol.function_indent_5floor li {
    position: relative;
    margin-left: 168px;
    padding-right: 24px;
    list-style-type: none;
    color: #333333;
}
div.code_explain_hidden ol.function_indent_5floor li:before {
    content: "line" counter(cnt) ":";
    counter-increment: cnt;
    position: absolute;
    left: -148px;
}
.function_indent_6floor {
    background: linear-gradient(90deg,transparent 0px,transparent 88px,#C1CDAE 88px,#C1CDAE 108px,#C9D4B8 108px,#C9D4B8 128px,#D1DAC3 128px,#D1DAC3 148px,#D9E0CE 148px, #D9E0CE 168px,#E1E7D8 168px,#E1E7D8 188px,#E9EDE3 188px,#E9EDE3 100%);
}
div.code_explain_hidden ol.function_indent_6floor li {
    position: relative;
    margin-left: 188px;
    padding-right: 24px;
    list-style-type: none;
    color: #333333;
}
div.code_explain_hidden ol.function_indent_6floor li:before {
    content: "line" counter(cnt) ":";
    counter-increment: cnt;
    position: absolute;
    left: -168px;
}
.function_indent_7floor {
    background: linear-gradient(90deg,transparent 0px,transparent 88px,#C1CDAE 88px,#C1CDAE 108px,#C9D4B8 108px,#C9D4B8 128px,#D1DAC3 128px,#D1DAC3 148px,#D9E0CE 148px, #D9E0CE 168px,#E1E7D8 168px,#E1E7D8 188px,#E9EDE3 188px,#E9EDE3 208px,#F1F4ED 208px,#F1F4ED 100%);
}
div.code_explain_hidden ol.function_indent_7floor li {
    position: relative;
    margin-left: 208px;
    padding-right: 24px;
    list-style-type: none;
    color: #333333;
}
div.code_explain_hidden ol.function_indent_7floor li:before {
    content: "line" counter(cnt) ":";
    counter-increment: cnt;
    position: absolute;
    left: -188px;
}
.function_indent_8floor {
    background: linear-gradient(90deg,transparent 0px,transparent 88px,#C1CDAE 88px,#C1CDAE 108px,#C9D4B8 108px,#C9D4B8 128px,#D1DAC3 128px,#D1DAC3 148px,#D9E0CE 148px, #D9E0CE 168px,#E1E7D8 168px,#E1E7D8 188px,#E9EDE3 188px,#E9EDE3 208px,#F1F4ED 208px,#F1F4ED 228px,#F9FAF8 228px,#F9FAF8 100%);
}
div.code_explain_hidden ol.function_indent_8floor li {
    position: relative;
    margin-left: 228px;
    padding-right: 24px;
    list-style-type: none;
    color: #333333;
}
div.code_explain_hidden ol.function_indent_8floor li:before {
    content: "line" counter(cnt) ":";
    counter-increment: cnt;
    position: absolute;
    left: -208px;
}
.function_indent_9floor {
    background: linear-gradient(90deg,transparent 0px,transparent 88px,#C1CDAE 88px,#C1CDAE 108px,#C9D4B8 108px,#C9D4B8 128px,#D1DAC3 128px,#D1DAC3 148px,#D9E0CE 148px, #D9E0CE 168px,#E1E7D8 168px,#E1E7D8 188px,#E9EDE3 188px,#E9EDE3 208px,#F1F4ED 208px,#F1F4ED 228px,#F9FAF8 228px,#F9FAF8 248px,#FFF 248px,#FFF 100%);
}
div.code_explain_hidden ol.function_indent_9floor li {
    position: relative;
    margin-left: 248px;
    padding-right: 24px;
    list-style-type: none;
    color: #333333;
}
div.code_explain_hidden ol.function_indent_9floor li:before {
    content: "line" counter(cnt) ":";
    counter-increment: cnt;
    position: absolute;
    left: -228px;
}
/* classブロックを設定する場合（9階層まで作成） */
.class_indent_1floor {
    background: linear-gradient(90deg,transparent 0px,transparent 88px,#FBDC7F 88px,#FBDC7F 100%);
}
.class_indent_2floor {
    background: linear-gradient(90deg,transparent 0px,transparent 88px,#FBDC7F 88px,#FBDC7F 108px,#FBE090 108px, #FBE090 100%);
}
div.code_explain_hidden ol.class_indent_2floor li {
    position: relative;
    margin-left: 108px;
    padding-right: 24px;
    list-style-type: none;
    color: #333333;
}
div.code_explain_hidden ol.class_indent_2floor li:before {
    content: "line" counter(cnt) ":";
    counter-increment: cnt;
    position: absolute;
    left: -88px;
}
.class_indent_3floor {
    background: linear-gradient(90deg,transparent 0px,transparent 88px,#FBDC7F 88px,#FBDC7F 108px,#FBE090 108px,#FBE090 128px,#FCE5A0 128px,#FCE5A0  100%);
}
div.code_explain_hidden ol.class_indent_3floor li {
    position: relative;
    margin-left: 128px;
    padding-right: 24px;
    list-style-type: none;
    color: #333333;
}
div.code_explain_hidden ol.class_indent_3floor li:before {
    content: "line" counter(cnt) ":";
    counter-increment: cnt;
    position: absolute;
    left: -108px;
}
.class_indent_4floor {
    background: linear-gradient(90deg,transparent 0px,transparent 88px,#FBDC7F 88px,#FBDC7F 108px,#FBE090 108px,#FBE090 128px,#FCE5A0 128px,#FCE5A0 148px,#FCE9B1 148px, #FCE9B1 100%);
}
div.code_explain_hidden ol.class_indent_4floor li {
    position: relative;
    margin-left: 148px;
    padding-right: 24px;
    list-style-type: none;
    color: #333333;
}
div.code_explain_hidden ol.class_indent_4floor li:before {
    content: "line" counter(cnt) ":";
    counter-increment: cnt;
    position: absolute;
    left: -128px;
}
.class_indent_5floor {
    background: linear-gradient(90deg,transparent 0px,transparent 88px,#FBDC7F 88px,#FBDC7F 108px,#FBE090 108px,#FBE090 128px,#FCE5A0 128px,#FCE5A0 148px,#FCE9B1 148px, #FCE9B1 168px,#FDEEC1 168px,#FDEEC1 100%);
}
div.code_explain_hidden ol.class_indent_5floor li {
    position: relative;
    margin-left: 168px;
    padding-right: 24px;
    list-style-type: none;
    color: #333333;
}
div.code_explain_hidden ol.class_indent_5floor li:before {
    content: "line" counter(cnt) ":";
    counter-increment: cnt;
    position: absolute;
    left: -148px;
}
.class_indent_6floor {
    background: linear-gradient(90deg,transparent 0px,transparent 88px,#FBDC7F 88px,#FBDC7F 108px,#FBE090 108px,#FBE090 128px,#FCE5A0 128px,#FCE5A0 148px,#FCE9B1 148px, #FCE9B1 168px,#FDEEC1 168px,#FDEEC1 188px,#FDF2D2 188px,#FDF2D2 100%);
}
div.code_explain_hidden ol.class_indent_6floor li {
    position: relative;
    margin-left: 188px;
    padding-right: 24px;
    list-style-type: none;
    color: #333333;
}
div.code_explain_hidden ol.class_indent_6floor li:before {
    content: "line" counter(cnt) ":";
    counter-increment: cnt;
    position: absolute;
    left: -168px;
}
.class_indent_7floor {
    background: linear-gradient(90deg,transparent 0px,transparent 88px,#FBDC7F 88px,#FBDC7F 108px,#FBE090 108px,#FBE090 128px,#FCE5A0 128px,#FCE5A0 148px,#FCE9B1 148px, #FCE9B1 168px,#FDEEC1 168px,#FDEEC1 188px,#FDF2D2 188px,#FDF2D2 208px,#FEF7E2 208px,#FEF7E2 100%);
}
div.code_explain_hidden ol.class_indent_7floor li {
    position: relative;
    margin-left: 208px;
    padding-right: 24px;
    list-style-type: none;
    color: #333333;
}
div.code_explain_hidden ol.class_indent_7floor li:before {
    content: "line" counter(cnt) ":";
    counter-increment: cnt;
    position: absolute;
    left: -188px;
}
.class_indent_8floor {
    background: linear-gradient(90deg,transparent 0px,transparent 88px,#FBDC7F 88px,#FBDC7F 108px,#FBE090 108px,#FBE090 128px,#FCE5A0 128px,#FCE5A0 148px,#FCE9B1 148px, #FCE9B1 168px,#FDEEC1 168px,#FDEEC1 188px,#FDF2D2 188px,#FDF2D2 208px,#FEF7E2 208px,#FEF7E2 228px,#FFFCF2 228px,#FFFCF2 100%);
}
div.code_explain_hidden ol.class_indent_8floor li {
    position: relative;
    margin-left: 228px;
    padding-right: 24px;
    list-style-type: none;
    color: #333333;
}
div.code_explain_hidden ol.class_indent_8floor li:before {
    content: "line" counter(cnt) ":";
    counter-increment: cnt;
    position: absolute;
    left: -208px;
}
.class_indent_9floor {
    background: linear-gradient(90deg,transparent 0px,transparent 88px,#FBDC7F 88px,#FBDC7F 108px,#FBE090 108px,#FBE090 128px,#FCE5A0 128px,#FCE5A0 148px,#FCE9B1 148px, #FCE9B1 168px,#FDEEC1 168px,#FDEEC1 188px,#FDF2D2 188px,#FDF2D2 208px,#FEF7E2 208px,#FEF7E2 228px,#FFFCF2 228px,#FFFCF2 248px,#FFF 248px,#FFF 100%);
}
div.code_explain_hidden ol.class_indent_9floor li {
    position: relative;
    margin-left: 248px;
    padding-right: 24px;
    list-style-type: none;
    color: #333333;
}
div.code_explain_hidden ol.class_indent_9floor li:before {
    content: "line" counter(cnt) ":";
    counter-increment: cnt;
    position: absolute;
    left: -228px;
}