@charset "UTF-8";

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

/* .post-type-archive-collection
-------------------------------------------------- */
/* mv */
#mv { overflow: hidden; position: relative; height: 100vw; }
#mv .logo { z-index: 30; position: absolute; top: 50%; left: 50%; width: 73.888%; transform: translate(-50%, -69%); }
#mv .logo img { width: 100%; }
#mv .slide li { z-index: 10; opacity: 0; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-repeat: no-repeat; background-position: center center; background-size: cover; animation: slide_anime 16s 0s infinite; }
#mv .slide li:nth-of-type(1) { background-image: url("../jpg/main01_sp.jpg"); animation-delay: 0s; }
#mv .slide li:nth-of-type(2) { background-image: url("../jpg/main02_sp.jpg"); animation-delay: 4s; }
#mv .slide li:nth-of-type(3) { background-image: url("../jpg/main03_sp.jpg"); animation-delay: 8s; }
#mv .slide li:nth-of-type(4) { background-image: url("../jpg/main04_sp.jpg"); animation-delay: 12s; }
#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) {
	.post-type-archive-collection #l-main { padding-top: 0; }
	#mv { margin: 0 -5vw; }
}
@media screen and (min-width: 768px) {
	#mv { height: auto; margin-top: 0.357em; padding-top: 28.301%; }
	#mv .logo { width: 31.446%; transform: translate(-50%, -57%); }
	#mv .slide li:nth-of-type(1) { background-image: url("../jpg/main01_pc.jpg"); }
	#mv .slide li:nth-of-type(2) { background-image: url("../jpg/main02_pc.jpg"); }
	#mv .slide li:nth-of-type(3) { background-image: url("../jpg/main03_pc.jpg"); }
	#mv .slide li:nth-of-type(4) { background-image: url("../jpg/main04_pc.jpg"); }
	#mv .caption { bottom: 0.777em; left: 1.111em; font-size: .9rem; }
}

/* collection-home */
#collection-home .title { margin-top: 5vw; }
#collection-home .lead { margin-top: 1.666vw; font-size: 4vw; line-height: 1.85; }
#collection-home .text p:first-child { margin-top: 3.611vw; line-height: 2; font-weight: 700; }
#collection-home .text p + p { margin-top: 0.191em; font-weight: 400; }
@media screen and (min-width: 768px) {
	#collection-home .title { margin-top: 1.428em; }
	#collection-home .lead { margin-top: 0.375em; font-size: 1.6rem; line-height: 2; }
	#collection-home .text p:first-child { margin-top: 1.9em; font-size: 2rem; line-height: 1.6; }
	#collection-home .text p + p { font-size: 1.6rem; font-weight: 500; }
}

