@charset 'utf-8';

#style-album-css { font-size:1px; } /* detector */

.album {
	max-width:720px;
	margin-left:auto;
	margin-right:auto;
}

.album > .breadcrumbs:first-child {
	display:none;
}

.album-title {
	font-size:120%;
	padding:0 .5em .5em .5em;
	margin-top:0;
}
.album-description {
	padding:.5em;
}

.album-content-link {
	display:block;
	padding:1em;
	font-size:85%;
	line-height:1.2;
	text-indent:-1em;
	padding-left:1em;
	opacity:.75;
	margin-top:1em;
}
.album-content-link,
.album-content-link:hover {
	text-decoration:none;
}

.album-content-link::before {
	font-family:FontAwesome;
	content:"\f104"; /* fa-angle-left */
	content:"\f0f6"; /* fa-file-text-o */
	content:"\f08e"; /* fa-external-link */
	content:"\f0c1"; /* fa-link */ 
	margin-left:.25em;
}

.album-description + .album-content-link {
	margin-top:1em;
}

/****** for album ******/
.album-images {
	display:flex;
	align-content:center;
	flex-wrap: wrap;
	margin:10px 0;
}

.album-image-small {
	flex:0 0 calc((100% - 2px * 2) / 3);
	background-repeat:no-repeat;
	background-size:cover;
	background-position:center center;
	position:relative;
}
.album-image-small:nth-child(n+4) {
	margin-top:2px;
}
.album-image-small:not(:nth-child(3n+1)) {
	margin-left:2px;
}
.album-image-small:nth-child(3n+2) {
	/* IE,Edge bug workaround */
	margin-right:calc(-1px / 3);
}

.album-image-small::before {
	content:'';
	display:block;
	padding-top:100%;
}

.album-image-small > img {
	opacity:0;
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	/* height:auto; */
}

/****** for image ******/
figure.album-image {
	margin:1em 0 0 0;
}
figure.album-image:first-child {
	margin-top:0;
}

.album-image-img-wrap {
	/*
	background-image:url();
	background-color:#f8f8f8;
	*/
	background-size:contain;
	background-position:center center;
	background-repeat:no-repeat;
	position:relative;
	/* overflow:hidden; */
}

.album-image-img {
	position:relative;
}

.album-image-img-wrap {
	max-height:80vh; /* limit height */
	max-height:calc(100vh - 80px - 50px); /* limit height: header and image nav */
}
.album-image-img-wrap > div:first-child {
	/***** padding-top for ratio ******/
	/* padding-top:100% !important; /* square */
	/* padding-top:61.18% !important; /* golden ratio */
	/* padding-top:calc(3 / 4 * 100%) !important; /* 4:3 */
	/* padding-top:calc(9 / 16 * 100%) !important; /* 16:9 */
}

.album-image-img-wrap > img:nth-child(2) {
	display:block;
	position:absolute;
	top:0; left:0; width:100%; height:100%;
	opacity:0;
}

figcaption.album-image-caption {
	margin:.5em 0 0 0;
	font-size:80%;
	line-height:1.3;
	opacity:.8;
	font-style:italic;
}

figcaption .album-image-source {
	display:block;
	text-align:right;
	position:relative;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
	margin-top:.5em;
	padding:0 1em 0 5em;
}

figcaption .album-image-source::before {
	content:"source: ";
}

.album-image-img-and-nav {
	position:relative;
	/*
	padding-left:30px;
	padding-right:30px;
	*/
}

.album-image-nav[href="#"] {
	/* opacity:.2; */
	display:none;
}

.album-image-nav {
	cursor:pointer;
}
.album-image-nav > span {
	display:none;
}

.album-image-nav-prev,
.album-image-nav-next {
	transition:background-color .2s ease-in-out;
}

.album-image-nav-prev:hover,
.album-image-nav-next:hover,
.album-image-nav-prev.scrolling,
.album-image-nav-next.scrolling {
	background-color:rgba(0,0,0,.25);
}

a.album-image-nav,
a.album-image-nav:hover {
	text-decoration:none;
}


.album-image-nav {
	display:flex;
	font-family:helvetica;
	justify-content:flex-end;
	align-items:center;
}

.album-image-nav-prev {
	justify-content:flex-start;
	padding:.5em;
}
.album-image-nav-next {
	justify-content:flex-end;
	padding:.5em;
}

