html {
	scroll-behavior: smooth;
	}
body { 
	margin:0;
	background-color:#00708e;
	background-position: center top;
	background-image: url(img/kenrick-mills-1h2Pg97SXfA-unsplash1.webp);/* 日中の穏やかな空の写真 Kenrick Mills */
	background-repeat: no-repeat;
	background-size:cover;
	color: #fff;
	text-shadow: 2px 2px 6px rgba(0,0,0,1);
	}
a:link { color: #fff; }
a:visited { color: #fff; }
a:hover { color: #FF8000; }
a:active { color: #00FFFF; }

.inv:hover {
     filter:invert(100%);
} 
h2 { color: #F3F781; }
header {
	width: 100%;  height:300px;
	text-align:center; 
	}
figure {
	position:relative; top:100px; left:auto;  
	}
figcaption {
	   color: #fff; margin: 0.7em; 
	   font-family:serif;
	}

#kiji {
	margin: 20px auto;
	padding:10px 20px; 
	max-width: 90%;
	border: 0px; border-radius: 8px; 
	}

 div.haco { display: inline-block; width: auto; height: auto; 
	 margin:0px; padding:2px 2px;  border: 0px; 
	 vertical-align:  top;
	 }
 div.haco p { 
	 margin-left:20px;
	 }
  div.haco p img{ 
	 margin-right:14px;
	 }


/* 続きを読む*/
	details {
	text-align:center; 
	margin: 0px; padding: 0px;
	width: 100%;
	}
	details summary {
	  width: 300px;
	  list-style: none;
	  cursor: pointer;
	  margin: 10px auto; padding: 10px;
	  background: #FBCC2F;
	  color: #242323;
	  font-size: 1rem;
	  font-weight: bold;  
	  border-radius: 20px;
	 }
	details summary:hover {
	  background: #FBCC2F;
	  color: white;
	}

	.hue {margin-right:10px; }
	.hue:hover {
	filter: hue-rotate(300deg); transition: 0.3s;
	}
.pagetop {
	    display: flex;
	    justify-content:right;
	    position: fixed; bottom: 10px; right:20px;  
	    opacity: 0.5;
	    z-index: 3;
	}

footer { 
	margin:15px; color:#808080; 
	font-size: 0.7em; text-align:center;
	}

/*スマホ対応*/
	@media screen and (max-width: 768px) {
		body{ font-size: 1.1em; }
	}
	@media screen and (max-width: 500px) {
		body{ font-size: 1.2em; }
	}
	