@charset "UTF-8";

html{

}

body{
font-family:'Noto Sans JP',Avenir,メイリオ,verdana,sans-serif;
/*overflow:hidden;*/
margin:0;
padding:0;
box-sizing:border-box;
background:#f0f0f0;
width:100%;
/*min-width:1200px;*/
}

a{
text-decoration:none;
color:#000;
}

.header{
background:#fff;
width:100%;
height:100%;

}

.header_inner{
/*max-width:1200px;*/
height:50px;
margin:0 auto;
padding:0;
display:flex;
justify-content:center;
align-items: center;
}

.thumbnail_img_top{
height:30px;
margin:0;
padding-left:5px;
}

h1{
font-family:'Righteous', cursive;
font-size:30px;
font-weight:400;
color:#404040;
margin:0;

}

.blog_title{
font-family:'Righteous', cursive;
font-size:30px;
font-weight:400;
color:#404040;
width:100%;
margin:0;

}

.dropmenu{
display:flex;
justify-content: center;
align-items: center;
width:100%;
height:50px;
margin:0;
padding:0;

}

.dropmenu li{
list-style-type:none;
margin:0 16px;
}

.dropmenu li a{
font-size:20px;
}


/*ドロワーメニュー非表示*/
.drawer{
display:none;

}

.wrapper_top{
width:100%;
max-width:1152px;
height:100%;
min-height:1000px;
margin:20px auto;
display:flex;
justify-content: center; 
align-items:flex-start;
}


.wrapper{
width:100%;
max-width:1152px;
height:100%;
min-height:1000px;
margin:20px auto;
display:flex;
justify-content: center; 
align-items:flex-start;

}

/*■トップページmain■*/
.main_top{
width:69%;
/*max-width:740px;*/
margin:0px 10px;
background:#fff;
padding:10px 0px;
display:flex;
justify-content:center; /*space-between;*/
flex-wrap: wrap;
}

/*最下段を左寄せにする*/
.main_top:after{
content:"";
display:block;
/*width:350px;*/
width:45%;
margin-left:20px;
}

.main{
width:69%;
/*max-width:740px;*/
margin:0px 10px;
background:#fff;
padding:10px 10px;
}

.side{
width:31%;
/*max-width:370px;*/
/*min-width:238px;*/
height:100%;
min-height:1200px;
margin:0px 10px;
padding:10px 20px;
background:#fff;
display:block;
position:absolute
right:0;
top:0;

}

.side_category_wrapper{
width:100%;
display:block;
margin:10px auto;
border:solid 1px #e0e0e0;
}

.fa-list-ul{
padding-right:5px;
}

.side_category_item{
text-align:center;
font-size:1.2em;
background:#c37854;
padding:5px 0;
color:#fff;
}

.side_category_list{
padding:5px;
margin:0;
}

.side_category_list li{
margin:0px 0;
padding:5px 0;
font-size:1.2em;
transition:0.7s;
list-style-type:none;
}

.side_category_list li:hover{
background:#eeeeee;
width:100%;
transition:0.7s;
}

.side_category_list li a{
padding-left:10px;

}


.side contents_img{
width:100%;
height:100%;
}

.side_about_wrapper{
width:100%;
height:100%;
display:block;
margin:20px auto;
border:solid 1px #e0e0e0;
}

.side_about_item{
text-align:center;
font-size:1.2em;
background:#c37854;
padding:5px 0;
color:#fff;
}

.side_about_inner{
padding:10px 5px;
}

.side_about_img{
width:64px;
display:block;
margin:10px auto;
border:solid 1px #000;
border-radius:50%;
padding:5px;
}

.side_about_wrapper p{
margin:0;
}


/*■■■パンくずリスト■■■*/

/*各カテゴリindexページ調整のため*/
.breadcrumb_outer{
max-width:1152px;
margin:0 auto;
}

.breadcrumb_wrapper{
/*width:750px;*/
margin:5px auto 5px ;
}

.breadcrumb {
display:block;
margin:0 auto;
padding:0;
list-style: none;
}

.breadcrumb li {
display: inline;
list-style: none;
font-family: 'Noto Sans JP', sans-serif;
font-weight:right;
color:#555;
}

.breadcrumb li:after{
content: '>';
padding: 0 0.2em;
color: #555;

}

.breadcrumb li:last-child:after{
content: '';
}

.breadcrumb li a{
text-decoration: none;
color:#999999;

}

/*■■■トップページcss■■■*/
.contents_wrapper{
/*width:350px;*/
width:45%;
/*height:482.5px;*/
height:100%; /*auto*/
background:#fff;
margin:10px 10px;
box-shadow:1px 1px 10px #c2c2c2;
position:relative;
border:solid 1px #e0e0e0;
}

