@import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css);
@import url(https://fonts.googleapis.com/css?family=Modern+Antiqua);
/* Update 20230331 ver.5 */

  .img01 {
	      max-width:320px;
	      margin:0 auto;
	      box-sizing:border-box;/* borderとpaddingをwidthに含める */
	      -moz-box-sizing:border-box;
	      -webkit-box-sizing:border-box;
	      -ms-box-sizing:border-box;
	    }
	    .img01 img {
	      width:100%;
	      height:auto;
	      vertical-align:top;
	    }
	.img02 /* ヨコ額縁用 */{max-width:310px;}
	.img03 /* タテ額縁用 */{max-width:200px;}
	.img04 /* タテ額縁用 */{max-height:200px;}
	
	
#gallery{
	overflow: hidden;
}

#gallery li{
	float: left;
	line-height: 0;
	margin: 10px;
}

#gallery img{
	display: block;
width: 100%;
	height: auto;
}

/* アウトライン文字
---------------------------------------------------*/
.textwhite{
	color: #fff;
	text-shadow: 1px 1px 0 #000,
	-1px 1px 0 #000,
	1px -1px 0 #000,
	-1px -1px 0 #000;
}
.textblack{
	color: #000;
	text-shadow: 1px 1px 0 #fff,
	-1px 1px 0 #fff,
	1px -1px 0 #fff,
	-1px -1px 0 #fff;
}

/* 虫が入る
---------------------------------------------------*/
.bug01{position: relative;}
.z-index1{z-index: 1; position: absolute; top: 0px;}
.z-index2{z-index: 2; position: absolute; top: 2px;}
.z-index3{z-index: 3; position: absolute; top: 5px;}
.z-index4{z-index: 1; position: absolute; top: 0px;}
.z-index5{z-index: 2; position: absolute; top: 2px;}
.z-index6{z-index: 3; position: absolute; top: 5px;}

.f_brightness{filter:brightness(150%); }
.f_sepia{filter:sepia(30%); }
.f_gscale{filter:grayscale(80%); }
.f_shadow{filter:drop-shadow(20px 20px 40px #d9b5b5);}

.of_fill{object-fit: fill;}
.of_cover{object-fit: cover;}
.of_contain{object-fit: contain;}


/* 額縁各種
---------------------------------------------------*/
.frame01 /*楕円フレーム */
{
	position: relative;
	display: inline-block;
	border-radius: 50%;
	width: 250px;
	height: 250px;
	}
	.frame02 img {
		border-radius: 50%;
		}
		

.photo01 /* 縦横比を保ったまま、最大の表示 */
{
	object-fit: contain;
	border: 1px solid #d9b5b5;
	border-radius: 5px;
	box-shadow:1px 1px 5px 5px #ccf;
}

.photo02 /* 縦横比を保ったまま、ボックスからはみ出すと表示しない */{
	object-fit: cover;
	border: 2px solid #d9b5b5;
	border-radius: 5px;
	box-shadow: 1px 4px 10px 5px #d9b5b5, 1px 1px 3px 5px #ddd ;	
}
.photo03 /* 額縁一杯に拡大縮小して表示される */
{
	object-fit: fill;
	height: 220px; width: 220px;
	border: 2px solid #d9b5b5;
	border-radius: 5px;
	box-shadow: 1px 2px 3px #ddd, 1px 2px 5px 2px #d9b5b5;	
}
.photo04{
	object-fit: contain;
	border-radius: 5px;
	box-shadow:  1px 1px 2px 2px #ccc, 1px 1px 4px 4px #f9bfbf;
}
.photo05{
	object-fit: contain;
	border: 3px dotted #d9b5b5;
	border-radius: 5px;
	box-shadow:2px 2px 4px 4px #eee;
}
.photo06{
	object-fit: contain;
	border: 1px solid #ccc;
	border-radius: 5px;
	box-shadow: 1px 1px 3px 3px #fff, 1px 1px 4px 4px #ccc;	
}
.photo07{
	object-fit: contain;
	border-radius: 5px;
	box-shadow: 1px 1px 1px 3px #fff, 1px 1px 5px 5px #ccc;
}
.photo08{
	object-fit: contain;
	border: 5px double #d9b5b5;
	border-radius: 5px;
	box-shadow: 2px 2px 3px 3px #fff, 2px 2px 4px 4px #ccc;
}
.photo09{
	object-fit: fill;
	border: 5px groove #d9b5b5;
	border-radius: 5px;
	filter:drop-shadow(10px 10px 20px #ccc);
}
.photo10 /*トイカメラのような内側に影の入ったサンプル*/
{
	border:5px solid #cfcfcf;
	position:relative;
	
		    /*影を入れる*/
		    -webkit-box-shadow: 0 10px 8px -6px #8d8c8c;
		    -moz-box-shadow: 0 10px 8px -6px #8d8c8c;
		     box-shadow: 0 10px 8px -6px #8d8c8c;
		}
		.photo10:after{
		    position: absolute;
		    display: block;
		    content: "";
		    top: 0;
		    left: 0;
		    width: 100%;
		    height: 100%;
		    /*影を入れる*/
		    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.5),
		    inset 0 0 40px rgba(0, 0, 0, 0.2);
		}

.photo12 /* 木枠額縁 */
{
	border-top: 10px solid #B37D4D;    /* 上のborderを指定 */
	  border-right: 10px solid #B37D4D;  /* 右のborderを指定 */
	  border-bottom: 10px solid #D2AE7E; /* 下のborderを指定 */
	  border-left: 10px solid #D2AE7E;   /* 左のborderを指定 */
	  box-shadow: inset 0 0 5px #000;   /* 内側に影を指定 */
	  display: inline-block;             /* 写真に合わせるためインラインブロック要素にする */
}
.photo12 img {
	  position: relative; /* z-indexを指定 */
	  z-index: -1;        /* 影を写真の上に重ねるためマイナス値を指定 */
	}
.photo14 /* 額縁グレー影ヨコ */
	{
		object-fit: contain;
			border:5px solid #cfcfcf;	
		 /*影を入れる*/
		    -webkit-box-shadow: 0 10px 8px -6px #8d8c8c;
		    -moz-box-shadow: 0 10px 8px -6px #8d8c8c;
		     box-shadow: 0 10px 8px -6px #8d8c8c;
		
	}
	
.photo16{
	object-fit: contain;
	box-shadow: 0px 0px 2px 3px #ccc;
}
}