/*webフォント読み込み*/
@import url(https://fonts.googleapis.com/earlyaccess/roundedmplus1c.css);

/*リンク関係*/
a {
	transition: color 0.5s ease -0.1s;
  }
  a:link{	
	  color: #693C34; 
  }
  a:visited{
	  color: #B3A57E; 
  } 
  a:hover{
	  color: #B3A57E; 
	  text-decoration: none;
  }

	/* ▼管理・投稿用リンクボタン */
	.headcontrol a {
		display: inline-block;		/* インラインブロック化 */
		text-align: center;			/* センタリング */
		border: 2px solid white;	/* 枠線 */
		border-radius: 0.5em;		/* 枠の角丸 */
		padding: 0.5em;				/* 内側の余白量 */
		margin-bottom: 1px;			/* 外側下の余白量 */;
	background-color:#663333;	/* 背景色 */
		color: white;				/* 文字色 */
		text-decoration: none;		/* 下線を消す */
		white-space: nowrap;		/* 折り返さない */
	}
	/* ▼管理・投稿用リンクボタンにマウスが載った際 */
	.headcontrol a:hover {
		text-decoration: underline;	/* 下線を引く */
		background-color: white;	/* 背景色 */
		color: #663333;				/* 文字色 */
	}

	/*管理用ボタンがあるとmainとmenu間に隙間ができるのを削除（後付け）*/
	.control-links{
		margin-top: 0;
	}

	/* ======================== */
/* ■入力フォームの表示領域 */		/* ※これはQUICKPOST用です。 */
/* ======================== */
.postform {
	background-color:  rgba(255,255,255,0.5);	/* 背景色 */
	margin: 2% 5%;			/* 外側の余白量 */
	padding: 1em;			/* 内側の余白量 */
}
.postform p {
	margin: 0;
}
	/* ------------ */
	/* ▼本文入力欄 */
	/* ------------ */
	textarea.tegalogpost {
		border-radius: 0.67em;		/* 枠の角丸 */
		padding: 0.5em;				/* 内側の余白量 */
		margin-bottom: 0.25em;		/* 外側下の余白量 */
		box-sizing: border-box;		/* サイズ解釈方法 */
		width: 100%;				/* 横幅 */
		height:5em;
		overflow-wrap: break-word;	/* 折り返し方法 */
		overflow: auto;				/* はみ出した場合の処理 */
	}
		/* ▽プレースホルダ(※入力文字数がゼロの際にだけ見える薄文字)の装飾 */
		textarea.tegalogpost:placeholder-shown { color: #777; }			/* 通常時 */
		textarea.tegalogpost:focus:placeholder-shown { color: #bbb; }	/* カーソルが入ったとき */
		textarea.tegalogpost:-ms-input-placeholder { color: #aaa; }		/* for IE */

	/* ▼投稿コントロール部分(ボタンや字数カウンタなど) */
	.line-control {
		margin: 0.25em 0;	/* 外側の余白量 */
	}

	/* ------------ */
	/* ▼投稿ボタン */
	/* ------------ */
	.postbutton {
	}
	/* ▼投稿ボタンにマウスが載ったとき */
	.postbutton:hover {
	}

	/* ====================== */
/* ■メイン(ログ掲載)領域 */
/* ====================== */
.mainarea {
	margin: 0;	/* 外側の余白量 */
	padding: 0 5%;		/* 内側の余白量 */
	}

	/* ------------------------------------------ */
	/* ▼表示対象の限定時などの「限定条件」表示行 */
	/* ------------------------------------------ */
	.situation {
		margin: 0 0 1em 0;	/* 外側の余白量 */
		font-weight: bold;	/* 太字 */
		color: #663333;		/* 文字色 */
	}
	.situation::before {
		content: '★';		/* 先頭に加える記号 */
	}
	.situation:empty { display: none; }	/* 限定表示がない場合は存在自体を消す */

	/* -------------- */
	/* ▼日付境界バー */
	/* -------------- */
	.dateseparator {
		background-color: #663333;	/* 背景色 */
		color: white;			/* 文字色 */
		padding: 1px 1em;		/* 内側の余白量 */
	}

	/* ▼日付境界バーの表示文字列の先頭に付加する記号 */
	.dateseparator::before {
		content: '▼';
	}

	/* ▼日付境界バー内のリンク(ボタン) */
	.dateseparator a {
		display: inline-block;	/* インラインブロック化 */
		margin-left: 1.5em;		/* 外側左の余白量 */
		color: #ffc;			/* 文字色 */
		font-size: 0.7em;		/* 文字サイズ */
		border: 1px solid #ffc;	/* 枠線 */
		border-radius: 1em;		/* 枠の角丸 */
		padding: 0px 1em;		/* 内側の余白量 */
		vertical-align:middle;	/* 上下の中心寄せ */
	}
	.dateseparator:visited{
		color: white; 
	} 

	/* ================================== */
/* ■投稿ボックス（一発言）ごとの表示 */
/* ================================== */
/* ※この領域は、内側スキンで生成しているHTMLに対する装飾です。 */
.onelogbox {
	margin: 15px 0;				/* 外側の余白量 */
	/*
	padding: 3% 0;				
	border-bottom: 1px #663333 dashed;	
	*/
}

.onelogside {
	/*
	display: table-cell;	/* 投稿情報と投稿本文とで2段組 */
	*/
	vertical-align: top;	/* 上に寄せる */
	text-align: center;		/* センタリング */
	width: 65px;			/* 横幅 */
	min-width: 60px;		/* 最低横幅 */
}

.onelogbody {
	display: table-cell;	/* 投稿情報と投稿本文とで2段組 */
	background-color:  rgba(255,255,255,0.8);	/* 背景色 */
	vertical-align: top;	/* 上に寄せる */
	padding: 3%;
	width:90%;
	border: 1px solid #663333;	
	border-radius: 8px;
}

	/* -------------------- */
	/* ▼ユーザアイコン表示 */
	/* -------------------- */
	.usericon {
	display: none;
	width:50px;
	height:50px;
	border-radius: 7px;
	margin:5px;
	}

	/* ------------------------ */
	/* ▼ユーザ名(投稿者名)表示 */
	/* ------------------------ */
	.username {
		display: none;	/* インラインブロック化 */
		font-size: 1em;
	}

	.newsign{
		color: #663333;			/* 文字色 */
		padding: 1px 1em;		/* 内側の余白量 */
	}

	/* ---------------- */
	/* ▼セパレータ記号 */
	/* ---------------- */
	.separator {
	}

	/* ---------- */
	/* ▼投稿本文 */
	/* ---------- */
	.comment {
		line-height: 1.3;	/* 行の高さ */
		
	}

		/* ▼本文内に含まれる改行を無効化したい場合は、このコメントアウトを取り除いて下さい。 */
		.comment br {
			/* display: none; */
		}

		/* ‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥ */
		/* ▼本文内に含まれるハッシュタグリンク */
		/* ‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥ */
		.comment .taglink {
			display: inline-block;	/* インラインブロック化 */
			margin: 0 3px;			/* 外側の余白量 */
			text-decoration: none;	/* 下線を消す */
			word-break:break-all;	/* 自動リンクのはみ出しを防ぐ */
		}
		/* ▼ハッシュタグリンクにマウスが載ったとき */
		.comment .taglink:hover {
			color: blue;					/* 文字色 */
			border-color: white;			/* 枠線の色 */
			text-decoration: underline;		/* 下線を引く */
		}

		/* ‥‥‥‥‥‥‥‥‥‥‥‥‥‥ */
		/* ▼続きを読むリンク（ボタン） */		/* ※注：「続きを読む」機能は、JavaScriptが無効な閲覧環境では機能せず、その場合はボタンも表示されません。 */
		/* ‥‥‥‥‥‥‥‥‥‥‥‥‥‥ */
		/* ▽ボタン枠の装飾(共通) */
		.readmorebutton {
			display: inline-block;	/* インラインブロック化 */
			padding: 1px 0.5em;		/* 内側の余白 */
			margin: 0 1px;			/* 外側の余白 */
			border: 1px solid #bbb;	/* 枠線の装飾 */
			border-radius: 0.5em;	/* 枠線の角丸 */
		}
		/* ▽ボタン表面の装飾(共通) */
		.readmorebutton:link,
		.readmorebutton:visited {
			background-color: #eee;	/* 背景色(グラデーション非対応の環境のみ) */
			background-image: linear-gradient( 0deg, #ccc, #ddd 55%, white );	/* 背景グラデーション */
			color: darkblue;		/* 文字色 */
			text-decoration: none;	/* リンク装飾を消す */
		}
		/* ▽ボタンにマウスが載った際の装飾(共通) */
		.readmorebutton:hover {
			background-image: none;		/* グラデーションなし */
			background-color: #00cccc;	/* 背景色 */
			color: white;				/* 文字色 */
			text-decoration: underline;	/* 下線を加える */
		}

		/* ▽開く（続きを読む）ボタン専用の装飾 */
		.readmorebutton.readmoreopen {
			font-size: 0.95em;		/* 文字サイズ */
		}

		/* ▽閉じる（畳む）ボタン専用の装飾 */
		.readmorebutton.readmoreclose {
			font-size: 0.75em;		/* 文字サイズ */
		}

	/* -------------- */
	/* ▼投稿日時表示 */
	/* -------------- */
	.postdate {
		font-size: 0.7em;	/* 文字サイズ */
	}
	/* ▼投稿日時のリンク */
	.postdate a {
		display: inline-block;	/* インラインブロック化 */
		margin:0 0 0 auto;
		color: white;			/* 文字色 */
		text-decoration: none;	/* 下線を消す */
		background-color: #663333;	/* 背景色 */
		border-radius: 0.5em;	/* 枠の角丸 */
		padding: 0 0.5em;		/* 内側の余白量 */
	}
	.categories a{
		display: inline-block;	/* インラインブロック化 */
		margin:0 0 0 auto;
		color: white;			/* 文字色 */
		text-decoration: none;	/* 下線を消す */
		background-color: #663333;	/* 背景色 */
		border-radius: 0.5em;	/* 枠の角丸 */
		padding: 0 0.5em;		/* 内側の余白量 */
		font-size: 0.7em;
	}
	/* ------------ */
	/* ▼編集ボタン */
	/* ------------ */
	.editlink {
		font-size: 0.67em;	/* 文字サイズ */
	}

	/* ▼編集ボタンのリンク */
	.editlink a {
		display: inline-block;	/* インラインブロック化 */
		color: #00c;			/* 文字色 */
		text-decoration: none;	/* 下線を消す */
		background-color: #dfd;	/* 背景色 */
		border-radius: 0.5em;	/* 枠の角丸 */
		padding: 0 0.5em;		/* 内側の余白量 */
	}
	/* ▼編集ボタンリンクにマウスが載ったとき */
	.editlink a:hover {
		color: white;			/* 文字色 */
		background-color: #08f;	/* 背景色 */
	}



	/* ▼文字装飾ボタン群 */
	/* 掲載領域全体 */ .decoBtns { display: inline-block; margin-top: 0.5em; }
	/* 全ボタン装飾 */ .decoBtns input { min-width: 32px; min-height: 28px; margin:1px; background-color:#eee; border: 1px solid #aaa; cursor: pointer; border-radius: 3px; font-size: 14px; vertical-align: middle; }
	/* マウス載る際 */ .decoBtns input:hover { background-color:#e5f1fb; border-color: #0078d7; }
	/* 太字  :B */ .decoBtnB { font-weight: bold; }
	/* 取消線:D */ .decoBtnD { text-decoration: line-through; text-decoration-color: red; text-decoration-style: double; }
	/* 強調  :E */ .decoBtnE { font-weight: bold; color: blue; }
	/* 斜体  :I */ .decoBtnI { font-style: italic; }
	/* 引用  :Q */ .decoBtnQ {  }
	/* 小さめ:S */ .decoBtnS {  }
	/* 極小  :T */ .decoBtnT { font-size: 11px !important; }
	/* 下線  :U */ .decoBtnU { text-decoration: underline; text-decoration-color: red; }
	/* 文字色:C */ .decoBtnC { color: red; }
	/* 背景色:M */ .decoBtnM { color: blue; }



@media (max-width: 400px) {
	video {
	  width: 100%;
	  height: auto;
	}
}

html {	
	height: 100%;
	margin: 0;
}

body{
	margin:0;
	font-family:"Rounded M+ 1c","ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
	overflow:auto;
	background-image:url(../../img/bg.gif);
}

/*全体*/
#wraper{;
}

/*メイン部分*/
#main{	
	background-color: rgba(255,255,255,0.7);
	padding:5% 5%
}

#main-blog{	
	background-color: rgba(255,255,255,0.8);
}

/* メニュー部分 */
header{
	padding:0 2%;
}

#menu {
	width:90%;
	margin:auto;
	display:flex;
	justify-content:space-between;
}
#menu>:first-child{
}

#square_btn {
	position: relative;
	display: inline-block;
	font-weight: bold;
	padding: 0.25em 0.3em;
	margin:3% 0%;
	border-radius:5px;
	text-decoration: none;
	transition: .4s;
	}

#square_btn:hover {
	background: #663333;
	color: white;
}

