*, *:before, *:after {
box-sizing: border-box;
}

body {
	font-family: "メイリオ",Meiryo,"Hiragino Kaku Gothic ProN","Hiragino Sans",sans-serif;
	margin: 0px;
	padding: 0;
	font-size:14px;
	letter-spacing: 0.3px;
	/* background-color: var(--bg-haikei);	■■全体の背景色 */
	/* color: var(--jino-iro);#474747□同色00□ */
}

ul,li{	list-style-type: none;		/* リスト先頭記号の省略 */
margin: 0;
padding: 0;}





#wrapper {
	/*width: 1000px; こいつ */
	max-width:100%;
	margin: 0 auto;
	    display: flex;
    flex-direction: column;
}

#mainarea {
    display: flex;/* !!! */
    flex-wrap: wrap;/* こいつ */
    padding-top: 10px;
	padding-bottom: 50px;
	max-width: 720px;/* 表示エリア */
    margin: 0 auto;
    padding: 0;
}

header {
	display: table;				/* 段組にする */
	width: 100%;				/* 横幅いっぱい */
	box-sizing: border-box;
	margin: 0;				/* 外側の余白 */
	padding: 0;				/* 内側の余白 */
}

#top {
	background-color: var(--mukasi-ao);
    border-bottom: 5px solid var(--link-hover-mae);
	width: 100%;
	height: 60px;
	padding: 0.5em 1.5em;
}

@media (max-width: 950px) {/* 950以下 */
	#top {
	background-color: var(--mukasi-ao);
    border-bottom: 4px solid var(--link-hover-mae);
	width: 100%;
	height: 50px;
	padding: 0.5em 0.5em;
	}
}

/* タイトルとメニューの入ってる箱 */
#hditem{ display: flex;
    justify-content: space-between;
    align-items: center;
    margin-right: auto;
    margin-left: auto;
    max-width: 950px;}



	/* ===============画面の幅が800px以下に対応。効果無しならonelogboxを調整-=============== */
@media all and (max-width: 800px) {
		#wrapper {
		border-collapse: separate;
		border-spacing: 0;
		margin: 0 auto;
		padding: 0;
		font-size: 15px;	/* 文字サイズ */
		/*width: 100%;*/
	}
	
	#wrapper #mainarea {
		margin: 0 auto;	/* サイドバー(サブ側)を右側に変更した場合は、この値を「1em 0 0 1em」などに変更する方がバランスが良くなります。たぶん。 */
	}
}
/* =====800px以下ここまで==== */




/* ============== */
/* カスタム用色変更 */
/* ============== */
:root{
	--bg-haikei: #eeeff2; /* 全体の背景色□同背景0□ */
	--haikei-waku: #fefefe;	/* 白・中部分枠背景色 □同背景1□ */
	--post-pg-iro: #f6f6f6; /* 投稿枠背景□同背景3□ */
	--month-date: #e0e0e0; /* ■■投稿日付eeeより濃い 投稿枠内小文字色 */
	--jino-iro: #555555; /* 濃いアクセント色□同色00□ */
	--kuro-gray: #aaaaaa;	/* 続きを読む背景色□同色A□ */
	--kuro-usu: #cccccc;	/* 続きを読むから戻る背景色□同色B□ */
	--link-iro: #0088D1; /* 未訪問リンク□#88C3FF同色01□ */
	--link-visit: #999999; /* 既訪問リンク□同色02□ */
	--link-hover: #A0D8FF; /* マウスが載ったとき□同色03□ */
	--link-hover-mae: #FFBB77; /* マウスが載ったとき□同色03□ */
	--pink-momo: #FF5D9B; /* 予備同色04□ */
	--sky-sora: #A0D8FF; /* 予備同色05□ */
	--btnbg-sora:#e5f1fb; /* 保存用・デフォボタンの背景 */
	--waku-btn: #0078d7; /* 保存用・デフォボタンのborder */
	--mukasi-ao: #81BBFD; /* 昔の水色 */
	--test: #0078d7; /* テスト色 */
}
/* ============== */
/* カスタム用色変更 */
/* ============== */

