@charset "UTF-8";

body{
	text-align: center;
	background-color:#a8d9a6 ;
	margin-right: auto;
	margin-left: auto;
	width: 100%;
	font-family: sans-serif;
}

p{
	margin: 10px;
}
.main{
	margin-right: auto;
	margin-left: auto;	
	/*position: relative; top: 10px;*/
	background-color: #FFF;
	padding: 70px;
	width: 700px;
}
.day14{
	color: #FFF;

}

.day20{
	color: #FFF;

}

.diary{
	font-size: 20px;
	text-align: left;
	list-style-type: none;
  	padding: 0; /* 左にできる隙間を消す */
	display: grid;
  	grid-auto-columns: max-content;
  	grid-template-rows: repeat(100, 0fr);/*(項目数,間隔)*/
  	grid-auto-flow: column;
  	justify-content:space-between;
  	align-content:space-between;
}

.main_story{
	text-align: left;
	display: inline-block;	
	background: linear-gradient(#ffffff 50%, yellow 30%);
}

.sub_story{

	display: inline-block;
	margin-left: 20px;
	background: linear-gradient(#ffffff 50%, yellow 30%);
}



@media screen and (max-width: 959px) {
	/* 959px以下に適用されるCSS（タブレット用） */

body{
	background-color:#a8d9a6 ;
	font-family: sans-serif;

}
.main {
	margin: 30px -70px 70px 0px;	
	padding: 70px 0px 0px 0px;
	text-align: center; 
	/*position: relative; top: 10px;*/
	background-color: #FFF;
	width: 100%;
	overflow: hidden;	
}
.ntni_illust{
	display: inline-block;
	width: 100%;
	text-align: center;
}

.diary{
	font-size: 20px;
	text-align: left;
	
}
.day14{
	color: #FFF;

}

.day20{
	color: #FFF;

}

.main_story{
	text-align: left;
	display: inline-block;	
	background: linear-gradient(#ffffff 50%, yellow 30%);

}

.sub_story{
	display: inline-block;	
	background: linear-gradient(#ffffff 50%, yellow 30%);
}


}



/*-----------------------------------話*/
img{
	border: 1px solid black; 
}

.img :not(span){
	border: 1px solid black;
}

@media screen and (max-width: 959px) {
	/* 959px以下に適用されるCSS（タブレット用） */

img {
	border: 1px solid black; 
	max-width: 100%;
}

img :not(:span){
	border: 1px solid black;

}









}