.contents_anchor{
/*display:block;*/
text-decoration:none;
color:#000;
transition:0.5s;
height:100%;

}

.contents_anchor:hover{
/*display:block;*/
opacity:0.5;
transition:0.5s;
}


#contents_category{
/*height:35px;*/
height:auto;
color:#fff;
font-weight:bold;
padding:5px 0 5px 5px;
/*padding-left:5px;*/
display:flex;
align-items: center;
}

.category_web{
background:#4169e1; /*royalblue*/
}

.category_life{
background:#ff8c00;

}

.category_vba{
background:#008080; /*#339966;*/
}

.category_others{
background:#8f8f8f;

}

.contents_inner{
display:block;
height:100%; /*170px;*/
margin:0 auto;
width:100%;
}

.contents_img{
display:block;
width:100%; /*45%;*/
height:auto;
/*height:calc((350px / 6)*4);*/ /*200px;*/
/*min-height:200px;*/
margin:0px auto;
}

.contents_title{
width:95%; /*55%;*/
height:auto;
min-height:150px;
display:flex;
align-items:center;
justify-content:center;
align-content: space-around;
padding:5px 0px;
margin:0 auto;
font-size:1.2em;
font-weight:900;

}


.contents_date:before{
font-family: "Font Awesome 5 Free";
content: "\f017";
font-weight:400;
font-size:20px;
padding-right : 5px;
color:gray;
/*background:#fff;*/

}

.contents_date{
/*position:absolute;
bottom:0;*/
height:auto;
width:98%;
background:#f8f8f8;
display:flex;
align-items:center;
justify-content: flex-end;
padding:5px 5px 5px 0;
/*padding-right:5px;*/

}


/*■■■コンテンツ共通■■■*/

p{
line-height:1.7;
color:#373737;
}

/*各コンテンツ外枠*/
.contents_outer{
/*max-width:1152px;
margin:0 auto;
padding:10px 10px 60px;
background:#fff;*/

}

/*■各コンテンツトップビュー■*/
.contents_top{
/*display:flex;
align-items: center;
width:900px;
min-width:550px;
height:250px;
box-shadow:2px 2px 4px;
margin:10px auto 40px;*/
}

.contents_top_text{
width:100%;
height:auto;
max-height:250px;
margin:20px 0;
font-family: 'Noto Sans JP', sans-serif;
font-size:40px;
font-weight:900;
padding:0;
}

.contents_top_img{
width:100%;
min-width:250px;
height:auto;
min-height:250px;
margin:10px auto;
padding:0;
}

/*各コンテンツ小見出し h3*/
.content_title{
margin-top:40px;
width:95% !important;

}

/*各コンテンツ少々見出し 左側に縦線*/
.content_title_sub{
display:block;
width:95% !important;
margin:20px 0 10px 0;
padding:3px 5px;
border-left:solid 5px #a9a9a9;
font-weight:bold;
}

/*各コンテンツ少々見出し 下側に横線*/
.content_title_sub_underline{
margin-top:41px;
}

.content_title_sub_underline::after{
content:'';
display:block;
width:95%;
height:1px;
margin:5px 0;
background-color:#000;

}


/*■コンテンツ本文外枠*/
.contents_inner_wrapper{
/*max-width:900px;
margin:0 auto;*/

}

.contents_inner_wrapper p{
margin:0;
padding:0;
}

/*■コード説明枠*/
.explanation{
width:97%;
height:100%;
background:#faebd7;
padding:5px 10px;
margin:10px 0;
}

/*目次*/
.index_wrapper{
width:100%;
max-width:400px;
padding:20px 10px 30px;
border:solid 1px gray;
background:#fff;
margin:20px auto;
}

.index_top{
text-align:center;

}

.index_wrapper ol{

}

.index_wrapper ol li{
text-decoration:none;
margin:5px 0;
}

.index_wrapper ol li a{
color:#00f;

}

/*表示切替目次*/
.list_wrapper{
width:100%;
max-width:400px;
padding:20px 10px;
border:solid 1px gray;
background:#fff;
margin:20px auto;
transition:0.4s;
}

.list_wrapper.active{
height:0%;
transition:0.4s;
}

.list{
display:block;
transition:1.0s;
height:100%;
}

.list.active{
display:none;
transition:1.0s;

}

.list_top_wrapper{
display:flex;
justify-content:center;
text-align:center;
}

.list_top{
text-align:center;
margin:0;
padding:0;
}