h1 {
        display: flex;
    justify-content: space-between;
    align-items: center;
    margin-right: auto;
    margin-left: auto;
    max-width: 800px;
}

h1#kemedai{display: block;
	margin: 0 auto 0 0;
	font-size: 1.2rem;
    color: var(--haikei-waku);
    font-weight: bold;
text-decoration: none;}

/*  ハンバーガー無 .menubox{box-sizing: border-box;}*/


/* 中心がズレるからいらんかも */
/*  ハンバーガー無 .menuli{display: flex;*/
/*font-size: 0.9em;}*/


/*  ハンバーガー無  .menubox li{
margin: 0 0.2em;}*/

h4 {/* アンダーラインのtitle */
    position: relative;z-index:0;color: var(--jino-iro);text-indent: 1em;
}

h4 a.kousin {
    position: absolute;
    right: 0.5em;
    bottom: 0;
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: none;
    color: var(--jino-iro);
}

h4::after {
		position: absolute; /*positionをabsoluteに指定*/
		content: "";
		background-color: var(--sky-sora); /*下線の色*/
		width: 100%; /*線の長さ■■■*/
		height: 10px; /*線の太さ*/
		bottom: -5px; /*線のタテ位置引く位置*/
		left: 0%;  /*線のヨコ位置？*/
		z-index: -1;
		transform: translateX(0);　/*線のスタート位置_X→方向に(マイナスは←方向)*/
		}


.cornertitle {
		margin: 0;							/* 外側の余白量 */
		font-weight: bold;					/* 太字 */
		color: var(--haikei-waku);						/* 白*/
}



h3 {
position: relative;z-index:0;color: var(--haikei-waku);text-indent: 1em;}

h3 a.kousin {
    position: absolute;
    right: 0.5em;
    bottom: 0;
    font-size: 0.85rem;/* h3参照にしないrem */
    font-weight: 500;
	z-index: 1;
	padding: 0 0.5em 0 0;
}
h3::after {
		position: absolute; /*positionをabsoluteに指定*/
		content: "";
		background-color: var(--sky-sora); /*下線の色*/
		width: 100%; /*線の長さ■■■*/
		height: 35px; /*線の太さ*/
		bottom: -3px; /*線のタテ位置引く位置*/
		left: 0%;  /*線のヨコ位置？*/
		z-index: -9999;
		transform: translateX(0);　/*線のスタート位置_X→方向に(マイナスは←方向)*/
    border-radius: 3px;
	margin-top: 0.5em;
	
}


	/* -------------- */
	/* ▼リンクの装飾 */
	/* -------------- */
	a:link { color: var(--link-iro); }		/* 未訪問リンク□同色01□ */
	a:visited { color: var(--link-iro); }	/* 既訪問リンク□同色02□ */
	a:hover { color: var(--link-hover); }	/* マウスが載ったとき□同色03□ */

	/* ------------------------- */
	/* ▼URLが書かれた場合の装飾 */
	/* ------------------------- */
	.url {
		word-break:break-all;	/* 自動リンクのはみ出しを防ぐ */
	}




/* ============== */
/* 　　重なり順　　　 */
/* ============== */

.top_img{flex-basis: 100%;order: 15;}/* 画像の処理で同タグあります */

.onepost_c{flex-basis: 100%;margin:0 0 20px 0;
order: 11;}/* 21だった */

.free_a{flex-basis: 100%; margin: 0 0 20px 0;
order: 18;}/* 22だった */

.btn_53{flex-basis: 100%; margin: 0 0 20px 0;
order: 20;}



.update{flex-basis: 100%;
order: 25;}

.naidesu{flex-basis: 100%;
order: 28;}