.album-image-nav-prev::before {
	font-family:FontAwesome;
	font-size:200%;
	content:"\3008"; /* fa-angle-left */
}
.album-image-nav-next::before {
	font-family:FontAwesome;
	font-size:200%;
	content:"\3009"; /* fa-angle-right */
}
.album-image-nav-all:not([disabled])::after {
	font-family:FontAwesome;
	content:"\f00a"; /* fa-th */
	margin-left:.5em;
	margin-right:.25em;
	opacity:.3;
}
.album-image-nav-all[disabled]::after {
	font-family:inherit;
	content:"\00a0";
	margin-left:0;
	margin-right:0;
	opacity:0;
}
.album-image-nav-all[disabled] {
	cursor:auto;
}

.album-image-nav-all::before {
	opacity:.5;
	font-size:75%;
	display:inline-block;
	white-space:nowrap;
	vertical-align:middle;
	content:
		attr(data-album-imagemap-order)
		' / '
		attr(data-album-imagemaps-total);
}

a.album-image-nav-prev,
a.album-image-nav-next {
	color:white !important;
	text-shadow: 0 0 2px black,
		0 0 5px rgba(0,0,0,.5);
	line-height:1;
	opacity:.5;
	position:absolute;
	top:0; width:25%;
	bottom:calc(1em * 1.6); /* all link height */
}
.album-image-nav-prev {
	left:0;
}
.album-image-nav-next {
	right:0;
}

.album-thumbs {
	margin:0 -2px;
	padding:1px 0;
	
	display:flex;
	align-items:center;
	flex-wrap:wrap;
	
	position:relative;
}

.album-thumb {
	border:2px solid transparent;
	position:relative;
	width:calc(100% / 6);
	height:calc(100% / 6);
	
	background-origin:content-box;
	background-clip:content-box;
	background-repeat:no-repeat;
	background-size:cover;
	background-position:center center;
	flex:0 0 auto;
}
.album-thumb:nth-child(6n+5) {
	/* IE,Edget bug workaround */
	margin-right:calc(-1px / 6);
}
@media (max-width:767px) {
	.album-thumb {
		width:calc(100% / 3);
		height:calc(100% / 3);
	}
}

.album-thumb:hover,
.album-thumb.selected {
	/* border-color:#888; */
	/* opacity:.5; */
	opacity:.3;
}

.album-thumb img {
	display:block;
	vertical-align:top;
	width:100%;
	height:auto;
	
	opacity:0;
}

.album-thumb::before {
	content:"";
	display:block;
	padding:100% 0 0 0;
}
.album-thumb img {
	position:absolute;
	top:0; left:0;
	height:100%;
	width:100%;
	object-fit:cover;
}

@media (max-width:767px) {
	.album-title, .album-description, .album-image-caption {
		padding-left:10px;
		padding-right:10px;
	}
	.album-image-caption {
		padding-left:10px;
		padding-right:10px;
	
	}
}

/** thumbs, imgs ratio **
	2.35 :1      シネスコ
	1.778:1 16:9 HDTV
	1.618:1      黄金比横・新書版横
	1.5  :1  3:2 35mmフィルム・デジイチ
	1.414:1      白銀比横・A,B版横
	1.333:1  4:3 従来型テレビ・ディスプレイ・コンデジ
	1  :  1      スクエア
	1:1.333  3:4 コンデジ縦
	1:1.414      白銀比縦・A,B版
	1:1.5    2:3 35mmフィルム縦・デジイチ縦
	1:1.618      黄金比縦・新書版縦
	
	使いそうなパターン
	16:9, 1.618:1, 3:2, 4:3, 1.414:1, 1:1, 3:4, 1:1.414, 2:3, 1:1.618
 */
[data-imgs-ratio] > *::before {
	content:"";
	display:block;
	margin:0;
	padding:0;
}
[data-imgs-ratio] > * {
	background-clip:content-box;
	background-origin:content-box;
	background-position:center center;
	background-repeat:no-repeat;
	background-size:cover;
}

