.pln{
	color: #333;
}

.str{
	color:#080;
}
.kwd{
	color:#008;
}
.com{
	color:#800;
}
.typ{
	color:#606;
}
.lit{
	color:#066;
}
.pun,.opn,.clo{
	color:#660;
}
.tag{
	color: #2F6F9F;
}
.atn{
	color: #4F9FD0;
}
.atv{
	color: #D54950;
}
.dec,.var{
	color:#606;
}
.fun{
	color:red;
}

pre.prettyprint[data-type="type2"]{
	padding: 15px;
	border:1px solid #888;
	background: #F7F7F9;
	font-size: 13px;
	border: 1px solid #E1E1E8;
	border-radius: 5px;
	/* width: 1000px; */
	height: 520px;
}

pre.prettyprint[data-type="type1"]{
	padding: 15px;
	border:1px solid #888;
	background: #F7F7F9;
	font-size: 13px;
	border: 1px solid #E1E1E8;
	border-radius: 5px;
	width: 400px;
}

pre.prettyprint_question{
	padding: 15px;
	border:1px solid #888;
	background: #F7F7F9;
	font-size: 13px;
	border: 1px solid #E1E1E8;
	border-radius: 5px;
	/* width: 1000px; */
	height: 300px;
}

pre.prettyprint[data-type="type3"]{
	padding: 15px;
	border:1px solid #888;
	background: #F7F7F9;
	font-size: 13px;
	border: 1px solid #E1E1E8;
	border-radius: 5px;
	margin-bottom: 0px;
	width: 844px;
	height: 480px;
}

pre.prettyprint[data-type="type3-1"]{
	padding: 15px;
	border:1px solid #888;
	background: #F7F7F9;
	font-size: 13px;
	border: 1px solid #E1E1E8;
	border-radius: 5px;
	margin-bottom: 0px;
	width: 844px;
	height: 274px;
}

pre.prettyprint[data-type="type3-2"]{
	padding: 15px;
	border:1px solid #888;
	background: #F7F7F9;
	font-size: 13px;
	border: 1px solid #E1E1E8;
	border-radius: 5px;
	margin-bottom: 0px;
	width: 844px;
	height: 411px;
}

pre.prettyprint[data-type="type3-3"]{
	padding: 15px;
	border:1px solid #888;
	background: #F7F7F9;
	font-size: 13px;
	border: 1px solid #E1E1E8;
	border-radius: 5px;
	margin-bottom: 0px;
	width: 844px;
	height: 480px;
}

.demo + pre.prettyprint{
	border-radius: 0 0 5px 5px;
}

ol.linenums{
	margin-top:0;
	margin-bottom:0;
}
li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8{
	list-style-type:none;
}
li.L1,li.L3,li.L5,li.L7,li.L9{
	background:#eee;
}

/* 追加 */
.Code{
	display: flex;
	padding: 0 0 30px 0;
}

.code{
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	padding: 0 0 0 0;
}

.scratch_program{
	display: flex;
	padding: 0 0 0 0;
}


/* .Code .scratchText{
    margin: 0 0 0 60px;
} */

.Code .scratch .image{
    margin: 0;
    padding: 15px;
	border:1px solid #888;
	border: 1px solid #E1E1E8;
	border-radius: 5px;
    position: relative;
	width: 500px; 
	height: 700px; 
	overflow-y: scroll;
}

/* scratchのコードが小さいときに使用 */
.Code .scratch .imageSmall{
    margin: 0;
    padding: 15px;
	border:1px solid #888;
	border: 1px solid #E1E1E8;
	border-radius: 5px;
    position: relative;
	/* overflow-y: scroll; */
}

/* .Code .pythonText{
    margin: 0 0 0 80px;
} */

.Code .python{
    margin: 0 0 0 20px;
    padding: 0;
}

.problem{
    display: flex;
}

.problem .image{
    margin: 0;
    padding: 0;
    overflow: hidden;
    position: relative;
}

.problem .text{
    margin: 20px 0 0 20px;
    padding: 0;
}

div.scratch :not(h2):not(img){
	padding: 15px;
	border:1px solid #888;
	background: #F7F7F9;
	font-size: 13px;
	border: 1px solid #E1E1E8;
	border-radius: 5px;
}

.code > span.pln{
	display: none;
}

.scratch_image{
	/* max-width: 60%; */
    float: left;
    border: 2px solid #4bb7df;
    /* padding: 15px; */
	height: 450px;
	overflow-y: hidden;
    overflow-x: scroll;
}

.scratch_image[data-type="type2-4"]{
	/* max-width: 60%; */
    float: left;
    border: 2px solid #4bb7df;
    /* padding: 15px; */
	height: 450px;
	max-width: 343px;
	overflow-y: hidden;
    overflow-x: scroll;
}