/*日記部分*/
article{
	border-top:1px solid;
	border-bottom:1px solid;
	margin:10% 0;
	padding:5% 5%
}

/*サイドメニュー*/
.sidemenu{
	display:none;
}

/* フッター*/
footer{
	padding:1% 0;
	color:white;
	background-color: #663333;
}
	footer a:link{
		color:white;
	}
	footer a:visited{
	color: #B3A57E; 
	}
	footer a:hover{
	color: #B3A57E; 
	text-decoration: none;
}

/* フッターメニュー */
#footermenu {
	display:flex;
	width:50%;
	justify-content:space-between;
	margin:0 auto;
	}

/* コピーライト */
#copyright {
	width:90%;
	margin:0 auto;
	text-align: center;
	}


/*小説用*/
.novel {
	position: relative;
	background-image:
	linear-gradient(rgba(203,194,185,0.4) .1em, transparent .1em);
	background-size: 100% 1.5em;
	line-height:1.5em;
}

.mobile_none{
	display:none;
}

/*画像関係*/
img{	
	max-width: 40%;
	height: auto;
}

.log{
	width:90px;
	height:90px;
	object-fit:cover;
	padding-bottom:5px;
}

.center{	
	text-align:center;
}

.picture{	
	max-width:100%;
	margin-top:5%;
}

