@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;
}

.content_title_sub{
display:block;
width:100%;
margin:20px 0 5px 0;
padding:3px 5px;
border-left:solid 5px #a9a9a9;
}

h3{
display:block;
width:100%;
margin:20px 0 5px 0;
padding:3px 5px;
border-left:solid 5px orange;
}

.explanation{
padding:10px;
}


/*■■■■■box-shadow■■■■■*/
.button{
border-radius:50px;
background:#ffa500;
width:250px;
margin:5px 0;
padding:20px 0;
text-align:center;
}

.button_shadow{
border-radius:50px;
background:#ffa500;
width:250px;
margin:5px 0;
padding:20px 0;
text-align:center;
box-shadow:3px 3px gray;
}


/*■■■hover■■■*/
.button_hover{
border-radius:50px;
background:#ffa500;
width:250px;
margin:5px 0;
padding:20px 0;
text-align:center;
box-shadow:3px 3px gray;
transition:0.8s;
}

.button_hover:hover{
opacity:0.7;
transition:0.8s;
}


/*■■■transform通常■■■*/
.past_unipue_wrapper{
width:95%;
max-width:500px;
display:flex;
justify-content:center;
align-items:center;
border:solid 1px #e0e0e0;
margin:20px auto;
padding:0;
box-shadow:3px 3px #e0e0e0;
transition:0.7s;
}

.past_unipue_img{
width:40%;
}

.past_unipue_title{
width:60%;
padding:0 5px;

}



/*■■■transform■■■*/

.transform_wrapper{
width:95%;
max-width:500px;
display:flex;
justify-content:center;
align-items:center;
border:solid 1px #e0e0e0;
margin:20px auto;
padding:0;
box-shadow:3px 3px #e0e0e0;

}

.transform_img_box{
width:40%;
overflow:hidden;
display:flex;
}

.transform_img{
width:100%;
transition:1s;

}

.transform_img:hover{
transform:scale(1.2,1.2);
transition:1s;
}

.transform_title_box{
width:60%;
padding:0 5px;
}





/*■■■iframe■■■*/

.map_img{
display:block;
width:100%;
max-width:700px;
margin:20px 0;
border:solid 1px gray;
}



/*■■■video■■■*/
.list_ul_video li{
list-style-type:disc;

}

video{
width:100%;
max-width:700px;
margin:10px 0 30px;

}

/*■■■flex■■■*/






/*■■■codecontainer■■■*/

.code_container{
width:48%;
height:100%;
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_pre_map{
width:100%;
/*white-space:pre-wrap;*/
/*overflow:visible;*/
/*marginとpaddingを入れることでズレ解消*/
margin:0;
padding:0;
}

.code{
width:100%;

}

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

}

.code_map{
font-family: 'Noto Sans JP', sans-serif;
line-height:1.3;
white-space:pre-wrap;
}








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

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

.sub_index{
width:98%;
}

.content_title{
width:98%;
}

.content_title_sub{
width:98%;
}

h3{
width:98%;
}

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

/*■■■■■box-shadow■■■■■*/
.button{
margin:5px auto;
}

.button_shadow{
margin:5px auto;
}


/*■■■hover■■■*/
.button_hover{
margin:5px auto;
}



/*■■■iframe■■■*/

.map_img{


}


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