@charset "utf-8";
/****************************
	画像拡大表示モーダル
	2024 Sep~
*****************************/

.zoomBtn {
	position: relative;
	margin: 0 auto;
	text-align: right;
}

.zoomBtn figcaption,
.zoomBtn p {
	text-align: left !important;
}

.zoomBtn p.modalCaption.center,
.zoomBtn figcaption.modalCaption.center {
	text-align: center !important;
}

.zoomBtn .modal figcaption.modalCaption,
.zoomBtn .modal p.modalCaption,
.zoomBtn p.caption {
	min-height: 40px;
}

.zoomBtn .modal:hover {
	opacity: 0.6;
}

/* 右下隅 アイコン画像 */
.zoomBtn .iconz {
	position: absolute;
	height: auto;
	display: block;
	width: 20px;
	right: 0;
	bottom: 9px;
}



/* .__w430 縦横比が 1000:667の画像 */
.zoomBtn.__w430 .zoom_ico {
	height: calc(430px * 0.667);
}
.zoomBtn.__w430 {
	max-width: 430px;
}
.zoomBtn.__w430 .modalImg {
	width: 100%;
	max-width: 430px;
}

/* .__w280  縦長画像の場合 */
.zoomBtn.__w280 .zoom_ico {
	height: 419px;
}
.zoomBtn.__w280 {
	max-width: 280px;
}
.zoomBtn.__w280 .modalImg {
	width: 100%;
	max-width: 280px;
}


/* .__h287  縦横比が 1000:750の画像　*/
.zoomBtn.__h287 .zoom_ico {
	height: calc(430px * 0.75);
}
.zoomBtn.__h287 {
	max-width: 430px;
}
.zoomBtn.__h287 .modalImg {
	width: 100%;
	max-width: 430px;
}

@media screen and (max-width: 1000px) {
	.zoomBtn.__w430 .zoom_ico {
		height: calc(40vw * 0.667);
	}
	.zoomBtn.__h287 .zoom_ico {
		height: calc(40vw * 0.75);
	}
}

/************************
ホバー時画像　zoom_ico
*************************/
.zoom_ico:hover, 
.zoom_ico:focus {
	/*background-color: #000;
	opacity: 0.5;*/
}

.zoom_ico {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 10;
	width: 100%;
	overflow: hidden;
	border: none;
	background: none;
	cursor: pointer;
}
.zoom_ico span {
	display: block;
	position: absolute;
	top: -1px;
	left: -1px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
.zoom_ico::after {
	display: block;
	opacity: 0;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 60px;
	height: 60px;
	background: url("https://www.sony.jp/support/ichigan/enjoy/magazine/bird-composition/photozoom-snippet/icon_hover_zoom.png");
	content: '';
	transition: all .3s ease-out 0s;
}
.zoom_ico img {
	display: block;
	vertical-align: baseline;
	transition: opacity .3s;
}
.zoom_ico:hover img {
		opacity: .7;
}
.zoom_ico:hover::after,
.zoom_ico:focus::after {
		top: 50%;
		opacity: 1;
}


/************************
モーダル画面
*************************/
#cover{
    width: 100%;
    height: 100%;
    z-index: 100;
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(0,0,0,0.7);
    cursor: pointer;
}
#modal_overlay{
    width: 100%;
    height: 100%;
    z-index: 100;
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(0,0,0,0.7);
    cursor: pointer;
}
#modal{
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 150;
    box-sizing: border-box;
    width: 90%;
    max-width: 1000px;
    padding: 5px;
    background: #FFF;
    transform: translate(-50%, -50%);
}
/* 縦長画像の場合 */
#modal.Vertical {
	max-width: 500px !important;
}

#modal #loading{
    text-align: center;
}
#modal figure{
    overflow: hidden;
}
#modal figure img{
    max-width: 100%;
    height: auto;
}
#modal figure figcaption{
    float: left;
    color: #666;
    font-weight: bold;
}
#modal #close{
    float: right;
    border: none;
    background-color: #FFF;
    /*margin: 0.25em;*/
    padding: 0 5px;
}
#modal #close img{
    vertical-align: middle;
}