@charset "UTF-8";

.sub_index{
display:block;
width:100%;
margin-top:60px;
padding:15px 5px;
background:#eeeeee;
border-left:solid 5px orange;
font-size:26px;
font-weight:bold;

}

.content_title{
display:block;
width:100%;
margin:30px 0px 10px;
padding:3px 5px;
background:#eeeeee;
border-left:solid 5px #0000ff;
}



/*■■■■■2カラム■■■■■*/

/*■■■float■■■*/
.float_column_outer_wrapper{
width:100%;
max-width:700px;
height:100%;
margin:0;
}

.column{
text-align:center;
}

.float_column_header{
width:100%;
height:50px;
background:#dcdcdc;
}

.float_column_left,.float_column_right{
height:200px;
width:50%;
}

.float_column_left{
float:left;
background:#00ffff;
}

.float_column_right{
float:right;
background:#7fffd4;
}

.float_column_footer{
clear:both;
width:100%;
height:50px;
background:#000;
color:#fff;
}


/*■■■flex■■■*/
.flex_column_outer_wrapper{
width:100%;
max-width:700px;
height:100%;
margin:0;
}

.flex_column_header{
width:100%;
height:50px;
background:#dcdcdc;
}

.flex_column_wrapper{
display:flex;
align-items:center;
justify-content:center;
}

.flex_column_left,.flex_column_right{
height:200px;
width:50%;
}

.flex_column_left{
background:#00ffff;
}

.flex_column_right{
background:#7fffd4;
}

.flex_column_footer{
width:100%;
height:50px;
background:#000;
color:#fff;
}




/*■■■■■2カラム終了■■■■■*/


/*■■■codecontainer■■■*/

.code_container{
width:48%;
height:100%;
margin:4px 0 20px;
padding:0 10px;
border:solid 1px #000;
max-width:900px;
background:#FFFFF0;
}

pre{
width:100%;
overflow-x:scroll;
/*marginとpaddingを入れることでズレ解消*/
margin:0;
padding:0;
}

.code{
width:100%;

}

.code_code{
font-family: 'Noto Sans JP', sans-serif;
line-height:1.3;

}


/*■■■responsive■■■*/

.fas{
padding:0 5px;
font-weight:900;
color:orange;
}

/*PC*/
.responsive_column_outer_wrapper{
width:100%;
max-width:700px;
height:100%;
margin:0;
}

.responsive_column_header{
width:100%;
height:50px;
background:#dcdcdc;
}

.responsive_column_wrapper{
display:flex;
align-items:center;
justify-content:center;
}

.responsive_column_left,.responsive_column_right{
height:200px;
width:50%;
}

.responsive_column_left{
background:#00ffff;
}

.responsive_column_right{
background:#7fffd4;
}

.responsive_column_footer{
width:100%;
height:50px;
background:#000;
color:#fff;
}

/*mobile*/
.responsive_column_outer_wrapper_mb{
width:100%;
max-width:700px;
height:100%;
margin:0;
}

.responsive_column_header_mb{
width:100%;
height:50px;
background:#dcdcdc;
}

.responsive_column_wrapper_mb{
display:block;
}

.responsive_column_left_mb,.responsive_column_right_mb{
height:200px;
width:100%;
}

.responsive_column_left_mb{
background:#00ffff;
}

.responsive_column_right_mb{
background:#7fffd4;
}

.responsive_column_footer_mb{
width:100%;
height:50px;
background:#000;
color:#fff;
}





/*■■■■■■■■■■スマホ■■■■■■■■■■*/

@media screen and (max-width:768px){

.sub_index{
width:98%;
}

.content_title{
width:98%;
}



.code_container{
width:95%;
height:100%;
margin:5px auto;
}

}/*スマホ終了タグ*/