[data-imgs-ratio="2.35:1"]  > *::before { padding-top:calc( 1 / 2.35 * 100% ); }
[data-imgs-ratio="16:9"]    > *::before { padding-top:calc( 9 / 16 * 100% ); }
[data-imgs-ratio="1.618:1"] > *::before { padding-top:calc( 1 / 1.618 * 100% ); }
[data-imgs-ratio="3:2"]     > *::before { padding-top:calc( 2 / 3 * 100% ); }
[data-imgs-ratio="4:3"]     > *::before { padding-top:calc( 3 / 4 * 100% ); }
[data-imgs-ratio="1.414:1"] > *::before { padding-top:calc( 1 / 1.414 * 100% ); }
[data-imgs-ratio="1:1"]     > *::before { padding-top:calc( 1 / 1 * 100% ); }
[data-imgs-ratio="3:4"]     > *::before { padding-top:calc( 4 / 3 * 100% ); }
[data-imgs-ratio="1:1.414"] > *::before { padding-top:calc( 1.414 / 1 * 100% ); }
[data-imgs-ratio="2:3"]     > *::before { padding-top:calc( 3 / 2 * 100% ); }
[data-imgs-ratio="1:1.618"] > *::before { padding-top:calc( 1.618 / 1 * 100% ); }

[data-imgs-ratio][data-imgs-fit="contain"] > * { background-size:contain; }
[data-imgs-ratio][data-imgs-fit="contain"] > * > img { object-fit:contain; }


/****/
.album-link.loading, .album-link.loading *,
.album-inline.loading, .album-inline.loading *,
.album.loading, .album.loading * {
	cursor:wait;
	poiner-events:none;
}

.album.loading .album-image-img-and-nav::before {
	font-size:100px;
	line-height:1;
	position:absolute;
	top:50%; left:50%; margin-top:-.5em; margin-left:-.5em;
	font-family:FontAwesome;
	content:"\f1ce"; /* spinner */
	animation:fa-spin 2s infinite linear;
	opacity:.1;
}
.album.loading .album-thumbs {
	opacity:.5;
}
.album.loading .album-image-img-and-nav .album-image-nav {
	visibility:hidden;
	user-select:none;
}
.album.loading .album-image-img-and-nav .album-image-img-wrap {
	opacity:.5;
}

.album-image-img-wrap-prev,
.album-image-img-wrap-next {
	position:absolute;
	top:0;
	width:100%;
	bottom:auto;
	opacity:.5;
	
	overflow:hidden;
	filter:blur(3px);
	transform:translate3d(0,0,0); /* hide overflowed blur magic */
}
.album-image-img-wrap-prev {
	right:100%;
}
.album-image-img-wrap-next {
	left:100%;
}

.album-image-img-and-nav {
	transition:transform 150ms;
	transform:scale(1);
	cursor:grab;
}
.album-image-img-and-nav.pushing {
	transform:scale(.99);
	cursor:grabbing;
	touch-action:none;
}
.album-image-img-and-nav.pushing .album-image-nav-prev,
.album-image-img-and-nav.pushing .album-image-nav-next {
	display:none;
}
.album-image-img {
	overflow:hidden;
}

.album-image.loading-prev .album-image-img-wrap-prev > div:first-child::before,
.album-image.loading-next .album-image-img-wrap-next > div:first-child::before {
	font-family:FontAwesome;
	content:'\f1ce'; /* fa-circle-o-notch */
	font-size:4em;
	line-height:1;
	position:absolute;
	top:50%;
	left:50%;
	margin-top:-.5em;
	margin-left:-.5em;
	
	background:transparent;
	color:white;
	text-shadow:
		0 0 3px rgba(0,0,0,1),
		0 0 20px rgba(0,0,0,.3);
	
	opacity:.8;
	
	/* fa-spin */
	-webkit-animation: fa-spin 2s infinite linear;
	animation: fa-spin 2s infinite linear;
}

/************** manga ***************/
/* .album[data-album-style="manga"] */
.album[data-album-bound-right="1"] > .album-thumbs {
	overflow-x:scroll;
	direction:rtl;
	
	flex-wrap:nowrap;
}

.album[data-album-bound-right="1"] > .album-thumbs > * {
	direction:ltr;
}

.album[data-album-bound-right="1"] .album-image-nav-next {
	/* transform:scaleX(-1); */
	left:0; right:auto;
}
.album[data-album-bound-right="1"] .album-image-nav-prev {
	/* transform:scaleX(-1); */
	right:0; left:auto;
}
.album[data-album-bound-right="1"] .album-image-nav-next::before,
.album[data-album-bound-right="1"] .album-image-nav-prev::before {
	transform:scaleX(-1);
}
.album[data-album-bound-right="1"] .album-image-nav-next {
	justify-content:flex-start;
}
.album[data-album-bound-right="1"] .album-image-nav-prev {
	justify-content:flex-end;
}

.album[data-album-bound-right="1"] .album-image-img-wrap-prev {
	right:auto;
	left:100%;
}
.album[data-album-bound-right="1"] .album-image-img-wrap-next {
	left:auto;
	right:100%;
}