.icon{	
	margin:0px 1px 5px 1px;
	width:40px;
	height:40px;
}

hr{
	margin:0;
}


/*テーブル設定*/
table , td, th {
	border: 1px solid #663333;
	border-collapse: collapse;
}
td, th {
	padding: 3px;
	width: 320px;	
	background: #fff;
}
th {
	background: #f0e6cc;
}
.even {
	background: #fbf8f0;
}
.odd {
	background: #fefcf9;
}

/*その他装飾*/
#maintitle{
	text-align:center;
	color:#444;
	position:static;
	display:block;
	font-size:30px;
	line-height:55px;
	letter-spacing:-4px;
	text-decoration: none;
}

.description{
display:block;
font-size:18px;
line-height:10px;
letter-spacing:1px;
}

p{
}

.mark{
	font-size:150%;
	background: linear-gradient(transparent 70%, #ffff66 60%);/*マーカーの色*/
}

.space{
	padding:2% 0%;
}
/*リスト関係*/
ul{	
	list-style: none;
	padding:0;
}

li{	

}

/*メニューボタン*/
#menubtn {
	display:inline-block;
	cursor: pointer;
	background: rgba(255,255,255,0.5);
	text-decoration: none;
	width: 100px;
	margin: 0 auto;
	padding: 10px 0;
	text-align: center;
	border: 1px solid #265A4A;
}