.onepost-poweredby{flex-basis: 100%;
order: 29;font-size:0.8em;text-align: right;margin: 0 5px 0;
color:#0088D1; }

.imagelistarea{flex-basis: 100%;
order: 40;}

.hitokoto-poweredby { flex-basis: 100%;
order: 49; font-size:0.8em;text-align: right;margin: 0 5px 0;
color:#999999; }

.naidesu2{flex-basis: 100%;
order: 50;}



/*ハンバーガーメニュー*/
  #menu {
		/* opacity: 0.7;0に近いほど薄い */
            padding: 10px;
        }

        .menubox {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .menuli {
            list-style: none;
            display: flex;
            gap: 5px;
            margin: 0;
            padding: 0;
        }

        .menuli li a {
            text-decoration: none;
            color: var(--bg-haikei);/*#333;*/
			padding: 5px 5px;
			font-weight: 600;
        }

.menuli li a:hover {
	        text-decoration: underline;
            background-color:var(--bg-haikei); /*#e2e6ea*/
            border-radius: 3px;
        }

        .hamburger {
            display: none;
            flex-direction: column;
            cursor: pointer;
			gap: 4px;
        }

        .hamburger div {/* 三本線 */
		width: 25px;
		height: 3px;
		margin: 0 0 0 0;
            background-color: var(--jino-iro);/*#333;*/
        }

        #menu-toggle {
            display: none;
}

.m_text{margin:-2px 0 0 0;	font-size:0.6em;}

@media (max-width: 950px) {/* 950以下 */
	#menu {
				background-color: var(--post-pg-iro);/*#f8f9fa;*/
				padding: 6px 10px 3px 10px;
				z-index: 9999;
	}
	
            .menuli {
                display: none;
                flex-direction: column;
                background-color: var(--post-pg-iro);/*#f8f9fa;*/
                position: absolute;
                top: 50px;
                right: 10px;
                box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
                border-radius: 3px;
				padding: 20px;
				z-index: 10;/*「title2」「h3::after」あたりとの重なり順*/
				align-items: center;
		gap: 15px;
		font-size:1.2em
		}
		
        .menuli li a {
            text-decoration: underline;
            color: var(--link-iro);/*#333;*/
            padding: 5px 5px;
        }
		.menuli li a:hover {
	        text-decoration: none;
            background-color:var(--bg-haikei); /*#e2e6ea*/
            border-radius: 3px;
        }
		
		
            #menu-toggle:checked + .menubox .menuli {
                display: flex;
            }

            .hamburger {
                display: flex;
            }
        }







/* 画像hoverでうっすら色つく */
/* 重なり順で同タグあり */
.top_img{
    list-style: none;   
    display: flex;
    justify-content:space-around;
    margin: 0;
    padding: 0;
}
.top_img_box{
    background: #000;
}
.top_img img{
    width: 100%;
    height: auto;
    display: block;
    opacity: 1;
    transition: .3s;
}
.top_img:hover img{
	opacity: 0.8;/* 1に近いほど薄い */
}

/* .btn-body{margin:0 0 0 10px;padding:0 0 0 3%; line-height: 1.7em;}ほぞん*/

	
	
	
	

/* span＿ボタンのスタイル */
/* 親コンテナ */
  .btn_53 {
    width: 100%;
  }

  .btn-body {
    display: grid;
    gap: 5px;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
		justify-content: center;
	margin: 0 20px;
  }

  /* ボタンのスタイル */
.decorationF.deco-libtn {
	height: 60px;
    display: flex; /* 高さを揃えるための設定 */
    align-items: center; /* 縦中央揃え */
    justify-content: center; /* 横中央揃え */
    text-align: center;
padding: 10px 0 5px;
    background-color: #ffffff;
    border: 1px solid #ccc;
    border-radius: 3px;
    /*box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);*/
  }

  .decorationF.deco-libtn a {
    text-decoration: none;
    /* color: #333; */
   /*  font-weight: bold;*/
		width: 100%; /* 幅を親要素に合わせる */
		    font-size: 0.65rem;
}

  /* ホバー効果 
  div.btn_53 a:hover {
    background-color: var(--sky-sora);
    transform: scale(1.05);
  }*/

