@charset "UTF-8";

/* --------------------------------------------------
2021/09/-- nagai ver.1.0
-------------------------------------------------- */

/* .page-gallery
-------------------------------------------------- */
/* mv */
#mv { overflow: hidden; position: relative; padding-top: 100vw; background-color: #666; }
#mv .logo { z-index: 30; position: absolute; top: 50%; left: 50%; width: 15.833vw; transform: translate(-50%, -50%); }
#mv .logo img { width: 100%; }
#mv .slide { position: absolute; top: 0; left: 0; width: 100%; }
#mv .slide li { z-index: 10; opacity: 0; position: absolute; top: 0; left: 0; width: 100%; background-color: #000; animation: slide_anime 16s 0s infinite; }
#mv .slide li:nth-of-type(1) { animation-delay: 0s; }
#mv .slide li:nth-of-type(2) { animation-delay: 4s; }
#mv .slide li:nth-of-type(3) { animation-delay: 8s; }
#mv .slide li:nth-of-type(4) { animation-delay: 12s; }
#mv .slide li img { width: 100%; height: 100vw; -o-object-fit: cover; object-fit: cover; }
.js-ie11 #mv .slide li img { width: auto; }
#mv .caption { z-index: 30; position: absolute; bottom: 1.666vw; left: 5vw; color: #fff; font-size: 1.388vw; }
@keyframes slide_anime {
	0% { opacity: 0; }
	10% { opacity: 1; }
	25% { opacity: 1; }
	35% { opacity: 0; }
	100% { opacity: 0; }
}
@media screen and (max-width: 767px) {
	.page-gallery #l-main { padding-top: 0; }
	#mv { margin: 0 -5vw; }
}
@media screen and (min-width: 768px) {
	#mv { margin-top: 0.357em; padding-top: 28.301%; }
	#mv .logo { width: 7.075%; }
	#mv .slide li img { height: auto; }
	.js-ie11 #mv .slide li img { width: 100%; }
	#mv .caption { bottom: 0.777em; left: 1.111em; font-size: .9rem; }
}

/* gallery-home */
#gallery-home .title { margin-top: 5vw; }
#gallery-home .maintext { margin-top: 1.666vw; padding-bottom: 10vw; font-size: 4vw; line-height: 1.85; }
@media screen and (min-width: 768px) {
	#gallery-home .title { margin-top: 1.428em; }
	#gallery-home .maintext { margin-top: 0.375em; padding-bottom: 0.875em; font-size: 1.6rem; line-height: 2; }
}

