@charset "UTF-8";

@import url(//use.fontawesome.com/releases/v5.7.2/css/all.css);

iframe{
display:block;
width:48%;
height:500px;
border:solid 1px gray;
margin:0px auto;
padding:0;
box-sizing:border-box;
}

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

.content_title_second{
display:block;
width:95%;
margin:30px 0px 10px;
padding:3px 5px;
background:#fff;
border-left:solid 5px #ff7f50;
}

.block_wrapper{
display:flex;
align-items: flex-start;
justify-content:space-between;
align-content: flex-start;
margin:20px auto 0 ;
padding:0;
}

.img_common{
display:block;
width:auto;
max-width:100%;
height:auto;
margin:10px auto;
border:none; /*solid 1px gray;*/
}

.img1{

}

.img2_wrapper{
display:flex;
align-items: center;
justify-content: center;
width:100%;
}

.img2{
width:45%;
border:none;
}

.fa-angle-double-right{
display:block;
font-size:60px;

}

.fa-angle-double-down{
display:none;
font-size:0px;
}

.btn{
width:200px;
height:50px;
background:#000;
margin:40px auto 10px;
border-radius:5px 5px;
display:flex;
align-items: center;
justify-content: center;
box-shadow:2px 2px gray;
}

.btn:hover{
opacity:0.7;
}


.btn a{
color:#fff;
font-size:1.2em;
}

.img5{
width:100%;
max-width:700px;

}

.sample_wrapper{
height:100%;
width:100%;
max-width:700px;
background-image:url(../img/007/img5.png);
background-repeat:repeat;
background-size:contain;
padding-bottom:20px;
margin:0 auto;
}

.sample_header{
height:50px;
width:100%;
background:rgba(0,0,0,0.9);
display:flex;
align-items: center;
justify-content: center;
}

.sample_text{

}

.sample_img{
display:block;
width:85%;
margin:20px auto;
}

.sample_block1{

}

.sample_block2,.sample_block3{
width:85%;
height:200px;
margin:20px auto;
background:rgba(255,255,255,0.7);

}

.content_img_wrapper{
display:flex;
align-items: center;
justify-content: center;/*左右余白あり*/
margin:30px auto;
}

.img_common_inner{
width:30%;
margin:1%;
}








/*■■■codecontainer■■■*/

.code_container{
width:48%;
height:500px;
margin:0;
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%;

}

.text{
display:flex;
align-items:center;
width:700px;
height:21px;
padding:0 0 0 5px;
margin:0;

}

.textodd{
background:#fff;
}

.texteven{
background:whitesmoke;
}


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

}





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

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

.content_title{
width:98%;

}

.img2_wrapper{
display:block;
width:100%;
}

.img2{
width:100%;
}

.i_right{
display:none;
}

.i_down{
display:block;
margin:0 auto;
text-align:center;
}

.fa-angle-double-down{
display:block;
font-size:40px;
text-align:center;
}

iframe{
width:100%;

}

.block_wrapper{
display:block;
margin:20px auto 0 ;
padding:0;
}

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

.sample_img{
width:90%;
margin:20px auto;
}

.sample_block2,.sample_block3{
width:90%;
height:200px;

}





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