@charset "utf-8";
/* CSS Document */

/* #################################################################
	ブログの内容（トップに戻るタイトル）
##################################################################*/

.maintitle-page{
	background:#eae0ce;
	padding:15px;
	font-weight:bold;
	margin-bottom:5%;
	text-align:center;
}

.maintitle-page img{
	max-width:300px;
	width:50%;
}

/* #################################################################
	ブログの内容（プレビュー画像まで）
##################################################################*/

.postcategorylist li{
	display:inline-block;	/*テキストをピタピタの枠にした*/
	font-size:12px;
	margin-right:5px;	/*右に隙間*/
	display:inline-block;	/*文字を基準に箱を作るので隙間を作れる*/
	margin-bottom:3%;
	border:solid 1px #eae0ce;	/*線の種類、太さ、色*/
	background-color:#fff;
	border-radius:8px;	/*丸角*/
	padding:8px 8px ;	/*縦幅、横幅*/
}

.postcategorylist a{
	color:#666;	/*リンクの色*/
}

.post h1{
	padding-bottom:3%;	/*文字の外の余白（上記参照）*/
	font-size:24px;	/*文字のサイズ*/
	margin-bottom:1%	/*文字の下に余白*/
}

.post h1:after {	/*タイトル下の下線*/
	content: "";
	width: 100%;
	height: 5px;
	background: -webkit-repeating-linear-gradient(135deg, #f7f2e9, #f7f2e9 3px, #ebc200 3px, #ebc200 6px);
	background: repeating-linear-gradient(135deg, #f7f2e9, #f7f2e9 3px, #ebc200 3px, #ebc200 6px);
	display:block;
	margin-top:2%;
}

.postdata{	/*日時を右寄せ*/
	margin-bottom:3%;
	text-align:right;
}

.postdata span{	/*日時を基準値にして*/
	position:relative;	/*「更新ボタン」の位置を決めるための親を指示するタグ*/
	padding-left:18px;
}

.postdata span:before{	/*何か前につけたい時*/
	background-image:url(../img/koushin.png);
	background-size:contain;
	content:"";
	position:absolute;	/**/
	top:50%;	/*文字に対して必ず真ん中にくるようにする(半分から下に更新ボタンがくる)*/
	left:0;	/*左に必ずつく*/
	width:12px;
	height:12px;
	margin-top:-6px;
}

.postimg{
	margin-bottom:8%;
}



/* #################################################################
	ブログの内容（見出し）
##################################################################*/

.postmidashi{
	background: #eae0ce;
	font-size: 22px;
	padding: 12px 3%;
	margin-bottom: 4%;
	line-height: 1.4;
	color: #666;
}

/* #################################################################
	ブログの内容（リスト）
##################################################################*/

.post2list{
	margin-bottom:10%;	/*次のコンテンツと近いので入れただけ*/
list-style: none;
padding:0;

}

.post2list > li{
	margin-bottom:3%;
}

.post2list li:last-child{
	border-bottom:0;
} 
 
.post2list a{
	background-color:#fff;
	padding:3%;
	display:flex;
	position:relative;
text-decoration:none;
color:#666;
}

.post2list a:after{
	content:"";
	position:absolute;
	width:10px;
	height:10px;
	top:50%;
	margin-top:-5px;
	right:3%;
	border-right: 2px solid #ebc200;
	border-top: 2px solid #ebc200;
	transform: rotate(45deg);
}

.post2list .img{
	width:30%;	/*30％に表示して*/
}

.post2list .img img{
	width: 100%;
	/*height: 5.5vw;	ブラウザの幅を変えても横幅に合わせて高さを調整してくれる*/
	/*object-fit: cover;	画像を枠いっぱいに表示して欲しい時はつける*/
	/*font-family: ‘object-fit: cover;’;	インターネットエクスプローラー用のタグ、上野とセットでつける*/
}

.post2list .post2{	/*全体*/
	width:60%;
	margin-left:5%;
}

.postdoramatitle{	/*ブログのタイトル*/
	font-size:16px;
	margin-bottom:15px;
}

.bangumi{
list-style: none;
padding:0;
}

.bangumi li{
	position:relative;	/*親の位置*/
	padding-left:25px;
	border-bottom:1px solid #eae0ce;
	padding:3% 0 3% 25px;

}

.bangumi li:before{
	background-image:url(../img/tokei.png);
	background-size:contain;
	content:"";
	position:absolute;	/**/
	top:50%;	/*文字に対して必ず真ん中にくるようにする(半分から下に更新ボタンがくる)*/
	left:0;	/*左に必ずつく*/
	width:20px;
	height:20px;
	margin-top:-10px;
}

.bangumi li.icon2:before{
	background-image:url(../img/start.png);
}

.bangumi li.icon3:before{
	background-image:url(../img/hito.png);
}

.post2list dl{	/*箱の指定*/
	position:relative;	/*親の位置*/
}

.post2list dt{	/*項目の指示*/
	position:absolute;	/*親を基準に自由配置*/
}

.post2list dd{	/*内容の指示*/
	padding-left:80px;
	margin-bottom:2%;
	padding-bottom:2%;
	border-bottom:1px solid #eae0ce;
}

.post2list dd:last-child{	/*1番最後のボーダー不要*/
	border-bottom:0;
	margin-bottom:0%;
	padding-bottom:0%;
}

/* #################################################################
	注記
##################################################################*/

.postpoint{
	position: relative;
	line-height:1.7;	/*行間*/
	padding:3%;	/*内側の隙間*/
	border: solid 3px #ebc200;	/*囲み線の色*/
	border-radius: 8px;	/*囲み線の太さ*/
	margin-bottom:10%;	/*次のコンテンツと近いので入れただけ*/
}
.postpoint .box-title{	/*タイトルの指示*/
	position: absolute;
	display: inline-block;
	top: -13px;
	left: 10px;
	padding: 0 9px;
	line-height: 1;
	font-size: 19px;
	background: #f7f2e9;	/*背景色 これがないと線に被る*/
	color:#ebc200;	/*文字の色*/
	font-weight: bold;	/*太字*/
}



/* #################################################################
	ブログの内容（本文）
##################################################################*/

.posthonbun{
	line-height:1.7;	/*行間*/
}

/* #################################################################
	ブログの内容（小見出し）
##################################################################*/

.postkomidashi{
	padding: 0.25em 0.5em;/*上下 左右の余白*/
	color: #666;/*文字色*/
	font-size: 20px;
	background: transparent;/*背景透明に*/
	border-left: solid 5px #ebc200;/*左線*/
	margin-bottom:3%;
	margin-top:3%;
}

/* #################################################################
	ブログの内容（大画像＆キャプション）
##################################################################*/

.postgallery p:only-child{
	width:100%;
	display:block;
	margin-top:2%;
}

/* #################################################################
	ブログの内容（小画像＆キャプション）
##################################################################*/

.postgallery{
	display:flex;	/*横並び*/
	flex-wrap:wrap;	/*折り返して*/
}

.postgallery p{
	width:46%;	/*コンテンツの幅*//*44×2+3×4＝100％ 中の隙間は計算に入れない(最初のhtmlタグにより)*/
	margin-right:2%;/*右の隙間*/
	margin-left:2%;/*左の隙間*/
	margin-bottom:4%;/*下の隙間*/
}

.postgallery span{
	display:block;
	margin-top:2%;
}

/* #################################################################
	ブログの内容（リンクボタン）
##################################################################*/

.postlink{	/*ボタンのデザイン指示*/
	display: flex;
	justify-content: center;
	align-items: center;
	width: 200px;
	margin:0 auto;
	padding: 15px 15px;
	border-radius: 5px;
	background-color: #eae0ce;
	color:#666;
	font-size: 16px;
	margin-top:2%;
	margin-bottom:10%;	/*次のコンテンツと近いので入れただけ*/
}

.postlink:after{	/*矢印の指示*/
	transform: rotate(45deg);
	width: 5px;
	height: 5px;
	margin-left: 10px;
	border-top: 2px solid #666;
	border-right: 2px solid #666;
	content: '';
}

/* #################################################################
	ブログの内容（吹き出し）
##################################################################*/

.posthukidashi{
	width: 100%;
	display:flex;
	margin-bottom:10%;	/*次のコンテンツと近いので入れただけ*/
	align-items:center;
}

.postaikon{
	width: 20%;
	border-radius:50%;
	overflow:hidden;
}

.hukidashikomento{
	width:70%;
	margin-left:5%;
	height:100%;
	background-color:#eae0ce;
	border-radius:10px;
	position:relative;
	padding:3%;
}

.hukidashikomento:after {
	content:"";
	display:inline-block;
	position:absolute;
	top:10px; 
	left:-24px;
	border:12px solid transparent;
	border-right:20px solid #eae0ce;
}

/* #################################################################
	ブログの内容（テーブル　※隙間太いデザインバージョン）
##################################################################*/

.posttable{
	width:100%;
	margin-bottom:10%;	/*次のコンテンツと近いので入れただけ*/
}

.posttable th{	/*項目の横幅*/
	width:30%;
	background:#eae0ce;
	padding:3%;
	border-bottom:7px solid #f7f2e9;
}

.posttable td{	/*内容の横幅*/
	width:70%;
	background:#fff;
	padding:3%;
	border-bottom:7px solid #f7f2e9;
}

/* #################################################################
	ブログの内容（テーブル　※通常バージョン）
##################################################################*/

.posttable2{
	width:100%;
	margin-bottom:10%;	/*次のコンテンツと近いので入れただけ*/
}

.posttable2 th{	/*項目の横幅*/
	width:30%;
	background:#eae0ce;
	padding:2%;
	border-bottom:1px solid #f7f2e9;
}

.posttable2 td{	/*内容の横幅*/
	width:70%;
	background:#fff;
	padding:2%;
	border-bottom:1px solid #f7f2e9;
}

/* #################################################################
	ブログの内容（テーブル　※項目名・内容名ありバージョン）
##################################################################*/

.posttable3{
	width:100%;
	margin-bottom:10%;	/*次のコンテンツと近いので入れただけ*/
}

.posttable3 tr:nth-child(1) th{	/*項目名と内容名の色*/
	background:#ebc200;
}

.posttable3 th:nth-child(2){	/*項目名と内容名の間の線*/
	border-left:1px solid #f7f2e9;
}

.posttable3 th{	/*項目部分*/
	width:30%;
	background:#eae0ce;
	padding:2%;
	border-bottom:1px solid #f7f2e9;
}

.posttable3 td{	/*内容部分*/
	width:70%;
	background:#fff;
	padding:2%;
	border-bottom:1px solid #f7f2e9;
}


/*===============================================================================
●smart.css  画面の横幅が800pxまで
●修正したいもののみ記入する
===============================================================================*/
@media screen and (max-width:800px){


/* #################################################################
	ブログの内容（目次　ボタンバージョン）
##################################################################*/

.postmokujilist2 li a{
	font-size:18px;/*スマホ版　文字サイズ*/
	padding:10px 10px ;	/*スマホ版　丸サイズ（縦幅・横幅）*/
}

/* #################################################################
	ブログの内容（見出し）
##################################################################*/

.postmidashi{
	padding: 8px 3%;
}


/* #################################################################
	ブログの内容（リスト）
##################################################################*/

.postdoramatitle{	/*ブログのタイトル*/
	margin-bottom:8px;
}

.bangumi li{
	padding:5% 0 5% 25px;
}

/* #################################################################
	ブログの内容（小画像＆キャプション）
##################################################################*/

.postgallery p{
	width:100%;	/*コンテンツの幅*//*44×2+3×4＝100％ 中の隙間は計算に入れない(最初のhtmlタグにより)*/
	margin-right:0%;/*右の隙間*/
	margin-left:0%;/*左の隙間*/
	margin-bottom:4%;/*下の隙間*/
	display:flex;	/*横並び*/
}

.postgallery span{
	display:block;
	margin-top:2%;
	width:50%;
	padding-left:2%;
}

.postgallery p img{
	width:50%;
}