@charset "UTF-8";
/*
 *
 * page-gallery.scss
 *
 */
:root {
	--z-index-modal: 10;
	--z-index-archive: 100;
	--z-index-intro: 1000;
}

/* ------------------------------------------------------------
 pg-gallery-intro
------------------------------------------------------------ */
.pg-gallery-intro {
	position: fixed;
	top: 0;
	left: 0;
	z-index: var(--z-index-intro);
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--color-bg);
	opacity: 0;
	visibility: hidden;
	/* ----------------------------------------
	 status
	 判定はJavaScriptで。
	---------------------------------------- */
}

@media screen and (min-width: 561px) {
	.pg-gallery-intro {
		padding-bottom: calc(  (528 - 472) / 2  / var(--design-height-pc) * 100vh);
	}
}

@media screen and (max-width: 560px) {
	.pg-gallery-intro {
		padding-bottom: calc(  (343 - 301) / 2  / var(--design-height-sp) * 100vh);
	}
}

body[data-gallery-type="intro"] .pg-gallery-intro {
	opacity: 1;
	visibility: visible;
	-webkit-animation: hidden 2600ms 5000ms forwards;
	animation: hidden 2600ms 5000ms forwards;
}

body[data-gallery-type="intro"] .pg-gallery-intro .pg-gallery-intro__title {
	-webkit-animation: hidden 1000ms 3200ms forwards;
	animation: hidden 1000ms 3200ms forwards;
}

.pg-gallery-intro__title {
	text-align: center;
	color: rgba(var(--color-black0--rgba), 0.5);
}

.pg-gallery-intro__title__sub {
	letter-spacing: 0.04em;
}

@media screen and (min-width: 561px) {
	.pg-gallery-intro__title__sub {
		font-size: 1.2rem;
		font-size:  max( 1.2rem , 11px ) ;
		margin-bottom: 2rem;
	}
}

@media screen and (max-width: 560px) {
	.pg-gallery-intro__title__sub {
		font-size: 1rem;
		margin-bottom: 1.5rem;
	}
}

.pg-gallery-intro__title__main {
	letter-spacing: 0.3em;
}

@media screen and (min-width: 561px) {
	.pg-gallery-intro__title__main {
		font-size: 2.2rem;
		font-size:  max( 2.2rem , 20px ) ;
	}
}

@media screen and (max-width: 560px) {
	.pg-gallery-intro__title__main {
		font-size: 1.8rem;
		font-size:  max( 1.8rem , 16px ) ;
	}
}

/* ------------------------------------------------------------
 pg-gallery-archive
------------------------------------------------------------ */
.pg-gallery-archive {
	position: relative;
	z-index: var(--z-index-archive);
	opacity: 0;
	/* ----------------------------------------
	 status
	 判定はJavaScriptで。
	 loadが終わるまではopacityで非表示
	---------------------------------------- */
}

body[data-gallery-type=""] .pg-gallery-archive,
body[data-gallery-type="intro"] .pg-gallery-archive,
body[data-gallery-type="modal"] .pg-gallery-archive {
	display: none;
}

body.is-load .pg-gallery-archive,
body.is-pjax-load .pg-gallery-archive {
	opacity: 1;
}

.pg-gallery-archive__list {
	display: flex;
	flex-wrap: wrap;
}

@media screen and (min-width: 561px) {
	.pg-gallery-archive__list li {
		width: calc( 100% / 7);
	}
}

@media screen and (max-width: 560px) {
	.pg-gallery-archive__list li {
		width: calc( 100% / 3);
	}
}

.pg-gallery-archive__list a {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
}

.pg-gallery-archive__list a::before {
	content: '';
	display: block;
	padding-top: 100%;
}

.pg-gallery-archive__list a::after {
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background-color: var(--color-black0);
	opacity: 0;
	transition: opacity var(--transition-hover-slow);
}

