@charset "utf-8";

	html {
		/* margin: 0;
		padding: 0; */
    width: 100%;
		 height:100%;
		 font-size:62.5%;/*pxだと10px;*/
  }
	body{
		/* margin: 0;
 	 	padding: 0; */
		color:dimgray;
		font-family: "メイリオ","Meiryo","ヒラギノ丸ゴ ProN","Hiragino Maru Gothic ProN";
		font-size:1.6rem;/*16px*/
		background-image: url(../img/paper_00024r_2048x1364.jpg);
		background-size: cover;
		/* background-position: top right; */
}

	a:link {color:limegreen;} /*未訪問のリンクの色*/
	a:visited {color:mediumseagreen;} /*訪問済みのリンクの色*/
	a:hover {color:lime;} /*カーソルが乗っているリンクの色*/
	a:active {color:greenyellow;} /*クリック中のリンクの色*/

	a#title {
		text-decoration: none;
		color:limegreen;
	}

	a#menu {
		text-decoration: none;
		/* padding: 24px 0px 24px 0px; */
	}

	a#list {
		text-decoration: none;
	}

	h3{
		color:limegreen;
	}

	p {
		color:dimgray;
	}

	main {
		margin: 0px 25px;
		padding: 0px;
	}

	ol{
		padding-left: 25px;
	}

 div{
	 	margin: 0;
		padding: 0;
 }

	div#container{
		padding-bottom: 25px;
		position: relative;
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		min-height: calc(100vh - 20px);
	}

	.postit-y{
		width: 16.5rem;
		height: 2.75rem;
	  padding: 1em 1.75em;
		 overflow: hidden;
		 box-shadow: .25rem 0 .25rem hsla(0, 0%, 0%, .1);
		 /* 古いSafari用の記述(試行中) */
	 	background-image:
			 -webkit-linear-gradient(0deg, hsla(0, 0%, 45%, .1) 2rem, hsla(0, 100%, 100%, 0) 2.5rem)
		 , -webkit-linear-gradient(0deg, hsla(60, 100%, 85%, 1), hsla(60, 100%, 85%, 1));
   	/* background-image:
	     linear-gradient(90deg, hsla(0, 0%, 45%, .1) 2rem, hsla(0, 100%, 100%, 0) 2.5rem)
	   , linear-gradient(90deg, hsla(60, 100%, 85%, 1), hsla(60, 100%, 85%, 1)); */
		  font-size: 1.25rem;
	  line-height: 1.8;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	.postit-y a{
		text-decoration: none;
		color:darkorange;
	}
	.postit-y a:hover{
		color:chocolate;
	}

	.postit-g{
		/* width: 16.5rem; */
		width: 20.5rem;
		height: 2.75rem;
		padding: 1em 1.75em;
		 overflow: hidden;
		 box-shadow: .25rem 0 .25rem hsla(0, 0%, 0%, .1);
		 /* 古いSafari用の記述(試行中) */
		background-image:
			 -webkit-linear-gradient(0deg, hsla(0, 0%, 45%, .1) 2rem, hsla(0, 100%, 100%, 0) 2.5rem)
		 , -webkit-linear-gradient(0deg, hsla(60, 100%, 85%, 1), hsla(60, 100%, 85%, 1));
		/* background-image:
			 linear-gradient(90deg, hsla(0, 0%, 45%, .1) 2rem, hsla(0, 100%, 100%, 0) 2.5rem)
		 , linear-gradient(90deg, hsla(60, 100%, 85%, 1), hsla(60, 100%, 85%, 1)); */
			font-size: 1.25rem;
		line-height: 1.8;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	.postit-g a{
		text-decoration: none;
		color:limegreen;
	}
	.postit-g a:hover{
		color:lime;
	}

	/* フード画像 */
	img.foodphoto{
		width: 100%;
		max-width: 500px;
		height: auto;
		/* max-height: 350px; */
		display: none;
	}
	div.photo{
		margin: 0px 15px 5px 0px;
	}
	img.photo{
		width: 100%;
		max-width: 400px;
		height: auto;
	}

	span.strike{
		text-decoration: line-through;
	}

	footer {
		display: none;
		clear:both;			/*回り込みを解除する*/
		/* position: fixed;	 */
		position: absolute;
		bottom: 0; 	/*下に固定*/
		/* width: 100%; */
		width: calc(100% - 30px);
		height: 25px;
		padding: 5px 15px 5px 15px;
		font-size:1.2rem;	/*12px*/
		background-color: limegreen;
	}


	/*============================================
	 index.html で使用
	============================================*/
	/*　画面サイズが768px以上はここを読み込む　*/
	@media screen and (min-width:768px) {
		div.flexbox{
			display: -webkit-box;  /* 古いSafari用の記述 (box仕様)*/
			display: flex;  /* 新しいブラウザ用の記述 (flex仕様)*/
		}
		div.leftbox{
			width: 50%;
		}
		div.rightbox{
			width: 50%;
		}
		main {
			margin: 0px 25px;
			/* padding: 0px 0px 0px 10vw; */
		}
		/*============================================
		 詳細ページで使用
		============================================*/
		/* 画像の表示 */
		img.foodphoto{
			display: block;
		}
	}

	li#menu {
			list-style-type:none;		/*リストマーカー無しにする*/
			/* padding: 0px 0px 0px 15px; */
			padding: 4px 0px 4px 15px;
	}

	span.update {
		font-size:1.2rem;/*12px*/
	}


	/*============================================
	 詳細ページで使用
	============================================*/
	span#subheading {
		font-weight: bold;
	}