.scratch_image[data-type="type3-1"]{
	/* max-width: 60%; */
    float: left;
    border: 2px solid #4bb7df;
    /* padding: 15px; */
	height: 244px;
	overflow-y: hidden;
    overflow-x: scroll;
}

.scratch_image[data-type="type3-2"]{
	/* max-width: 60%; */
    float: left;
    border: 2px solid #4bb7df;
    /* padding: 15px; */
	height: 381px;
	overflow-y: hidden;
    overflow-x: scroll;
}

.scratch_image[data-type="type3-3"]{
	/* max-width: 60%; */
    float: left;
    border: 2px solid #4bb7df;
    /* padding: 15px; */
	height: 450px;
	overflow-y: hidden;
    overflow-x: scroll;
}

.python_code{
	float: right;
    border: 2px solid #eeeea9;
	padding: 0px;
    padding: 15px;
	/* max-width: 120%; */
	width: 400px;
	height: 450px;
	overflow-y: hidden;
    overflow-x: scroll;
}

.python_code[data-type="type3-1"]{
	float: right;
    border: 2px solid #eeeea9;
	padding: 0px;
    padding: 15px;
	/* max-width: 120%; */
	width: 400px;
	height: 244px;
	overflow-y: hidden;
    overflow-x: scroll;
}

.python_code[data-type="type3-2"]{
	float: right;
    border: 2px solid #eeeea9;
	padding: 0px;
    padding: 15px;
	/* max-width: 120%; */
	width: 400px;
	height: 381px;
	overflow-y: hidden;
    overflow-x: scroll;
}

.python_code[data-type="type3-3"]{
	float: right;
    border: 2px solid #eeeea9;
	padding: 0px;
    padding: 15px;
	/* max-width: 120%; */
	width: 400px;
	height: 450px;
	overflow-y: hidden;
    overflow-x: scroll;
}

img.img{
	max-width: none;
	overflow-x: scroll;
}

img.bl_img{
	max-width: none;
	overflow-x: scroll;
	overflow-y: scroll;
}

.program{
	max-width: 120%;
    float: right;
    padding: 10px;
    /* max-height: 500px; */
	margin-left: 4%;
	/* margin-left: 10px; */
}

iframe.program[data-type="type1"]{
	width: 800px;
	height:605px;
    padding: 10px;
    margin-right: 25%;
	margin-left: 5%;
}

.mblockPythonCode {
    width: 50%;
    float: left;
    border: 2px solid #eeeea9;
    padding: 15px;
    height: 500px;
    overflow-y: scroll;
}

.pythonCode {
    width: 50%;
    float: right;
    border: 2px solid green;
    padding: 15px;
    height: 500px;
    overflow-y: scroll;
	/* margin-left: 2%; */
	margin-top: -40px;
}

/* iframe.program{
	margin-left: 140px;
} */

.question_image{
	margin-top: 10px;
}

.code-block, .pythonCode, .mblockPythonCode{
    position: relative;
    white-space: pre; /*空白行を保持*/
    font-family: monospace; /*モノスペースフォントで見やすくする*/
  }

  .code-block .code-content, .pythonCode .code-content, .mblockPythonCode .code-content{
    position: relative;
    padding-left: 2em; /*行番号のスペースを考慮*/
  }

  .code-block .line-number, .pythonCode .line-number, .mblockPythonCode .line-number{
    position: absolute;
    left: 0;
    width: 1em; /* 行番号用のスペース */
    text-align: right;
    color: #888; /* 行番号の色を灰色に統一 */
    padding-right: 0.5em;
    /* 縦線を消すためにborder-rightを削除 */
    /* border-right: 1px solid #ddd; */
    white-space: nowrap;
    display: inline-block;
  }

  .code-block .line-content, .pythonCode .line-content, .mblockPythonCode .line-content{
    display: inline; /*行の内容をインラインで表示*/
  }

.fixed-window {
	display: none; /* 初期状態は非表示 */
	position: fixed; /* 固定位置に設定 */
	top: 100px; /* 上からの距離 */
	right: 20px; /* 右からの距離 */
	width: 400px; /* 幅 */
	padding: 20px; /* 内側の余白 */
	background-color: #f8f9fa; /* 背景色 */
	border: 1px solid #ccc; /* 枠線 */
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 影 */
	z-index: 1000; /* 前面に表示 */
}

.close {
	color: #aaa;
	float: right;
	font-size: 28px;
	font-weight: bold;
	cursor: pointer;
}
.close:hover {
	color: black;
}
.word {
	cursor: pointer;
	color: red;
	text-decoration: underline;
}

/* コピー禁止コード */
div.python {
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}