.pg-gallery-archive__list a.is-hover:hover::after {
	opacity: .8;
	transition-duration: 200ms;
}

/* ------------------------------------------------------------
 pg-gallery-modal
------------------------------------------------------------ */
.pg-gallery-modal {
	position: fixed;
	top: 0;
	left: 0;
	z-index: var(--z-index-modal);
	width: 100%;
	display: none;
	/* ----------------------------------------
	 status
	 判定はJavaScriptで。
	---------------------------------------- */
}

body[data-gallery-type="intro"] .pg-gallery-modal,
body[data-gallery-type="modal"] .pg-gallery-modal {
	display: block;
}

/* ----------------------------------------
 pg-gallery-modal__figure
---------------------------------------- */
.pg-gallery-modal__figure {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	opacity: 0;
	-webkit-filter: brightness(124%) grayscale(50%);
	filter: brightness(124%) grayscale(50%);
	transition-property: opacity,-webkit-filter;
	transition-property: opacity,filter;
	transition-property: opacity,filter,-webkit-filter;
	transition: var(--transition-gallery-modal-hidden);
}

.pg-gallery-modal__figure.is-visible {
	opacity: 1;
	-webkit-filter: brightness(100%) grayscale(0%);
	filter: brightness(100%) grayscale(0%);
	transition: var(--transition-gallery-modal-visible);
}

.pg-gallery-modal__figure__inner {
	position: relative;
	margin: 0;
}

@media screen and (min-width: 561px) {
	.pg-gallery-modal__figure__inner {
		height: 100%;
	}
}

@media screen and (max-width: 560px) {
	.pg-gallery-modal__figure__inner {
		height: calc( 100% - 18.0rem);
	}
}

/* ----------------------------------------
 pg-gallery-modal__nav
---------------------------------------- */
.pg-gallery-modal__prev,
.pg-gallery-modal__next {
	position: absolute;
	top: 0;
	z-index: 0;
	width: 50%;
	height: 100%;
	cursor: none;
}

.pg-gallery-modal__prev {
	left: 0;
}

.pg-gallery-modal__next {
	right: 0;
}

/* ----------------------------------------
 pg-gallery-modal__info
---------------------------------------- */
.pg-gallery-modal__info {
	position: absolute;
	display: flex;
	flex-direction: column;
	align-items: center;
}

@media screen and (min-width: 561px) {
	.pg-gallery-modal__info {
		right: 2.9rem;
		bottom: 3.5rem;
	}
}

@media screen and (max-width: 560px) {
	.pg-gallery-modal__info {
		right: 2.5rem;
		bottom: 2.3rem;
	}
}

.pg-gallery-modal__status {
	text-align: center;
	color: var(--color-dark-gray);
}

@media screen and (min-width: 561px) {
	.pg-gallery-modal__status {
		font-size: 1.2rem;
		font-size:  max( 1.2rem , 11px ) ;
		margin-bottom: 1.7rem;
	}
}

@media screen and (max-width: 560px) {
	.pg-gallery-modal__status {
		font-size: 1rem;
		margin-bottom: 1.4rem;
	}
}

.pg-gallery-modal__status span {
	display: block;
}

.pg-gallery-modal__status__total {
	border-top: solid 1px var(--color-dark-gray);
}

@media screen and (min-width: 561px) {
	.pg-gallery-modal__status__total {
		padding: 0.7rem 0.1rem 0;
		margin-top: 0.9rem;
	}
}

@media screen and (max-width: 1023px) {
	.pg-gallery-modal__status__total {
		padding: 0.6rem 0.1rem 0;
		margin-top: 0.7rem;
	}
}

.pg-gallery-modal__archive {
	line-height: 0;
}

.pg-gallery-modal__archive a {
	display: block;
	padding: 1rem;
	margin: -1rem;
}

.pg-gallery-modal__archive svg {
	width: 0.7rem;
	height: 0.7rem;
	fill: var(--color-dark-gray);
}