@charset "UTF-8";


/* コメント部分に関するところのみ。なのでbodyとか、タグについては設定しない。 */


:root {

	--base-color      : rgba(221,255,255,0.7);
	--group-color     : rgba(176,176,255,0.2);
	--group-shadow    : 10px 10px 10px 8px  rgba(214,216,254,1) ;
	--post-color      : rgba(170,255,213,0.5);
	--main-font-color : rgba(2,37,97,1);
	--title-text-bg-color     : rgba(252,249,237,1);

	--good-color      : rgba(255,0,20,1);
	--to-top-bkg      : rgba(176,176,255,1);
	--to-top-fnt      : rgba(252,249,237,1);
	--to-top-hov-fnt  : rgba(176,176,255,1);
	--to-top-hov-bkg  : rgba(255,255,0,1);
	--to-top-hov-sdw  : 0 0 10px 20px rgba(16,176,255,0.7);
	
	}



body {
	}


a {
	}


img {
	max-width : 95%;
}


.blog-base {
	font-size : 100% ;
	font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", sans-serif; 
	line-height : 1.6;
	color : var(--main-font-color);	/* フォントの色 */
	background-color : var(--base-color);  

    display: flex;
    justify-content: center;
    max-width: 850px;
    width : 100%;
    margin: auto auto 40px auto;
    padding: 30px 10px 30px 10px;
    border-radius : 0px 0px 20px 20px ;
	}	
	
	
.blog-main {
	max-width : 850px;
	width : 100%;
	display : flex;
	justify-content : center;
	flex-direction : column ;
	}
	
	
.blog-post-group {
	background-color : var(--group-color);
	margin : 40px 10px 50px 10px;
	padding : 20px;
	border-radius : 10px ;		/* 角丸め */
	box-shadow: var(--group-shadow);
	}



.blog-post {
	margin : 10px auto 10px auto;
	/*margin-left : 10px;*/
	/*margin-bottom : 20px;*/
	padding : 8px 5px 8px 5px;
	background-color : var(--post-color);
	border-radius : 10px ;		/* 角丸め */
	}

.blog-post p{
	margin : 10px 10px 5px 10px;
	padding : 10px;
	border-radius : 10px ;		/* 角丸め */
	}


.blog-post-info  {
	display : flex;
	flex-wrap : wrap;
	font-size : 0.8rem;
	}


/* 画面上部のタイトル */
.blog-title-box {
	display : flex;
	justify-content : center;
	flex-direction: column;
    align-items: center;
	}

.blog-title-box a {
	text-decoration : none;	/* アンカーに下線を引かない */
	text-align  :  center;
	}


.blog-title-box h1{
	font-size : 1.5rem;
	padding : 4px 7px 4px 7px;
	margin : 7px;
	color : var(--main-font-color);
	/*background-color : var(--title-text-bg-color);*/
    font-family: 'Zen Antique Soft' , sans-serif;
	border-radius : 10%;
	}

.blog-title-box p {
	color : var(--main-font-color);
	/*background-color : var(--title-text-bg-color);*/
    font-family: 'Zen Antique Soft' , sans-serif;
	border-radius : 10%;
	}
	

.blog-post-title	{
	background-color : var(--title-text-bg-color);
    border-radius : 10px ;		/* 角丸め */
    margin: 10px auto 5px auto;
    padding: 10px;
	width : 97%;
	height : 50px;
	font-size : 1.25rem;
    }

.blog-post-text	{
	background-color : var(--title-text-bg-color);
    border-radius : 10px ;		/* 角丸め */
    margin: 10px auto 5px auto;
    padding: 10px;
	resize: none;
	width : 97%;
	height : auto;
    }



#post_id {
	background-color : var(--title-text-bg-color);
    border-radius : 10px ;		/* 角丸め */
    margin: 10px 10px 5px 1px;
    padding: 10px;
	height : 40px;
	width  :70px;
	}


.blog-post-info .blog-item-name	 {
	margin-right  : 1px;
	padding-right : 1px;
	text-align : right;
	}

.blog-post-info .blog-post-dtime	{
	background-color : var(--title-text-bg-color);
	margin-left  : 1px;
	padding-left : 10px;
	
	}
	
	

.blog-post .blog-post-info .post-id  {
	width : 60px;
	}
	
	
.blog-post-group .blog-post  {
    width: 95%; 
    background-color:   var(--post-color);
    overflow-wrap: break-word;
	}


.blog-post-info label {						/* 20231012～ */
    font-family: "Arial",sans-serif; 
	display: block; /* ブロックレベル要素化する */
	width: 40px ;/*75px;*/ /* ボックスの横幅を指定する */		/* 20231012～ */
	height: 46px; /* ボックスの高さを指定する */
	padding : 2px 3px 2px 3px;
	text-align: center; /* テキストのセンタリングを指定する */
	line-height: 46px; /* 行の高さを指定する */
	cursor: pointer; /* マウスカーソルの形（リンクカーソル）を指定する */

	box-sizing:content-box;	
	
    color:  var(--main-font-color);

	/* 20231012 */
	font-size : 1.8rem; 
	text-align : right; 
	height : 30px; /* ?だけど 結果ヨシ */
	margin : 4px 1px auto; 
	}





.blog-post-info , .blog-sns-info {
	display : flex;
	}



input[type="checkbox"]  {
	/* 20231012 */
	display : none;
	}
	
input[type="checkbox"]:checked + label {			/* 20231012～ */
	color:  var(--good-color);	
	}


.to-toppage {
    display: block;
    background-color: var(--to-top-bkg);
    color: var(--to-top-fnt);;
    border-radius: 10px;
    width: 200px;
    text-align: center;
    margin-left: 10px;
    text-decoration: none;
    }

.to-toppage:hover {
    background-color: var(--to-top-hov-bkg);
    color: var(--to-top-hov-fnt);
    box-shadow: var(--to-top-hov-sdw);
    
	}


    
footer {
    text-align: center;
    margin: 100px 0 0 0;
    padding: 20px 0;
    box-shadow: 0px 0px 35px 35px rgba(32,190,223,0);
	}


.copy-light {
    font-family: Verdana , “Droid Sans”, sans-serif;
	}




/* モバイル ----------------- */
@media (max-width: 600px ) {

	html {
    	font-size: 90%;
	}



.blog-base {
    padding: 30px 5px 30px 5px;
	}	
	
	
.blog-post-info  p {
	height : 80%;
	}

.base-area {
	padding: 20px 5px 20px 5px;
	}

.blog-post-text {
    padding : 10px 8px 5px 8px ;
	}

.blog-post-group {
    margin: 20px 5px 30px 5px;
    padding : 10px 5px 10px 5px;
	box-shadow : initial;
	}
	
.blog-post {
	margin : auto auto 20px auto ;
	}
	

.blog-post-group .blog-post {
	}


/* 入力/編集画面における記事のタイトル */
.blog-post-title	{
	height : initial;
    }


/* 入力/編集画面におけるpostid */
.blog-postid {

	}

/* 入力/編集画面におけるすいか入力 */
.form-norobot	{
    }


/* 入力/編集画面における小見出し */
.blog-post-info .blog-item-name	 {
	margin-right : 2px;
	margin-left  : 2px;
	padding-right: 2px;
	}

.blog-post-info .blog-post-dtime	{
	margin-right : 2px;
	margin-left  : 2px;
	}
	
	
.blog-post-info .ip-addr		{
	margin-right : 2px;
	margin-left  : 2px;
	}

label {
	width :60px;
	}


/* ↓20240123 */
#post_id {
	width  :50px;
	}

}