/*上にスクロールするボタン*/
#page-top {
	position: fixed;
	bottom: 0%;
	right: 10%;
	font-size: 77%;
	z-index:2;	
}
#page-top a {
    background: rgba(102,51,51,0.6);
    text-decoration: none;
    color: #fff;
    width: 60px;
    padding: 30px 0;
    text-align: center;
    display: block;
    border-radius: 42px;
}
#page-top a::before{
	content: "";
	position: absolute;
	top: 40%;
	left: 33%;	
	width: 15px;
	height: 15px;
	border-top: 5px solid #fff;
	border-right: 5px solid #fff;
	transform: rotate(-45deg);	
}

#page-top a:active {
    text-decoration: none;
    background: rgba(102,51,51,0.3);
}

/*見出し*/

h1 {
	position: relative;
	padding-bottom: .3em;
}
h1::before,
h1::after {
	position: absolute;
	bottom: -4px;
	left: 0;
	content: '';
	height: 4px;
}
h1::before {
	z-index: 2;
	width: 15%;
	background-color: #444;
}
h1::after {
	width: 100%;
	background: -webkit-repeating-linear-gradient(45deg, #fff, #fff 2px, #aaa 2px, #aaa 4px);
	background: repeating-linear-gradient(45deg, #fff, #fff 2px, #aaa 2px, #aaa 4px);
}

.head_test {
    margin:  0;                 /* デフォルトCSS打ち消し */
    font-size:  24px;           /* 文字サイズ指定 */
    position:  relative;        /* 位置調整 */
    font-weight:  normal;       /* 文字の太さ調整 */
    margin-bottom: 15px;        /* 周りの余白指定 */
    border-radius:  2px;        /* 角丸指定 */
}

.head_test-point {
    background-color: #2196F3;  /* 背景色指定 */
    border-radius:  50%;        /* 丸くする */
    padding:  10px;             /* 余白指定 */
    font-size: 40px;            /* 文字サイズ指定 */
    color: #fff;                /* 文字色指定 */
    margin-right: 5px;          /* 周りの余白指定 */
}

h2{
}
h2:first-letter{
	font-size: 1.5em;
	color: #7172ac;
}

/*日記のタイトル表示*/
.dtitle{
	padding-left:60px;
	padding-top:10px;
}

/*日記の日付*/
.day{
	font-family: 'Vidaloka', serif;
	position:absolute;
	border:solid 1px #663333;
	margin-top:15px;
	padding-top:3px;
	width:45px;
	height:60px;
	line-height:16px;
	display: inline-block;
	text-align: center;
}

.month{
	font-size:14pt;
}
.date{
	margin-top:2px;
	font-size:18pt;
}
.year{
	font-size:8pt;
}


/**/
h3 {	
	border-left: 8px solid #663333;
	border-bottom:dotted 3px #663333;
	width:100%;
	padding:0 0 0 1%;
	margin:0;
	line-height:180%;
	font-weight: 400;
	font-size:20px;
	color:#663333;
}
h4 {	
	line-height:200%;
	font-weight:400;
	font-size:18px;
	border-bottom:double 2px #663333; 
	color:#663333;
}

.diary{
	background: url(img/i_diary.gif) no-repeat left center;
	padding-left: 35px;		
}

.wing{
	background: url(img/i_link.gif) no-repeat left center;
	padding-left: 35px;		
}

.leaf {	
	background: url(img/i02.gif) no-repeat left center;
	padding-left: 35px;		
	line-height:200%;
	font-weight:400;
	font-size:18px;
	border-bottom:double 2px #663333; 
	color:#663333;
}

/*フォーム周り*/
textarea{	
	border: 1px #663333 solid; 
	font-size:16px;;
	}

input[type="text"] {
	background-color: #ffffff;
	border: 1px #663333 solid; 	
	}

input[type="submit"] {
	-webkit-appearance: none;
	font-size:16px;
	margin:auto;
	width:100%;
	height:60px;
	position: relative;
	background-color:#deb887;
	border-radius: 10px;
	border: solid 1px #ccba8f;
	color: #fff;
	line-height: 52px;
	-webkit-transition: none;
	transition: none;
	box-shadow: 0 3px 0 rgb(190, 154, 105);
	text-shadow: 0 1px 1px rgba(0, 0, 0, .4);
}
input[type="submit"]:hover {
	top: -4px;
	box-shadow: 0 7px 0 rgb(190, 154, 105);
}
input[type="submit"]:active {
	top: 3px;
	box-shadow: none;
}

/**/
/* overlay at start */
.mfp-fade.mfp-bg {
  opacity: 0;

  -webkit-transition: all 0.15s ease-out;
  -moz-transition: all 0.15s ease-out;
  transition: all 0.15s ease-out;
}
/* overlay animate in */
.mfp-fade.mfp-bg.mfp-ready {
  opacity: 0.8;
}
/* overlay animate out */
.mfp-fade.mfp-bg.mfp-removing {
  opacity: 0;
}

/* content at start */
.mfp-fade.mfp-wrap .mfp-content {
  opacity: 0;

  -webkit-transition: all 0.15s ease-out;
  -moz-transition: all 0.15s ease-out;
  transition: all 0.15s ease-out;
}
/* content animate it */
.mfp-fade.mfp-wrap.mfp-ready .mfp-content {
  opacity: 1;
}
/* content animate out */
.mfp-fade.mfp-wrap.mfp-removing .mfp-content {
  opacity: 0;
}


/*==================================
 画面の横幅が479~769px(タブレット用) 
/*----------------------------------------------------------*/
@media screen and (min-width:479px) and (max-width:768px) {

/*全体*/
#wraper{
	margin:auto;
	padding:0 5%;
	background-color: rgba(255,255,255,0);	
	}

/* メニュー部分 */
#menu {
	display:flex;
	justify-content:flex-end;
	margin-left:50%;
	align-items: center;
	margin:auto;
	padding:3% 4% 0% 4%;
}
#menu>:first-child{
	/*margin-right:auto;*/
}