.deco-libtn img{ height: 30px;}

  /* 小さい画面向けのデザイン */
  @media (max-width: 450px) {
    .btn-body {
			grid-template-columns: repeat(3, 1fr);
			margin: 0 10px;
    }
  }

  @media (max-width: 340px) {
    .btn-body {
			grid-template-columns: repeat(3, 1fr);
			margin: 0 5px;
    }
  }
  /* アイコン */
.btn_53 .fa-brands,.btn_53 .fa-solid{
    font-size: 1.7rem;}


/* ======横並びリスト===================================== */	
	/* dl dt ddで項目*/
dl	{width: 95%;
	margin: auto;
	border-bottom:1px solid #ddd;
	}
dt,dd	{
	display:inline-block;
	/*(*display:inline;
	zoom:1;)*/
	margin:0;
	border-top:1px solid #ddd;
	}

/* 定義リスト */
.dl_list {
	margin: 20px;
	overflow: hidden;
	position: relative;
	}
.dl_list dt{
	float: left;
	width: 25%;
	clear: both;
	position: relative;
	padding: 6px 3px 6px 20px;
	}
.dl_list dd{
	float: right;
	width: 75%;
	margin: 0;
	padding: 10px 20px 0px 20px;
	}
	  /* アイコン */
.dl_list .fa-brands,.dl_list .fa-solid,.dl_list .dtimg{
		font-size: 1.2rem; margin:5px;  vertical-align: middle}
		

@media screen and (max-width: 600px) {  /* 600以下 */
  /* dl要素 */
  .dl_list dt,
  .dl_list dd{
    display: block;
    width: 100%;
  }
  .dl_list dt{
    text-align: left;	padding: 6px 3px 0px 0px;
			}
.dl_list dd{
	margin: 0;
	padding: 7px 10px 9px 20px;
			}
			
  .dl_list dt:before, .dl_list dt:after{
    display: none;
  }
 .dl_list:before{
    display: none;
  } /**/
}
	



/* onepost_c中 */
.post1-body{margin: 0 0 0 35px; line-height: 1.53em;}

/* free_a・free_n中 */
.hitokoto-body{margin:0 3px 0 10px;padding:0 0 0 3%; line-height: 1.7em;}


/* .hitokoto-body .combody{margin:0 0 0 10px;padding:0 0 0 30px;}*/
/*.decorationF .deco-ppp{padding:0 0 0 30px;} てがろぐでF:pppを使ってclassつけてなんかしようとしてたけど不要になった */
/* .combody{margin:0 0 0 10px;padding:0 0 0 30px;}いらんかも */



/* 新着リストらへんの設定 */
.comenone{ display: none;}
.combody{display: none;}


	/* -------------------- */
	/* 更新履歴リスト区画 update内*/
	/* -------------------- */
	.latestpostarea {
		margin: 0 0 1em 0;					/* 外側の余白量 */
		padding: 0 0 1em 0;					/* 内側の余白量 */
	}
	/* ▼見出し */
	.latestpostarea .cornertitle {
		margin: 0;							/* 外側の余白量 */
		font-weight: bold;					/* 太字 */
		color: var(--link-visit);						/* 文字色 □同色02□*/
		/* text-shadow: 1px 1px 1px white;		文字の影 */
	}


/* -----update内-------- */
/* ▽新着投稿グリスト */
.latestpostlist {
			margin: 0;			/* 外側の余白量 */
}
ul.latestpostlist {
			margin: 0 20px;
}
.latestpostlist li { /*日付寄せる 
	display: flex;*/
	width: 100%;
	padding: 0 35px 0 0;
	margin:  0;
	list-style-type: none!important;
	/*border-top:1px solid #ddd; */
	display:inline-block;
		}
		
@media only screen and (min-width: 768px){
.latestpostlist li span {
    flex-basis: 7em;
		}}

.latestpostlist li span {/* 日付 */
    flex-basis: 7.2em;
	font-size: 0.9em;
    display: block;/* 	margin: 0 0.5em;*/
			}
			

			
/* 定義リスト */
.latestpostlist {
	overflow: hidden;	position: relative;
			}
/* .dl_list dt */
.latestpostlist li span{
	float: left;
	width: 20%;
	clear: both;
	position: relative;
	padding: 7px 0px 0px 10px;
	text-align: center;
			}
