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

/* #################################################################
	 共通 ページ
##################################################################*/

.is-focus-mode .block-editor-block-list__block:not(.has-child-selected) {
    opacity: 1;
}

.midashi{
	margin-top:3%;
	color: #6d5353;
	/*文字色*/
    font-size: 20px;
	/*文字サイズ*/
    padding: 20px;
	/*文字回りの余白（上下左右）*/
    display: block;
    border: 1px solid #816930;
	/*囲み線（太さ 実線 色）*/
    position: relative;
}

.midashi:after {
    content: '';
    background:#efece0;
	/*背景色*/
    width: calc(100% + 3px);
    height: calc(100% + 3px);
    position: absolute;
    top: 5px;
	/*背景の上下位置ずらし*/
    left: 5px;
	/*背景の左右位置ずらし*/
    z-index: -1;
}

.komidashi{
    color: #6d5353;
	/*文字色*/
    font-size: 15px;
	/*文字サイズ*/
    padding: 10px 15px;
	/*文字回りの余白（上下 左右）*/
    display: block;
    position: relative;
    border-left: 8px solid #816930;
	/*左線上側（太さ 実線 色）*/
}

.komidashi:before {
    position: absolute;
    content: '';
    left: -8px;
    bottom: 0;
    width: 8px;
	/*左線下側の太さ（幅）*/
    height: 50%;
	/*左線下側の高さ*/
    background-color: #cbb276;
	/*左線下側の色*/
}

.honbun{
	margin-top:3%;
	margin-bottom:2%;
	line-height:1.7;
/* ↑文章の間隔を調整する */
}

.gallery {
	display:flex;
	/* ↑横並びにして*/
}

.gallery p{
	width: 48%;
	padding:1%;
}

.blog-item1.rink .samune{
	/* ↑.でclassにする*/
	width: 40%;
	/* ↑画像を小さく表示でOKなので20％に設定する*/
}

.blog-item1.rink .blog-item1-text{
	/* ↑rink先の表示を変更する*/
	width: 60%;
	/* ↑テキストを画像と合わせて100％にする*/
}

.blog-item1.rink .blog-item1-text h2{
	font-size:15px;
	/* ↑rink先の文字サイズを変更する*/
}

.post.hukidashi{
	display:flex;
	/* ↑横並びにして*/
	margin:5% auto;
	/* ↑外側の余白を上下5％で左右は自動調整にする */
	width:100%;
	/* ↑表示のサイズを指定する */
	max-width:600px;
/* ↑横幅が1000に対して600までしか行かない＝自動で真ん中にくる */
}

.hukidashi_img{
	width: 20%;
}

.comment{
	width: 80%;
	background-color:#f5f5f5;
	padding:5%;
	height: 100%;
	/*画像に対してコメント幅があるので、コメントに対しての高さを設定*/
	position:relative;
	/*↑親を決定する*/
}

.comment:before{
	content:"";
	/*↑前に記号を入れる*/
	position:absolute;
	/*↑親を基準とした状態で自由にできるという意味*/
	top:15px;
	left:-25px;
	border:12px solid transparent;
	/*↑12px三角形の実践を設定する＆4つ三角形ごとに透明を設定*/
	border-right:25px solid #f5f5f5;
	z-index:3;

}

.map iframe{
	width:100%;
	height:400px;
}

.awasete{
	position:absolute;
	/* ↑親を基準に自由に移動できる */
	display: inline-block;
        top:-5px;
	left:5px;
	transform: rotate(-5deg);
/* ↑回転させる */
	background: #faebd7;
	padding:2%;
	font-size:12px;
}

.blog-item1{
	display:block;
	/*↑文字以外のものでも反応するようにブロックに指定する*/
	/*他にタグみたいな小さいブロックで反応する為にはinline brockに指定する*/
	box-shadow: 10px 10px 15px -10px #c0c0c0;
	padding:15px 10px;
	/*隙間設定　上　右　下　左*/
	color:#000000;
	width:100%;
	/* ↑表示のサイズを全画面でに指定する */
	margin:auto;
	/* ↑外側の余白を自動で設定する */
	margin-bottom:3%;
	/* ↑下の余白を自動で設定する */
	background-color:#fff;
	position:relative;
}

.blog-item1 a{
	display:flex;
	/* ↑横並びにして*/
}

.category{
	position:absolute;
	/*↑親を基準とした状態で自由にできるという意味*/
	top:10px;
	left:10px;
	background-color:#c0c0c0;
	font-size:14px;
	/*↓文字だけに適用するようにする*/
	display:inline-block;
	padding:5px 10px;
	color:#fff;
}

.samune{
	width: 45%;
}

.samune img{
	width: 100%;
 	border-radius:8px;
}	

.blog-item1-text{
	width: 55%;
	color:#696969;
	padding:2% 5%;
}

.date1{
	margin-bottom:2%;

}
.blog-item1-text h2{
	font-size:25px;
}
.caption{
	margin-top:2%;
	line-height:1.5;
/* ↑文章の間隔を調整する */
}