/* item-listarea */
.item-listarea .ttls { margin-top: 8.055vw; border-top: solid 1px #ccc; font-size: 5vw; line-height: 2.5; }
.item-listarea .items h3 { width: 100%; margin: -0.556vw 0 -1.945vw; font-size: 3vw; line-height: 1.5; font-weight: 700; }
.item-listarea .items ul + h3 { margin-top: 5vw; }
.item-listarea .items ul { display: flex; flex-wrap: wrap; width: 100%; }
.item-listarea .items li { margin-top: 3.333vw; width: 25%; }
.item-listarea .items li a { position: relative; }
.item-listarea .items li a::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.05); }
.item-listarea .items li a:hover::before { background-color: rgba(0, 0, 0, 0); }
.item-listarea .items li img { width: 100%; }
.item-listarea .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; transition: all 0.3s ease; }
.item-listarea .more button:hover { background-color: #fff; color: #000;}
.item-listarea .note { margin-top: 2.777vw; font-weight: 400; }
#progress.item-listarea .items h3,
#progress.item-listarea .items li { display: none; }
#progress.item-listarea .items h3.is-show,
#progress.item-listarea .items li.is-show { display: block; opacity: 0; transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1); }
#progress.item-listarea .items h3.is-show.is-active,
#progress.item-listarea .items li.is-show.is-active { opacity: 1; }
#original.item-listarea .ttls { margin-top: 9.166vw; }
#original.item-listarea .items h3 { margin: 0.833vw 0 0; font-size: 4vw; font-weight: 500; }
#original.item-listarea .items ul + h3 { margin-top: 10vw; }
#original.item-listarea .items h3 span { display: block; margin-top: 1.388vw; font-size: 2.9vw; font-weight: 400; }
@media screen and (min-width: 768px) {
	.item-listarea .ttls { margin-top: 1.428em; font-size: 2.8rem; line-height: 2.2; }
	.item-listarea .items h3 { margin: 0.625em 0 -0.5em; font-size: 1.6rem; }
	.item-listarea .items ul + h3 { margin-top: 2.125em; }
	.item-listarea .items li { margin-top: 1.714em; width: 12.5%; }
	.item-listarea .more button { height: 2.916em; margin-top: 1em; font-size: 2.4rem; }
	.item-listarea p.note { margin-top: 0.583em; font-size: 1.2rem; }
	#original.item-listarea .ttls { margin-top: 2.428em; }
	#original.item-listarea .items h3 { margin: 0.687em 0 0.187em; font-size: 1.6rem; font-weight: 700; }
	#original.item-listarea .items ul + h3 { margin-top: 2.125em; }
	#original.item-listarea .items h3 span { margin: 0.333em 0 -1.084em; font-size: 1.2rem; }
}

/* #contact */
#contact { padding: 5.555vw 0 1.388vw; }
#contact dl { padding: 2.777vw 3.611vw 3.888vw; border: solid 1px rgba(204, 204, 204, 0.8); border-radius: 4px; font-size: 3vw; line-height: 1.9; }
@media screen and (min-width: 768px) {
	#contact { margin-bottom: -3.143em; padding: 4.857em 0 0; }
	#contact dl { display: inline-block; width: 32.25em; padding: 1.562em 1.812em; font-size: 1.6rem; line-height: 2; }
}

/* .single-collection
-------------------------------------------------- */
/* #modal */
#overlay { display: none; z-index: 500; position: fixed; top: 0; left: 0; width: 100vw; height: 120vh; background-color: rgba(255, 255, 255, 0.01); }
#overlay.is-active { display: block; }
#modal { display: none; overflow: hidden; z-index: 510; position: fixed; top: 0; left: 50%; width: 100vw; max-width: 1056px; height: 100%; box-sizing: border-box; background-color: rgba(240, 240, 240, 0.95); transform: translate3d(-50%, 0, 0); }
#modal * { box-sizing: border-box; }
#modal.is-active { display: block; }
#modal-inner { overflow-x: hidden; overflow-y: auto; z-index: 2; position: absolute; width: 100%; height: 100%; max-height: 100vh; }
#modal-inner.modal-loding::before { position: absolute; content: ''; top: calc(50% - 20px); left: calc(50% - 20px); display: block; width: 40px; height: 40px; background-color: #333; border-radius: 50%; transform-origin: center center; animation: loading_anime .5s infinite ease-in-out; }
#modal #modal-close { z-index: 5; position: absolute; top: 14.444vw; right: 3.055vw; width: 14.444vw; height: 14.444vw; margin-left: auto; border: none; outline: 0; text-indent: -9999px; cursor: pointer; opacity: 1; transition: opacity 0.3s ease; }
#modal #modal-close:hover { opacity: .7; }
#modal #modal-close::before,
#modal #modal-close::after { content: ''; position: absolute; top: calc(50% - 1px); display: block; width: 100%; height: 2px; border-radius: 1px; background-color: #ccc; transform-origin: center; }
#modal #modal-close::before { transform: rotate(45deg); }
#modal #modal-close::after { transform: rotate(-45deg); }
#modal-next,
#modal-prev { z-index: 5; position: absolute; top: 73.888vw; display: block; text-indent: -9999px; }
#collection-item .item-next,
#collection-item .item-prev { position: absolute; bottom: -12.5vw; display: block; text-indent: -9999px; }
#modal-next,
#collection-item .item-next { right: 0; }
#modal-prev,
#collection-item .item-prev { left: 0; }
#modal-next.is-hidden,
#modal-prev.is-hidden { display: none; }
#modal-next a,
#modal-prev a,
#collection-item .item-next a,
#collection-item .item-prev a { display: block; width: 15.833vw; height: 10.833vw; text-decoration: none; }
#modal-next a::before,
#modal-next a::after,
#modal-prev a::before,
#modal-prev a::after,
#collection-item .item-next a::before,
#collection-item .item-next a::after,
#collection-item .item-prev a::before,
#collection-item .item-prev a::after { content: ""; position: absolute; top: 50%; display: block; width: 4.444vw; height: 2px; background: #ccc; opacity: 1; transition: opacity 0.3s ease; }
#modal-next a:hover::before,
#modal-next a:hover::after,
#modal-prev a:hover::before,
#modal-prev a:hover::after { opacity: .7; }
#modal-next a::before,
#collection-item .item-next a::before { left: 25%; transform-origin: right; transform: rotate(57deg); }
#modal-next a::after,
#collection-item .item-next a::after { top: calc(50% - 1px); left: 25%; transform-origin: right; transform: rotate(304deg); }
#modal-prev a::before,
#collection-item .item-prev a::before { right: 25%; transform-origin: left; transform: rotate(304deg); }
#modal-prev a::after,
#collection-item .item-prev a::after { top: calc(50% - 1px); right: 25%; transform-origin: left; transform: rotate(57deg); }
#modal-inner.modalprev #item-frame .item-detail { transform: translateX(-100%); }
#modal-inner.modalprev #item-frame { animation: modalprev 0.5s cubic-bezier(0.4, 0, 0.2, 1); }
@keyframes modalprev {
	0% { transform: translateX(0); }
	100% { transform: translateX(100%); }
}
#modal-inner.modalnext #item-frame .item-detail { transform: translateX(100%); }
#modal-inner.modalnext #item-frame { animation: modalnext 0.5s cubic-bezier(0.4, 0, 0.2, 1); }
@keyframes modalnext {
	0% { transform: translateX(0); }
	100% { transform: translateX(-100%); }
}
#modal-inner #item-frame .item-detail { opacity: 0; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); }
#modal-inner #item-frame .item-detail.is-active { opacity: 1; transform: translateX(0); }
@media screen and (min-width: 768px) {
	#modal { top: 50%; width: calc(100vw - 10%); height: 64.285em; min-height: auto; max-height: calc(100vh - 10%); border-top: 10px solid transparent; border-bottom: 10px solid transparent; transform: translate3d(-50%, -50%, 0); }
	#modal #modal-close { top: -10px; right: 0; width: 5.785em; height: 6.857em; }
	#modal #modal-close::before,
	#modal #modal-close::after { width: 82%; }
	#modal-next,
	#modal-prev { top: 50%; transform: translateY(-50%); }
	#collection-item .item-next,
	#collection-item .item-prev { bottom: -6.429em; }
	#modal-next a,
	#modal-prev a,
	#collection-item .item-next a,
	#collection-item .item-prev a { width: 6.785em; height: 6.428em; }
	#modal-next a::before,
	#modal-next a::after,
	#modal-prev a::before,
	#modal-prev a::after,
	#collection-item .item-next a::before,
	#collection-item .item-next a::after,
	#collection-item .item-prev a::before,
	#collection-item .item-prev a::after { width: 2.357em; height: 0.214em; }
}

/* .item-detail */
.item-detail { margin: 28.796vw 5vw 13.888vw; text-align: left; }
.item-detail .item-photo { position: relative; margin: 0 auto; }
.item-detail .item-photo img { width: 100%; height: auto; }
.item-detail .item-data { margin-top: 4.166vw; font-size: 3vw; line-height: 1.8; }
.item-detail .item-data p + p,
.item-detail .item-data table + table,
.item-detail .item-data p + table { margin-top: 1em; }
.item-detail .item-data table th { font-weight: normal; }
.item-detail .item-spec { margin-top: 1.666vw; }
.item-detail .item-comment { margin-top: 3.333vw; }
#modal .item-prev,
#modal .item-next { display: none; }
@media screen and (min-width: 768px) {
	.item-detail { margin: 1em 7.714em 3.571em; }
	#collection-item .item-detail { margin-bottom: 7.714em; }
	.item-detail .item-data { display: flex; justify-content: space-between; margin-top: 1.142em; font-size: 1.4rem; line-height: 2; }
	.item-detail .item-description,
	.item-detail .item-comment { width: 48.571%; }
	.item-detail .item-spec { margin-top: 0.357em; }
	.item-detail .item-comment { margin-top: 0; }
}