/*メニューボタン*/
#menubtn {
}

/*サイドメニュー*/
.sidemenu{
	display:none;
}

article{
	padding:0%
}

/*offline*/
/*サンプル用分割*/
.s-half{
	margin-top:5%;
	display:flex;
	justify-content: space-around;
}
#book{
	max-width:300px;
}

.info{
	width:46%;
}

/*更新履歴用アイフレーム*/
iframe{	
	width:80%;
	height:100px;
	background-color:rgba(255,255,255,0.9);
}

/*サイトタイトル*/
.maintitle{
	position:absolute;
	text-align:right;
	top:10px;
	left:15%;
}

/*フォーム周り*/
textarea{
	font-size:16px;	
}
input[type="text"] {
	font-size:14px;
}
input[type="submit"] {
	font-size:14px;
	width:100px;
	height:60px;
	position: relative;
	background-color:#deb887;
	border-radius: 4px;
	border: solid 1px #ccba8f;
	color: #fff;
	line-height: 52px;
	-webkit-transition: none;
	transition: none;
	box-shadow: 0 3px 0 rgb(190, 154, 105);
	text-shadow: 0 1px 1px rgba(0, 0, 0, .4);
}
input[type="submit"]:hover {
	top: -4px;
	box-shadow: 0 7px 0 rgb(190, 154, 105);
}
input[type="submit"]:active {
	top: 3px;
	box-shadow: none;
}

}
/*==================================
画面の横幅が768px以上（PC用）
================================*/
@media screen and (min-width: 769px){

/*全体*/
#wraper{
	margin:auto;
	height:100%;
	width:80%;
	border-right:1px #663333 solid;
	border-left:1px #663333 solid;
}

.mainarea {
	margin: 0;	/* 外側の余白量 */
	padding: 0 20%;		/* 内側の余白量 */
	}

header{
	background-color: rgba(255,255,255,0.7);
}

/* メニュー部分 */
#menu {
	display:flex;
	justify-content:flex-end;
	margin-right:auto;
	align-items: center;
	margin:auto;
	padding:2% 4% 1% 4%;
}

/*メニューボタン*/
#menubtn {
	display:none;
}

/*サイトタイトル*/
#maintitle{
	position:absolute;
	text-align:right;
	top:10px;
	left:15%;
}

/*二分割*/
.half{
	display:flex;
	width:86%;
	flex-direction:row-reverse;
}

.sidemenu{
	display:block;
	border-left:1px dotted;
	padding-left:3%;
	width:200px;
}

video {
    max-width: 500px;
    height: auto;
  }

}