/* .pickup-area */
.pickup-area .ttls { margin-top: 10vw; border-top: solid 1px #ccc; font-size: 5vw; line-height: 2.5; }
.pickup-area .entry + .entry { margin-top: 6.944vw; }
.pickup-area .entry a { display: block; text-decoration: none; }
.pickup-area .entry a .image { transition: all 0.3s ease; }
.pickup-area .entry a:hover .image { opacity: .7; }
.pickup-area .entry h3 { margin: 3.888vw 0 0.277vw; font-size: 4vw; line-height: 1.6; font-weight: 700; }
.pickup-area .entry .period { font-size: 3vw; font-weight: 700; }
.pickup-area .entry a .btn { position: relative; width: 100%; height: 10vw; margin-top: 3.888vw; border: solid 1px #ccc; border-radius: 4px; background-color: #000; color: #fff; font-size: 3.333vw; line-height: 10vw; font-weight: 700; text-align: center; text-decoration: none; transition: all 0.3s ease; }
.pickup-area .entry a:hover .btn { background-color: #fff; color: #000; }
@media screen and (min-width: 768px) {
	.pickup-area .ttls { margin-top: 1.428em; padding-bottom: 0.892em; font-size: 2.8rem; line-height: 2.2; }
	#gallery-next.pickup-area .ttls { margin-top: 2.642em; }
	.pickup-area .entry + .entry { margin-top: 2.5em; }
	.pickup-area .entry h3 { margin: 0.625em 0 0.062em; font-size: 2.4rem; }
	.pickup-area .entry .period { font-size: 1.8rem; }
	.pickup-area .entry a .btn { height: 2.916em; margin-top: 0.416em; font-size: 2.4rem; line-height: 2.916em; }
}

/* #gallery-list */
#gallery-list .ttls { margin-top: 10vw; border-top: solid 1px #ccc; font-size: 5vw; line-height: 2.5; }
#gallery-list .year { position: relative; display: none; min-height: 18.518vw; padding: 0 5vw; }
#gallery-list .year:nth-of-type(2n-1) { background-color: #f2f2f2; }
#gallery-list .year.is-show { display: block; opacity: 0; transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1); }
#gallery-list .year.is-show.is-active { opacity: 1; }
#gallery-list .year h3 { padding-top: 1.388vw; font-size: 5.555vw; line-height: 1.6; font-weight: 700; }
#gallery-list .year .entry-title { display: block; }
#gallery-list .year label,
#gallery-list .year ul li { font-size: 3.518vw; line-height: 1.6; }
#gallery-list .year label .entry-title { overflow: hidden; width: 90vw; white-space: nowrap; text-overflow: ellipsis; }
#gallery-list .is-accordion input { display: none; }
#gallery-list .is-accordion label { position: absolute; top: 0; right: 0; display: block; width: 100%; height: 100%; padding-top: 10vw; cursor: pointer; }
#gallery-list .is-accordion input:checked ~ label { width: 15.277vw; height: 8.333vw; }
#gallery-list .is-accordion label::before,
#gallery-list .is-accordion label::after { content: ''; position: absolute; top: 5.555vw; right: 5.555vw; display: block; width: 4.166vw; height: 0.555vw; border-radius: 1px; background-color: #999; transform-origin: center; transition: transform 0.3s ease; }
#gallery-list .is-accordion label::before { transform: rotate(90deg); }
#gallery-list .is-accordion input:checked ~ label::before { transform: rotate(180deg); }
#gallery-list .is-accordion label .entry-title { display: block; margin: 0 auto; opacity: 1; transition: opacity 0s ease-out .2s; }
#gallery-list .is-accordion input:checked ~ label .entry-title { display: none; opacity: 0; transition: opacity 0s ease-out 0s; }
#gallery-list .is-accordion input:checked ~ ul { margin-bottom: 0.833vw; }
#gallery-list .is-accordion ul li { height: 0; padding-bottom: 0; box-sizing: content-box; opacity: 0; visibility: hidden; transition: height .3s ease-out, padding-bottom .3s ease-out, opacity .2s linear, visibility .2s linear; }
#gallery-list .is-accordion input:checked ~ ul li { height: auto; padding-bottom: 3.611vw; opacity: 1; visibility: visible; transition: all .3s ease-out; }
#gallery-list .no-accordion ul li { padding-bottom: 2.5vw; }
#gallery-list .more button { position: relative; width: 100%; height: 8.333vw; margin-top: 3.333vw; border: solid 1px #ccc; border-radius: 4px; background-color: #000; color: #fff; font-size: 3.333vw; font-weight: 700; text-align: center; transition: all 0.3s ease; }
#gallery-list .more button:hover { background-color: #fff; color: #000; }
@media screen and (max-width: 767px) {
	#gallery-list .list-wrap { margin: 0 -5vw; }
	#gallery-list .more { padding: 0 5vw; }
}
@media screen and (min-width: 768px) {
	#gallery-list .ttls { margin-top: 1.428em; padding-bottom: 0.892em; font-size: 2.8rem; line-height: 2.2; }
	#gallery-list .year { min-height: 5.714em; padding: 0; }
	#gallery-list .year h3 { position: absolute; top: 0; left: 2.358%; padding-top: 0.343em; font-size: 3.2rem; }
	#gallery-list .year ul { padding: 1.785em 6.428em 0 10.428em; }
	#gallery-list .year label,
	#gallery-list .year ul li { font-size: 1.6rem; }
	#gallery-list .year ul li a { display: block; }
	#gallery-list .year label .entry-title { margin: 0; padding-left: 9.125em; width: calc(100% - 4.5em); }
	#gallery-list .year ul li .entry-title { width: 100%; }
	#gallery-list .is-accordion label { width: 100%; height: 100%; padding-top: 1.562em; }
	#gallery-list .is-accordion input:checked ~ label { width: 5.625em; height: 5.625em; }
	#gallery-list .is-accordion label::before,
	#gallery-list .is-accordion label::after { top: 2.25em; right: 2.187em; width: 1.562em; height: 0.25em; }
	#gallery-list .is-accordion input:checked ~ ul { margin-bottom: 0.428em; }
	#gallery-list .is-accordion input:checked ~ ul li { padding-bottom: 2.187em; }
	#gallery-list .more button { height: 2.916em; margin-top: 0.416em; font-size: 2.4rem; }
	#gallery-list .no-accordion ul li { padding-bottom: 0; }
}
@media screen and (min-width: 980px) {
	#gallery-list .pc-show { display: inline; }
}