.hide{
color:gray;
cursor:pointer;
}

.index_wrapper ol{

}

.list_wrapper ol li{
text-decoration:none;
margin:5px 0;
}

.list_wrapper ol li a{
color:#00f;
}

.show:after{
content:"[非表示]";
color:gray;
padding-left:5px;

}

.show.active:after{
content:"[表示]";
color:gray;
padding-left:5px;
}


.list_inner{
font-weight:bold;
list-style-type:none;
margin:10px 0;
padding-left:0px;
}

li{
overflow: visible;
list-style-type:disc;
padding-left:0;
}

/*目次 ol 番号付き*/
.list_ol{
list-style-type:decimal;

}

/*目次 ul 黒ポチ付き*/
.list_ul{
list-style-type:disc;


}

/*目次 ul 黒ポチなし*/
.list_none{
list-style-type:none;
margin-left:0;
}

/*記事内作成日更新日ラップ*/
.contents_inner_date_wrapper{
display:flex;
align-items:center;
justify-content: right;/*左右余白あり*/
}


/*記事内作成日*/
.contents_inner_date:before{
font-family: "Font Awesome 5 Free";
content: "\f017";
font-weight:400;
font-size:20px;
padding-right : 5px;
color:gray;
/*background:#fff;*/
}

/*記事内更新日*/
.contents_inner_update:before{
font-family: "Font Awesome 5 Free";
content: "\f021";
font-weight:600;
font-size:18px;
padding-right : 5px;
padding-left:18px;
color:gray;
/*background:#fff;*/

}







/*■■■過去記事装飾■■■*/

.past_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_wrapper:hover{
opacity:0.7;
transition:0.7s;
box-shadow:3px 3px #c0c0c0;
}


.past_img{
width:40%;
}

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

}


/*■■■関連記事■■■*/

.related{
font-size:24px;
margin-top:60px;

}

.related:after{
content:'';
display:block;
background:#000;
width:100%;
height:2px;
margin-top:10px;
margin-bottom:15px;
}


/*■■■グーグルアドセンス設定■■■*/
.google-auto-placed{
width:100% important!;
max-width:100% important!;
}


/*■■■広告各コンテンツページ設定■■■*/
.contents_ad_wrapper{
width:100%;
height:100%;
margin:30px 0px;
display:flex;
justify-content:center;

}

.ad_img{
margin-top:35px;
}

.contents_ad_wrapper_mb{
display:none;
}

.bold{
font-weight:bold;
}