/* .dl_list dd2 */
.postlink{
	float: right;
	width: 80%;
	margin: 0;
	padding: 5px 0px 0 3px;
	}
		
		
@media screen and (max-width: 600px) {  /* 600以下 */
		ul.latestpostlist {
		margin: 0 5px;
		border-bottom:1px solid #ddd;
}
			
/* dl要素 */
.latestpostlist li {
    width: 100%;
    justify-content: flex-start;
    padding: 0 5px;
	margin: 0;
	border-top:1px solid #ddd;
	list-style-type: none !important;}
			
.latestpostlist li span,
.postlink{
    display: block;
    width: 100%;
  }
.latestpostlist li span{
		text-align: left;
		padding: 6px 0px 0px 0px;
			}
.postlink{
	padding: 0 0 0px 5px;}
			
  .latestpostlist li span:before, ..latestpostlist li span:after{
    display: none;
  }
.latestpostlist:before{
    display: none;
  } /**/
}
	
			
			
			
			
			
			
		/* タイトルリンク以外の項目
			.latestpostlist span {
				display: inline-block;
				font-size: 0.9em;
			} */
				.latestpostlist .postdate { color: gray;  }	/*  padding:0;投稿日付 */
				.latestpostlist .posttime { color: gray; }	/* 投稿時刻 */
				.latestpostlist .username { color: #558855; }	/* 投稿者名 */
				.latestpostlist .userid   { color: #555588; }	/* 投稿者ID */
				.latestpostlist .postid   { color: gray; }		/* 投稿番号 */
				.latestpostlist .length   { color: gray; }	/* 本文文字数 */
	
	
		ul li:before {
  /* font-family: "Font Awesome 5 Free";  */
  /*content: "\f138";アイコンの種類*/
  /* position: absolute;  */
  /*left : 1em;左端からのアイコンまでの距離*/
  /*color: skyblue;アイコン色*/
}
	/* -------------------- */
	/* 更新履歴リスト区画ここまで */
	/* -------------------- */

	
	
	
	
iframe {
  width: 400px; /* 親要素の幅と合わせる */
	height: 300px;
border:1px solid #FF9933;
	border-radius: 3px;	/* 保存■■■枠線の角丸 */
	position: relative;
}



.umekomi-frame{	
			border: 3px solid #FF9933;	/* 保存■■■枠線の装飾 */
	border-radius: 3px;	/* 保存■■■枠線の角丸 */
	height: auto;
	    width: 410px;
}



	
	
	
	
	
	/* -------------------- */
	/* ▼画像一覧リスト区画 */
	/* -------------------- */
	/* …………onepic内……… */
	.imagelistarea {
		margin: 0 0 1em 0;					/* 外側の余白量 */
		padding: 0 0 1em 0;					/* 内側の余白量 */
	}
	/* ▼見出し*/
	/*.imagelistarea .cornertitle {*/
		/*margin: 0;							 外側の余白量 */
		/*font-weight: bold;					 */
		/*color: var(--jino-iro);					 文字色 □同色00□*/
		/* text-shadow: 1px 1px 1px white;		文字の影 */
	/*} */

	/* ================================================= */
	/* ▼新着画像リスト内の各画像の装飾 */
	/* ここで画像の縦横サイズを制限しておかないと、原寸で表示されてしまいますので注意して下さい！ */
	/* ================================================= */
		.imagelistarea{    width: 100%;}
	/* …………onepic内……… */
		.imagelistbox {
			display: grid;
			gap: 5px;
			grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
			justify-content: center;
			margin: 0 20px;
		}
		
@media screen and (max-width: 400px) {/* 400以下 */
		.imagelistbox {
			margin: 0 5px;			
			text-align: center;		
			gap: 3px;
			grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
			}
		}
		
		
			/* ▽画像リストの1項目枠 */
	.imagelistitem {
		max-width: 100px;		/* 横幅最大値 */
		max-height: 100px;		/* 高さ最大値 */
		display: inline-block;
		align-items: center; /* 縦中央揃え */
		justify-content: center; /* 横中央揃え */
		text-align: center;
		vertical-align: middle;	/* 枠の下部に余計な空白ができるのを防ぐ */
		overflow: hidden;		/* 画像がぼかされている場合に、ぼかしが枠からはみ出ないようにする */
		background-color: #ffffff;
		border-radius: 3px;
    /*box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);*/
  }

				/* ▽画像リストの1項目内の画像そのもの */
				.imagelistbox .oneimage {
					width: 100%;
					height: auto;			/* 画像の高さは自動調整 */
					aspect-ratio: 1/1;		/* 画像を正方形にする */
					object-fit: cover;		/* 縦横比が合わなければトリミング */
					vertical-align: middle;	/* 画像下部に余計な空白ができるのを防ぐ */
				}

		/* ▼総数・総サイズの情報 */
		.imagesinfo {
			margin: 0.25em 0;		/* 外側の余白量(上下→左右) */
			text-align: right;		/* 右寄せ */
		}
			.totalimgfiles {
				font-size: 0.7em;		/* 文字サイズ */
			}
			.totalimgsizes {
				font-size: 0.6em;		/* 文字サイズ */
			}


	
	


/* ================================================================================= */
/* ================================================================================= */



/* 　--------title_line　下線-------- */
	.deco-title_line {
	position: relative;
    top: 22px;
		margin: 0 0 0 -0.6em;			/* 外側の余白 left詰め */
		padding: 0 0.5em 0 0.6em;				/* 内側の余白 */
	background: linear-gradient(transparent 80%, var(--link-iro) 80%);
	/* transparent開始色の 終了位置%, 終了色の 開始位置%)　数字小さいほど太い */
		font-size: 1.3em;	/* 　文字サイズ(1.3倍) */
		font-weight: bold;
		display: block;		/* ブロック化：※Ver 2.2.0以降必須の記述 */
	}
/* 　--------タイトル用　下線ここまで-------- */


/* 　--------タイトル用2　下線-------- */
.deco-title2 {
	position: relative;
    top: 22px;
		margin: 0 0 0 -0.6em;			/* 外側の余白 left詰め */
		padding: 0 0.5em 0 0.6em;				/* 内側の余白 */
	background: linear-gradient(transparent 75%, var(--sky-sora) 75%);
	/* transparent開始色の 終了位置%, 終了色の 開始位置%)　数字小さいほど太い */
		font-size: 1.3em;	/* 　文字サイズ(1.3倍) */
		font-weight: bold;
		display: block;		/* ブロック化：※Ver 2.2.0以降必須の記述 */
	}
/* 　--------タイトル用　下線ここまで-------- */
		

/* 　--------タイトル用2　題下に空白有り-------- */
.deco-title22 {
	position: relative;
		margin: 0 0 0 -0.6em;			/* 外側の余白 left詰め */
		padding: 0 0.5em 0 0.6em;				/* 内側の余白 */
	background: linear-gradient(transparent 75%, var(--sky-sora) 75%);
	/* transparent開始色の 終了位置%, 終了色の 開始位置%)　数字小さいほど太い */
		font-size: 1.3em;	/* 　文字サイズ(1.3倍) */
		font-weight: bold;
		display: block;		/* ブロック化：※Ver 2.2.0以降必須の記述 */
	}
/* 　--------タイトル用　下線ここまで-------- */
		
		
		
		
			
			
	.deco-title3 {
    background: var(--sky-sora);
    border-radius: 3px;
    padding: 0.2rem 1rem;
    color: var(--haikei-waku);
		font-weight: 400;
	    margin: 0 1px 0 0;
	}
	
	.deco-title3 a:link { color: var(--haikei-waku);    font-weight: 600;text-decoration: none; }		/* 未訪問リンク□同色01□ */
	.deco-title3 a:visited { color: var(--haikei-waku);font-weight: 600;text-decoration: none; }	/* 既訪問リンク□同色02□ */
	.deco-title3 a:hover { color: var(--link-iro); }	/* マウスが載ったとき□同色03□ */
	
	
	
	.deco-libtn1 {
    background: var(--pink-momo);
    border-radius: 3px;
    padding: 0.2rem 1rem;
    color: var(--haikei-waku);
		font-weight: 400;
	    margin: 0 1px 0 0;
	}
	
	.deco-libtn1 a:link { color: var(--haikei-waku);    font-weight: 600;text-decoration: none; }		/* 未訪問リンク□同色01□ */
	.deco-libtn1 a:visited { color: var(--haikei-waku);font-weight: 600;text-decoration: none; }	/* 既訪問リンク□同色02□ */
	.deco-libtn1 a:hover { color: var(--link-iro); }	/* マウスが載ったとき□同色03□ */
	
	
	
/* 　--------タイトル用　下線ここまで-------- */

/* 　丸で囲む */
.deco-maru {
    display: inline-block;
    border: 1px solid var(--jino-iro);
    border-radius: 3em;
    margin-top: 0.5em;
    padding: 0 0.5em;
    font-size: 0.8em;
}

/* 　丸で囲む */
.deco-maru2 {
	display: inline-block;
	line-height: 1.2em;
    border: 1px solid var(--jino-iro);
    border-radius: 1.5em;
    margin-top: 1.5em;
    padding: 0.2em 1em;
    font-size: 0.8em;
}

/* 　お知らせの画像調整 */
	.deco-yose1 {
    display: grid;
    width: 100%;
	grid-template-columns: 80px 1fr;
	margin: 5px 0 0;
}

	.deco-yose2 {
display: flex;
    flex-direction: column;
}
/* 　お知らせの画像調整2 */
.deco-float {
  float: left;
  margin: 5px 15px 15px 0;
  width: auto;
}

/* ================================================================================= */
	/* ================================================================================= */
	
	
	

/* ============ */
/* ■フッタ領域 */
/* ============ */

footer p.poweredby {
  margin: 20px 0 ;
  font-size: 80%;
  text-align: center;
  color: #a5a5a5;
  font-family: "メイリオ", Meiryo, "ヒラギノ丸ゴ ProN", "Hiragino Maru Gothic ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", sans-serif;
  line-height: 1.6em;
}

	/* アイコンフォントのサイズ指定 */
	footer .material-icons-round.md20{ font-size: 20px; vertical-align: middle; float: right;}
.material-icons-round.md16{ font-size: 16px; vertical-align: middle; }
.material-icons-round.md20{ font-size: 20px; vertical-align: middle; }
.material-icons-round.md24{ font-size: 24px; vertical-align: middle; }
	
.kanri{
  padding: 0 3px;}
	
	
	
/* スクロールバーの幅の設定SafariとChromeのみ */
html::-webkit-scrollbar {
width: 15px;
height: 10px;
}

/* スクロールの背景の設定 */
html::-webkit-scrollbar-track {
		border-radius: 5px;
		background: var(--haikei-waku);
/*box-shadow: 0 0 2px #fff inset; スクロールの背景の設定 */
}

/* スクロールのつまみ部分の設定 */
html::-webkit-scrollbar-thumb {
border-radius: 8px;
background: var(--link-visit);
	}
	
/*    上に戻るボタン*/
	.ue_btn, .sita_btn {
	position: fixed;
	z-index: 5000;
	bottom: 3vmin;
	right: 3vmin;
	border-radius: 5%;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 40px;
	height: 40px;
	background: var(--jino-iro);
	text-decoration: none;
	text-align: center;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
	transition: background-color 0.3s ease;
} 	

  .ue_btn:hover, .sita_btn:hover{ background-color: var(--kuro-gray);}
  
  .ue_btn .material-icons-round.md24 {
	color: var(--haikei-waku);
	font-size: 30px;
  }

  .sita_btn .material-icons-round.md24 {
	color: var(--haikei-waku);
	font-size: 30px;
  }

.ue_btn {
  bottom: 65px; /* 上に戻るボタンの位置 */
}

.sita_btn {
  bottom: 20px; /* 下に移動するボタンの位置 */
}