.table{
	width:100%;
/* ↑横幅を指定する */
	border:1px solid #ddd;
	/* ↑線を設定する */
	margin-bottom:5%;
/* ↑外側に隙間を設定する */
}

.table th{
	width:30%;
/* ↑項目の横幅を指定する*/
	background-color:#faebd7;
	/* ↑背景塗りつぶしの枠を設定する*/
	padding:2%;
	border-bottom:1px solid #ddd;
	/* ↑下の線を設定する */
	vertical-align:middle;
	
}

.table td{
	width:70%;
/* ↑内容の横幅を指定する*/
	background-color:#fff;
	/* ↑背景塗りつぶしの色を設定する*/
	padding:2%;
	border-bottom:1px solid #ddd;
	/* ↑下の線を設定する */
}

.tokki{
	padding:15px;
	background-color:#f5f5f5;
	/* ↑背景塗りつぶしの色を設定する*/
		margin-bottom:5%;
	/* ↑外側に隙間を設定する */
	font-size:13px;
	line-height:1.7;
}

.kanren{
	display:flex;
	/* ↑横並びにして*/
}

.kanren li{
	width:30%;
	margin:auto;
	box-shadow: 10px 10px 15px -10px #c0c0c0;
	/* ↑影をつける*/
}

.kanren li .category{
	position:absolute;
	/*↑親を基準とした状態で自由にできるという意味*/
	top:0px;
	left:0px;
	background-color:#c0c0c0;
	font-size:12px;
	/*↓文字だけに適用するようにする*/
	display:inline-block;
	padding:5px 10px;
	color:#fff;
}

.kanren a{
	position: relative;
	width:100%;
	background:#fff;
	display:block;
	/* ↑どこ押しても反応してのやつ*/
	
}

.kanren .osusume-img{
	width:100%;
	/* ↑画像を100％にする*/
}
	
.kanren .osusume-img img{
	border-radius:0px;
	/* ↑角丸をなくす*/
}

.kanren .tittle{
	width:100%;
	padding:5%;
	padding-bottom:8%;
}

.kanren h3{
	font-size:14px;
	color:#000;
	font-weight:normal;
}

.kanrentitle{
	position: relative;
 	display: inline-block;
 	padding: 0 45px;
	margin-bottom:3%;
}

.kanrentitle:before, .kanrentitle:after{
  content: '';
  position: absolute;
  top: 50%;
  display: inline-block;
  width: 44px;
  height: 2px;
  background-color: black;
  -webkit-transform: rotate(-60deg);
  transform: rotate(-60deg);
}

.kanrentitle:before{
	left:0;
}

.kanrentitle:after{
	right:0;
/* ↑こんな記事もおすすめに/を設定する*/
}




/*===============================================================================
●smart.css  画面の横幅が800pxまで
===============================================================================*/
@media screen and (max-width:800px){

.post h1{
/*↑postの中のh1の意味*/
	font-size:20px;
	/*↑文字サイズ*/
}

.mokujititle{
	font-size:13px;
}

.midashi{
	margin-top:5%;
	margin-bottom:5%;
}

.post.hukidashi{
	margin-top:5%;
	margin-bottom:5%;
}

.table th{
	width:100%;
	display:block;
/* ↑内容の横幅を指定する*/
	padding:2%;
	border-bottom:0;
	/* ↑下の線をなくす＝太さが0 */
}

.table td{
	width:100%;
	display:block;
/* ↑内容の横幅を指定する*/
	background-color:#fff;
	/* ↑背景塗りつぶしの色を設定する*/
	padding:3% 3% 5%;
	/* ↑上、左右、下*/
	border-bottom:0;
	line-height:1.4;
}


.gallery {
	flex-wrap:wrap;
}

.gallery p{
	width: 100%;
	font-size: 12px;
	/*文字サイズ*/
}

.gallery span{
	display:block;
	/*↑全体に反応するようにする.
	そうしないと、marginが反応しない */
	margin-top:2%;
	margin-bottom:3%;
}

.blog-item1.rink .samune{
	/* ↑.でclassにする*/
	width: 40%;
	/* ↑画像を小さく表示でOKなので20％に設定する*/
}

.blog-item1.rink .blog-item1-text{
	/* ↑rink先の表示を変更する*/
	width: 60%;
	/* ↑テキストを画像と合わせて100％にする*/
}


.blog-item1.rink .blog-item1-text h2{
	font-size:12px;
	/* ↑rink先の文字サイズを変更する*/
}

.table{
	font-size:12px;
}

.kanrentitle{
 	padding: 0 30px;
}

.kanrentitle:before, .kanrentitle:after{
  top: 30%;
  display: inline-block;
  width: 20px;
  height: 2px;
}

.kanren h3{
	font-size:12px;
}

.kanren{
	flex-wrap:wrap;
}

.kanren li{
	width:48%;
}

.kanren li:last-child{
	display:none;
}



}