@charset "utf-8";

/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
 *
 *
	画像拡大用 CSS
 *
 *
 * ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */



/* ===========================================================

   画像ドラッグエリア

=========================================================== */
article section a.awesome_after{
	position:						relative;
	display:						block;
	width:							100%;
}

article section a.awesome_after:after{
/*	content:						"\f00e";*/
	content:						url(/common/images/loupe.png);
	position:						absolute;
/*	right:							5px;
	bottom:							5px;*/
	right:							0;
	bottom:							0;
/*	font-size:					1.25rem;*/
	display:						block;
	width:							48px;
	height:							48px;
/*	border-radius:			4px;
	border:							solid 3px #2976D3;*/
	background-color:		#FFF;
/*	padding:						0.25em;*/
	padding:						0;
/*	color:							#2976D3;*/
}

article section a.awesome_after:hover:after{
/*	color:							#2976D3;
	text-decoration:			none;*/
	opacity:						0.75;
}

article section a.awesome_after > img {
	display:						block;
}
/*
article section a.swipe img{
	margin-left:					-25px;
}
*/

article section p.caption{
	text-align:						right;
	margin-top:						0;
}

.pswp__ui--hidden .pswp__top-bar,
.pswp__ui--hidden .pswp__caption,
.pswp__ui--hidden .pswp__button--arrow--left,
.pswp__ui--hidden .pswp__button--arrow--right,
.pswp__ui--idle .pswp__top-bar{
	opacity:						1		!important;
}


/* タイトル
------------------------------------------------------------*/


/* Retina対応 */
@media (-webkit-min-device-pixel-ratio: 1.5){
}





/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 * ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
 * ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

   スマートフォン

 * ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 * ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
 * ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media screen and (max-width: 480px){
article　section .area_swipe{
	padding-right:					0;
	padding-left:					0;
}

article section a.awesome_after:after{
	right:							0;
	bottom:							0;
}


article section a.swipe img{
	margin-left:					0;
	width:							100%;
}


/* 画像横スワイプONの際、未スワイプ時のスワイプを促すアイコンを表示
------------------------------------------------------------*/
div.pswp div.pswp__container > div:nth-of-type(2):after{
	opacity:						0.4;
}

div.pswp div.pswp__container > div:nth-of-type(2):after{
	content:						"";
	width:							180px;
	height:							200px;
	display:						block;
	position:						absolute;
	right:							20px;
	bottom:							20px;
	background:						url(/common/images/icon_swipe.png) no-repeat 100% 100%;
	-moz-background-size:			75% auto;
	background-size:				75% auto;
	-webkit-transition:				all 0.7s ease;
	-moz-transition:				all 0.7s ease;
	-o-transition:					all 0.7s ease;
	transition:						all 1.5s ease;

}

/* JSの「画像横スワイプONの際、未スワイプ時にスワイプを促すアイコンを表示」にかかわる制御 */
div.pswp.target_zoomin div.pswp__container > div:nth-of-type(2):after{
	opacity:						0;
}

.pswp__button,
.pswp__button--arrow--left:before,
.pswp__button--arrow--right:before{
	background-size:				380px 135px;
	background-position:			-10px -73px;
}

}