.underline_red{
background:linear-gradient(transparent 70%, #ff4500 0%);
}




/*■■■■プライバシーポリシー■■■■*/
.privacypolicy_wrapper{
max-width:800px;
margin:50px auto 0;
padding:20px 10px;
background:#fff;

}

.privacypolicy_top{
font-family:'Noto Sans JP',Avenir,メイリオ,verdana,sans-serif;
width:100%;
margin:30px 0 0;
}

.privacypolicy_sub{
margin-top:70px;
}

.privacypolicy_sub:after{
content:'';
display:block;
background:#ffc489;
height:5px;
width:100%;
margin:10px 0;
}



/*■■■■footer■■■■*/

.footer{
width:100%;
height:100%;

background:#000;

}

.footer_wrapper{
max-width:1152px;
margin:0 auto;
position:relative;
}

.footer_inner{
height:100%;
margin:0 auto;
padding:30px 0;
color:#fff;

}

.footer ul{
display:flex;
justify-content: center;/*左右余白あり*/
margin:0 auto;
}

.footer li{
list-style-type:none;
margin:6px 10px;
}

.footer li a{
color:#fff;
font-size:16px;
}

.footer li:after{
content:"|";
padding-left:20px;
}

.footer li:last-child:after{
content:"";
}

.footer_logo{
display:block;
margin:10px auto 0;
text-align:center;
}

.footer_logo a{
font-family:'Righteous', cursive;
font-size:30px;
font-weight:400;
color:#fff;
margin:0 auto;

}

.footer_outer{
height:100%;
}

.footer_copyright{
color:#fff;
text-align:center;
margin:0;
}

/*■■■gototop■■■*/
.arrow{
position:fixed;
bottom:30px;
right:40px;
transition:0.3s;
border-radius:50%;
border:none;
background:#dcdcdc;
padding:16px;
}

.arrow_wrapper{
transform:translateY(6px);
}

.arrow a{
display:block;
width:20px;
height:20px;
border-top:2px solid #000;
border-right:2px solid #000;
transform:rotate(-45deg);

}

.arrow:hover{
transform: translateY(-5px);
transition:0.3s;

}


/*■■■■■■■■■■iPad■■■■■■■■■■*/

@media screen and (max-width:768px){
.wrapper_top{
width:95%;
max-width:768px;
display:block;

}

.wrapper{
width:100%;
max-width:768px;
display:block;
margin:0 auto;
padding:0px;
}

.main_top{
width:100%;
margin:10px auto;
padding:10px 0px;
}

.main{
width:95%;
margin:10px auto;
padding:10px 10px;
}


.contents_wrapper{
/*width:95%;
max-width:768px;
margin:20px auto;*/
}

.contents_top_img{
width:100%;
min-width:0px;
height:auto;
/*max-height:300px;
min-height:150px;*/
}

.contents_top_text{
width:100%;
height:auto;
max-height:300px;
display:flex;
align-items:center;
margin:10px 0;
padding:0px;
font-family: 'Noto Sans JP', sans-serif;
font-size:20px;
font-weight:900;
background:#fff;
}





.side{
width:100%;
height:100%;
min-height:100%;
margin:10px auto;
padding:10px 0px;
/*background:#fff;*/
display:block;

}

.side_category_wrapper{
width:90%;
}

.side_about_wrapper{
width:90%;
}




.dropmenu li a{
font-size:16px;
}







}/*media screen and (max-width:768px)*/



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

@media screen and (max-width:480px){
body{
width:100%;
overflow-x:hidden;
min-width:300px;
}

.wrapper{
width:100%;
max-width:480px;
display:block;
height:100%;
}

.main_top{
width:100%;

}

.main{
width:95%;
margin:10px auto;
padding:10px 5px;
}

.side{
width:100%;
max-width:100%;
height:100%;
min-height:100px;

}

.header_inner{
width:100%;
height:50px;
margin:0 auto;
display:flex;
justify-content: flex-start;
align-items:center;
/*padding:0 0 0 5px;*/ /*padding入れると画面ズレ発生*/
}

h1{
padding-left:5px;
}

.blog_title{
padding-left:5px;
}


/*■ドロップメニュー非表示■*/
.dropmenu{
display:none;
}

/*■■■■ハンバーガーメニュー■■■■*/
.drawer{
display:block;
position:fixed;
top:0;
right:0;
width:0%;
height:100%;
background:#fff;
/*background:rgba(0,0,0,0.9);*/
z-index:8;
transition:0.4s;
}

.drawer.active{
display:block;
position:fixed;
top:0;
right:0;
width:100%;
/*max-width:400px;*/
height:100%;
background:#fefefe;
z-index:8;
transition:0.4s;
}


.menu_wrapper{
display:block;
position:fixed;
top:0px;
right:0px;
width:50px;
height:50px;
cursor:pointer;
z-index:9;

}

.menu_line{
position:fixed;
display:block;
background:#fff;
height:1px;
width:30px;
z-index:9;

}

.menu_line{
background:#606060;
height:2px;
}

.menu_line_top{
top:15px;
transition:0.5s;

}

.menu_line_center{
top:25px;
transition:0.5s;
}

.menu_line_bottom{
top:35px;
transition:0.5s;

}

.menu_line_top.active{
top:25px;
transform:rotate(45deg);
transition:0.5s;
}

.menu_line_center.active{
transform:scaleX(0);
transition:0.5s;
}

.menu_line_bottom.active{
top:25px;
transform:rotate(135deg);
transition:0.5s;
}

/*■■■サイト内検索■■■*/
form{
/*padding-left:5%;*/
margin:60px 0 30px;
}

.search_wrapper{
display:flex;
align-items: center;
justify-content: center;
width:80%;
margin:0 auto;
}

.q{
height:24px;
width:100%;
}

.btng_wrapper{
display:flex;
align-items: center;
justify-content: center;
height:30px;
width:30px;
margin-left:5px
/*background:#d3d3d3;*/
/*border:solid 1px #000;*/
}

.btng{
height:24px;
width:24px;
/*background:#d3d3d3;*/
border:none;
font-family:'Righteous', cursive;
}


/*■■■ドロワー内メニュー■■■*/
.menu_item_wrapper{
display:none;
width:100%;
/*max-width:400px;
min-width:200px;*/
padding:0px;
margin-top:50px;
/*background:red;*/
}

/*メニュー＞カテゴリー*/
.menu_item_category_wrapper{
background:#a0a0a0;
padding:5px 0;
margin:0;
}

.fa-list-ul{

}

.menu_item_category{
font-weight:900;
font-size:22px;
padding-left:10px;
margin:0;
color:#fff;

}

.menu_item_wrapper ul{
display:block;
}

.menu_item_wrapper ul li{
margin:20px 0;
list-style-type:none;
display:flex;
}

.menu_item_wrapper ul li a{
font-size:22px;
text-decoration:none;
color:#000;
padding-left:10px;
}

/*カテゴリー前方矢印*/
.menu_item_wrapper ul li:before{
content:"";
display:block;
width:10px;
height:10px;
border-top:3px solid #000;
border-right:3px solid #000;
transform:rotate(45deg) translateY(12px);
}

/*メニューリストアンダーバー
.menu_item_wrapper ul li:after{
content:"";
display:block;
height:1px;
width:80%;
background:#c0c0c0;
margin:15px 0 0 0;
}*/



/*■■■パンくずリスト■■■*/
.breadcrumb_wrapper{
width:100%;
margin:5px auto 5px ;
/*padding入れると横スベリ発生*/
}

.breadcrumb {
display:block;
margin:0 auto;
/*padding:0;*/
list-style: none;
padding-left:5px;
}

.breadcrumb li {
display: inline;
list-style: none;
font-family: 'Noto Sans JP', sans-serif;
font-weight:right;
color:#555;
}

.breadcrumb li:after{
content: '>';
padding: 0 0.2em;
color: #555;

}

.breadcrumb li:last-child:after{
content: '';
}

.breadcrumb li a{
text-decoration: none;
color:#999999;
font-size:16px;

}

/*■■■コンテンツ共通■■■*/
/*トップページ各コンテンツブロック*/
.contents_wrapper{
width:95%;
max-width:768px;
margin:20px auto;
}

/*■コード説明枠*/
.explanation{
width:95%;

}

/*各コンテンツページ外枠*/
.contents_outer{

width:100%;
max-width:500px; /*550px;*/
margin:0 auto;
padding:10px 0px 50px;
background:#fff;

}

/*■各コンテンツトップビュー■*/
.contents_top{
display:flex;
width:95%;
min-width:100px;
max-width:550px;
height:auto;
min-height:150px;
max-height:300px;
box-shadow:2px 2px 4px;
margin:0 auto 30px; /*コンテンツトップビュー下のmargin*/
}

.contents_top_img{
width:100%;
min-width:0px;
height:auto;
max-height:300px;
min-height:150px;
}

.contents_top_text{
width:90%;
height:auto;
max-height:300px;
display:flex;
align-items:center;
margin:0px 0 15px;
padding:5px 10px;
font-family: 'Noto Sans JP', sans-serif;
font-size:20px;
font-weight:900;
background:#fff;
}

/*■コンテンツ本文外枠*/
.contents_inner_wrapper{
display:block;
width:95%;

margin:0 auto;
padding:0;
}

/*目次*/
.index_wrapper{
width:95%;
padding:20px 5px;

}

/*表示切替目次*/
.list_wrapper{
width:90%;

}

/*■■■過去記事装飾■■■*/
.contents_wrapper_past{
border-radius:5px 5px;
border:solid 2px gray;
width:400px;
max-width:95%;
margin:40px auto;
padding:5px;
}

.contents_wrapper_past_anchor{
display:flex;
align-items: center;
/*justify-content:center;*/

}

.contents_wrapper_past_img{
width:40%;

}

.contents_wrapper_past_text{
display:block;
}

.mb_known{
display:none;
}

/*■■■広告各コンテンツページ設定モバイル■■■*/
.contents_ad_wrapper{
display:none;
}

.contents_ad_wrapper_mb{
width:95%;
max-width:500px;
height:100%; /*230px;*/
margin:20px auto;
background:#fff;
display:flex;
justify-content:center;
align-items:center;
}

.ad_img_mb{
width:100%;
max-width:100%;
}


/*■■■■プライバシーポリシー■■■■*/
.privacypolicy_wrapper{
width:100%;
height:100%;
max-width:768px; /*550px;*/
margin:50px auto 0;
padding:0;
background:#fff;
}

.privacypolicy_inner{
padding:10px 10px;

}

.privacypolicy_top{
width:90%;
margin-top:30px;
}

.privacypolicy_sub{
width:100%;
margin-top:70px;
}

.privacypolicy_sub:after{
width:95%;
}


/*■■■■footer■■■■*/

.footer{

}

.footer_inner{

}

.footer ul{
display:block;
padding:20px 0;
text-align:center;
}

.footer li:after{
content:"";
padding-left:0px;
}

.footer_copyright{

}




/*■■■gototop■■■*/
.arrow{
right:20px;
}



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