/**
 * @Author: Your name
 * @Date:   2019-01-10 15:24:01
 * @Last Modified by:   Your name
 * @Last Modified time: 2023-10-05 13:38:51
 */
@charset "UTF-8";
/* CSS Document */

img {width: 100%; max-width: 100%;}
h2.title {
	font: bold 1.3rem Verdana, Geneva, sans-serif;
	/* margin: 0px 0px 10px 40px; */
	margin: 0.6rem 0.6rem 0.6rem 0.6rem;
	padding: 0px;
	color:#333;
}
.copyright {
	font-size: 16px;
}
.copyright a{
	color: #039;
	text-decoration: none;
}
.copyright a:hover{
	color: #F60;
	text-decoration: underline;
}
.main {
	clear: both;
	width: 90%;
	height:auto;
	margin-left: 40px;
	margin-bottom: 20px;
	background: -moz-linear-gradient(top,rgba(244,244,244,0.9),#fff);
	background: -webkit-gradient(linear, left top, left bottom, from(rgba(244,244,244,0.9)), to(#fff));
	border-radius: 10px;
	box-shadow: 1px 1px 3px #000;
	-moz-box-shadow: 1px 1px 3px #000;
	-webkit-box-shadow: 1px 1px 3px #000;
	overflow: auto;
}
.pix {
	width: 100%;
    max-width: 600px; /* PCでは600pxまで広がる */
}
h3.days {
	clear: left;
	font: bold 17px "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	margin: 10px 0px 6px 10px;
	padding: 0;
	color:#333333;
}
img.eyeicon {width: 1.2rem; height: auto;}
.days_s {
	font-size: 14px;
}
ul.thumbnails {
	width: 90%;
	list-style: none;
	margin: 1rem auto;
	padding: 0;
	display: flex;
	justify-content: space-between;
}
ul.thumbnails li{
	width: 48%;
	padding: 0px;
	margin: 0px;
}
ul.thumbnails li a img{
	opacity:0.9;
	filter: alpha(opacity=90);
	-ms-filter: "alpha( opacity=90 )";
}
ul.thumbnails li a:hover img{
	opacity:1;
	filter: alpha(opacity=100);
	-ms-filter: "alpha( opacity=100 )";
}


ul.thumbnails2 {
	width: 100%;
	margin: 1rem;
	padding: 0;
  	list-style: none;

	display: grid;
  	grid-template-columns: repeat(5, 1fr); /* PCでは5列 */
  	gap: 10px; /* 余白はお好みで */
}
/* スマホ（例: 768px以下）では3列に変更 */
@media (max-width: 768px) {
  ul.thumbnails2 {
	width: 93%;
    grid-template-columns: repeat(3, 1fr);
  }
}
ul.thumbnails2 li{
 position: relative;
  aspect-ratio: 1 / 1; /* 正方形にする */
  overflow: hidden;
  background: #000; /* 万一画像ロード前でも黒背景 */
}
ul.thumbnails2 li a img{
	width: 100%;
	height: 100%;
	object-fit: cover;  /* 切り抜きで中央表示 */
  	object-position: top center; /* 上寄せ */

	opacity:0.9;
	filter: alpha(opacity=90);
	-ms-filter: "alpha( opacity=90 )";
}
ul.thumbnails2 li a:hover img{
	opacity:1;
	filter: alpha(opacity=100);
	-ms-filter: "alpha( opacity=100 )";
}
@media screen and (max-width:480px) { 
	h2.title {
		font: bold 14px Verdana, Geneva, sans-serif;
		margin: 0px 0px 0px 0px;
		padding: 0px;
		color:#333;
	}
	.copyright {
		font-size: 12px;
	}
	.main{
		width: 95%;
		height:auto;
		margin-top: 3.5em;
		margin-left: 0.5em;
		margin-bottom: 1em;	
		padding: 0.6em;
		box-sizing: border-box;
	}
	.pix {
		width: 100%;
	}
	ul.thumbnails {
		list-style: none;
		margin: 0 auto 3em auto;
		padding: 0;
		flex-wrap: wrap;
		justify-content: space-around;
	}
	ul.thumbnails li{
		width: 90%;
		height: auto;
		padding: 0px;
		border: 0;
		margin: 0 auto 1em auto;
	}
	ul.thumbnails li a img{
		width: 100%;
		opacity:0.9;
		filter: alpha(opacity=90);
		-ms-filter: "alpha( opacity=90 )";
	}
	ul.thumbnails li a:hover img{
		opacity:1;
		filter: alpha(opacity=100);
		-ms-filter: "alpha( opacity=100 )";
	}
}