@charset "UTF-8";

html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed,figure, figcaption, footer, header, hgroup,menu, nav, output, ruby, section, summary,time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-family: "游ゴシック",YuGothic,"Helvetica","ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "Helvetica Neue", Arial, sans-serif;
	vertical-align: baseline;
	-webkit-font-smoothing: antialiased;
}
html {
	-webkit-text-size-adjust: 100%;
}
body {
	position: relative;
	color:#040001;
	background-color:#fff;
	--fontitem1  : korolev, sans-serif;;
	--fontitem2  : source-han-sans-japanese, sans-serif;
}
a {
	text-decoration:none;
	outline:none;
	color:#000;
	overflow-wrap: break-word;
}
a:hover {
	color:#000;
}
a:focus,a:visited {
	outline:none;
	color:#000;
}
img {
	width: 100%;
	height: auto;
	border:none;
	vertical-align:bottom;
}
li {
	list-style:none;
}
iframe {
	display:block;
}
::selection {
	background-color:#cdcdcd;
}
::-moz-selection {
	background-color:#cdcdcd;
}

/* -------------------------------------------------------------------------- */
/* -- other -- */
#Loading {
	position:fixed;
	z-index:1000;
}
#Loading p {
	position:fixed;
	height:100%;
	top:0;
}
#Loading p.item1 {
	left:0;
	width:100%;
	background-image: url("../img/logo.svg");
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 200px auto;
	background-color:#fff;
}
#Loading p.item2 {
	left:0;
	width: 0;
	background-color: #000;
}
#Loading p.item2.animate {
	animation:loading .6s both;
}
@keyframes loading {
    0% {
		width: 0;
    }
    100% {
		width: 100%;
    }
}
#Loading p.item2.animate2 {
	left: auto;
	right: 0;
	animation:loading2 .6s both;
	animation-delay: .1s;
}
@keyframes loading2 {
    0% {
		width: 100%;
    }
    100% {
		width: 0;
    }
}
.opa {
	opacity: 1;
	transition: all 180ms 0s ease-out;
}
.opa:hover,.opa:focus {
	opacity: .4;
}
.center {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}
.fontFamily1,.fontFamily1 * {
	font-family: var(--fontitem1);
	font-weight: 500;
}
.fontFamily2,.fontFamily2 * {
	font-family: var(--fontitem2);
}
.floatArea {
	letter-spacing: -.4em;
}
.floatArea>* {
	display:inline-block;
	letter-spacing: normal;
	vertical-align:top;
	*display: inline;
	*zoom: 1;
}
.protect {
	position: relative;
}
.protect::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: transparent;
}
ul.listitem {
	position: relative;
	padding-left: 1.1em;
}
ul.listitem>li::before {
	position: absolute;
	left: 0;
	top: 0;
}
ul.list1>li::before {
	content: '※';
}
ul.list2>li::before {
	content: '・';
}

.movieitem .youtube {
	aspect-ratio: 16 / 9;
	background-position: 0 0;
	background-repeat: no-repeat;
	background-size: cover;
}
.movieitem .youtube iframe {
	width: 100%;
	height: 100%;
}


/* -------------------------------------------------------------------------- */
/* -- #sns -- */
#sns {
	position: fixed;
	z-index: 99;
	left: 0;
	top: 0;
	box-sizing: border-box;
	width: 100%;
	padding-top: .8em;
}
#sns li {
	margin-left: 1em;
	width: 1.5em;
}
#sns li a {
	display: block;
}

/* -------------------------------------------------------------------------- */
/* -- .menuBtn -- */
.menuBtn {
	position: fixed;
	z-index: 100;
}
.menuBtn span {
	position: absolute;
	display: inline-block;
	box-sizing: border-box;
	left: 0;
	width: 100%;
	height: 2px;
	background-color: #000;
	transition: all .4s;
}
.menuBtn span:first-of-type {
	top: 0;
}
.menuBtn span:nth-of-type(2) {
	bottom: 0;
}


/* -------------------------------------------------------------------------- */
/* -- nav -- */
nav {
	position: fixed;
	z-index: 98;
	top: 0;
	height: 100vh;
	background-color: #000;
}
nav ul {
	position: relative;
	padding-top: 4em;
}
nav ul li {
	margin-top: 1.4em;
	margin-left: .5em;
}
nav li a {
	position: relative;
	display: inline-block;
	padding: .3em 0 .2em;
	line-height: 1em;
	letter-spacing: .1em;
	font-family: var(--fontitem1);
	font-size: 1.6em;
	color: #fff !important;
}
	nav li a::after {
		content: '';
		position: absolute;
		left: 0;
		bottom: 0;
		width: 0;
		height: 1px;
		background-color: #fff;
	}
	nav li a:hover::after,
	nav li a:focus::after {
		width: 100%;
		transition: all 180ms 0s ease-out;
	}

/* -------------------------------------------------------------------------- */
/* -- header -- */
header {
	position: relative;
	opacity: 0;
}
.indexParts header h1 {
	max-width: 400px;
	margin: auto;
}
.otherParts header h1 a {
	display: block;
}

/* -------------------------------------------------------------------------- */
/* -- main -- */
main {
	overflow-x: hidden;
	position: relative;
	opacity: 0;
}
main>* {
	position: relative;
	z-index: 10;
}
.indexParts main article {
	opacity: 0;
}
main h2.mtitle {
	line-height: 1em;
	letter-spacing: .1em;
	text-align: center;
	font-size: 2.4em;
	font-family: var(--fontitem1);
	font-weight: 500;
}
.indexParts main h2.mtitle.moveitem {
	letter-spacing: .4em;
	animation:movetxt .6s both;
}
@keyframes movetxt {
    0% {
		letter-spacing: .4em;
    }
    100% {
		letter-spacing: .1em;
    }
}
/* .otheranime */
.otherParts .otheranime {
	position: relative;
	top: 1em;
	opacity: 0;
}

/* -------------------------------------------------------------------------- */
/* -- .allbtn , .backbtn -- */
main .allbtn {
	width: 7em;
	margin-top: 1.5em;
	margin-left: calc(100% - 7em);
}
main .backbtn {
	width: 7em;
	margin-top: 1.5em;
}
main .allbtn a,main .backbtn a {
	position: relative;
	top: 0;
	display: block;
	text-align: center;
	letter-spacing: .1em;
	font-family: var(--fontitem1);
	font-weight: 500;
	border-bottom: #000 1px solid;
	transition: all 180ms 0s ease-out;
}
	main .allbtn a:hover,main .backbtn a:hover {
		top: .2em;
	}


/* -------------------------------------------------------------------------- */
/* -- .backimg -- */
main .backimg>* {
	position: absolute;
	opacity: 0;
}
/*main .backimg>*:nth-of-type(-n+2) {
	opacity: 1;
}*/

/* -------------------------------------------------------------------------- */
/* -- .otherback -- */
main .otherback {
	background-image: url("https://cros-sing.jp/wp/wp-content/themes/crossing/img/other_back.svg");
	background-repeat: no-repeat;
}

/* -------------------------------------------------------------------------- */
/* -- .indexParts -- */
.indexParts .catchArea {
	position: relative;
}
.indexParts .catchArea p {
	position: relative;
	top: .6em;
	opacity: 0;
	line-height: 3em;
	letter-spacing: .1em;
	font-size: 1.3em;
}

/* -------------------------------------------------------------------------- */
/* -- .movieItem -- */
main .movieItem {
	position: relative;
}
main .movieItem>div {
	box-sizing: border-box;
	position: relative;
	z-index: 5;
	height: 0;
	padding-top: 54.25%;
	background-color: var(--coloritem3);
}
main .movieItem>div iframe {
	position: absolute;
	top: 0;
	right: 0;
	width: 100% !important;
	height: 100% !important;
}

/* -------------------------------------------------------------------------- */
/* -- #movieArea -- */
.indexParts #movieArea h2 {
	position: absolute;
	right: 0;
	top: 4em;
	padding: 1em 2em;
	font-family: var(--fontitem1);
	font-size: 1.4em;
	font-weight: 500;
	border: #000 1px solid;
}
.indexParts #movieArea .movieItem {
	opacity: 0;
	top: .6em;
}
	.indexParts #movieArea .movieItem::before {
		content: '';
		position: absolute;
		z-index: 10000;
		right: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background-color: #000;
	}
	.indexParts #movieArea .movieItem.moveitem::before {
		animation:moveitem .8s both;
	}
	@keyframes moveitem {
		0% {
			width: 100%;
		}
		100% {
			width: 0;
		}
	}

/* -------------------------------------------------------------------------- */
/* -- #plarlistArea -- */
.indexParts #plarlistArea {
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
}

/* -------------------------------------------------------------------------- */
/* -- #newsArea -- */
#newsArea {
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
}
#newsArea .cont {
	opacity: 0;
	position: relative;
	top: 0;
	left: .5em;
	transition: all 120ms 0s ease-out;
}
.otherParts #newsArea .cont:nth-of-type(-n+4) {
	opacity: 1;
}
	#newsArea .cont:hover,#newsArea .cont:focus {
		top: 4px;
	}
	#newsArea .cont::before {
		content: '';
		position: absolute;
		left: -.7em;
		top: .5em;
		width: 2.6em;
		height: 1px;
		background-color: #000;
		transform: rotate(-45deg);
	}
#newsArea .cont a {
	display: block;
	padding: 1em 1em 2em;
	background-color: rgba(255,255,255,.8);
	border-left: #000 1px solid;
	border-top: #000 1px solid;
	border-bottom: #000 1px solid;
}
#newsArea .cont h4 {
	letter-spacing: .1em;
	font-family: var(--fontitem1);
	font-size: .8em;
	font-weight: 500;
}
#newsArea .cont h3 {
	letter-spacing: .1em;
	font-family: var(--fontitem2);
	font-size: 1em;
	font-weight: 500;
}
#newsArea .cont .morebtn {
	position: absolute;
	right: 1em;
	bottom: 0;
	width: 2em;
	height: 2em;
	transition: all 180ms 0s ease-out;
}
	#newsArea .cont:hover .morebtn,
	#newsArea .cont:focus .morebtn {
		right: .1em;
	}
	#newsArea .cont .morebtn::before,
	#newsArea .cont .morebtn::after {
		content: '';
		position: absolute;
		height: 1px;
		background-color: #000;
	}
	#newsArea .cont .morebtn::before {
		top: 60%;
		width: 2em;
	}
	#newsArea .cont .morebtn::after {
		right: -2%;
		top: 40%;
		width: 1em;
		transform: rotate(45deg);
	}

/* -------------------------------------------------------------------------- */
/* -- #discArea -- */
.indexParts #discArea .slider {
	margin-top: 1em;
	padding-bottom: 3em;
}
.indexParts #discArea .slider li a {
	position: relative;
	top: 0;
	display: block;
	box-sizing: border-box;
	margin: auto 1.5em;
	border: #000 1px solid;
	transition: all 180ms 0s ease-out;
}
	.indexParts #discArea .slider li a:hover,
	.indexParts #discArea .slider li a:focus {
		top: .3em;
		opacity: .6;
	}
#discArea .slick-arrow {
	box-sizing: border-box;
	position: absolute;
	z-index: 10;
	width: 2.4em;
	height: 2.4em;
	background-color: #fff;
	border: #000 1px solid;
	border-radius: 50%;
}
	#discArea .slick-arrow::before {
		content: '';
		position: absolute;
		width: .3em;
		height: .3em;
		background-color: #000;
		border-radius: 50%;
	}

/* -------------------------------------------------------------------------- */
/* -- footer -- */
footer {
	opacity: 0;
	padding: 3em 0 3.5em;
	color: #fff;
	background-color: #000;
}
.indexParts footer {
	margin-top: 10em;
}
footer small {
	display: block;
	margin-top: 5em;
	text-align: center;
	font-family: var(--fontitem2);
	font-size: .8em;
	font-weight: 500;
}
footer .linkitem li {
	position: relative;
	box-sizing: border-box;
	border: #fff 1px solid;
}
	footer .linkitem li::before {
		content: '';
		position: absolute;
		left: 0;
		top: 0;
		width: 0;
		height: 100%;
		background-color: #fff;
		transition: all 220ms 0s ease-out;
	}
	footer .linkitem li:hover::before {
		width: 100%;
	}
footer .linkitem li a {
	position: relative;
	display: block;
	padding: 1.5em 0 1.5em 18%;
	font-size: .9em;
	color: #fff;
	background-position: 5% center;
	background-repeat: no-repeat;
	background-size: auto 50%;
}
	footer .linkitem li a:hover {
		color: #000;
	}
	footer .linkitem li a::after {
		content: '';
		position: absolute;
		right: 3%;
		top: 48%;
		width: 7%;
		height: 1px;
		background-color: #fff;
		transition: all 220ms 0s ease-out;
	}
	footer .linkitem li a:hover::after {
		right: 0;
		background-color: #000;
	}
footer .linkitem li.yt a {
	background-image: url("https://cros-sing.jp/wp/wp-content/themes/crossing/img/icon_yt_w.svg");
}
	footer .linkitem li.yt:hover a {
		background-image: url("https://cros-sing.jp/wp/wp-content/themes/crossing/img/icon_yt.svg");
	}
footer .linkitem li.twi a {
	background-image: url("https://cros-sing.jp/wp/wp-content/themes/crossing/img/icon_twi_w.svg");
}
	footer .linkitem li.twi:hover a {
		background-image: url("https://cros-sing.jp/wp/wp-content/themes/crossing/img/icon_twi.svg");
	}
footer .linkitem li.tik a {
	background-image: url("https://cros-sing.jp/wp/wp-content/themes/crossing/img/icon_tik_w.svg");
}
	footer .linkitem li.tik:hover a {
		background-image: url("https://cros-sing.jp/wp/wp-content/themes/crossing/img/icon_tik.svg");
	}
footer .linkitem li.fire a {
	background-image: url("https://cros-sing.jp/wp/wp-content/themes/crossing/img/icon_fire_w.svg");
}
	footer .linkitem li.fire:hover a {
		background-image: url("https://cros-sing.jp/wp/wp-content/themes/crossing/img/icon_fire.svg");
	}


/* min-width 769px */
/* -------------------------------------------------------------------------- */
@media screen and (min-width: 769px) {
body {
	line-height: 1.5em;
	font-size: .98rem;
}
.margin05 {
	margin-top: .5rem;
}
.margin1 {
	margin-top: 1rem;
}
.margin2 {
	margin-top: 2rem;
}
.margin3 {
	margin-top: 3rem;
}
.pcBlock {
	display: block;
}
.pcNoneBlock {
	display: none;
}
/* .menuBtn */
.menuBtn {
	right: 1em;
	top: 1em;
	width: 4em;
	height: .4em;
}
.menuBtn.active span:first-of-type {
	background-color: #fff;
	transform: translateY(.15em) rotate(-10deg);
}
.menuBtn.active span:nth-of-type(2) {
	background-color: #fff;
	transform: translateY(-.15em) rotate(10deg);
}
/* nav */
nav {
	width: 20vw;
	right: -20vw;
}
/* main */
.indexParts main article {
	margin-top: 9em;
}
.otherParts main article {
	margin-top: 3em;
}
main .allbtn a {
	font-size: 1.2em;
}
/* .indexParts header */
.indexParts header {
	padding: 4em 0 6em;
}
/* .indexParts header h1 {
	position: absolute;
	left: 0;
	right: 0;
	top: 15vh;
} */
.otherParts header {
	padding: 3em 0;
}
.otherParts header h1 {
	width: 240px;
	margin: auto;
}
/* .indexParts .backimg */
.indexParts main .back1 {
	right: 10vw;
	top: 0;
	width: 40vw;
}
.indexParts main .back2 {
	left: 20vw;
	top: 3vw;
	width: 5vw;
}
.indexParts main .back3 {
	left: 5vw;
	top: 34vw;
	width: 26vw;
}
.indexParts main .back4 {
	right: 0vw;
	top: 44vw;
	width: 26vw;
}
.indexParts main .back5 {
	left: 30vw;
	top: 70vw;
	width: 10vw;
}
.indexParts main .back6 {
	left: 14vw;
	top: 110vw;
	width: 6vw;
}
.indexParts main .back7 {
	right: 20vw;
	top: 130vw;
	width: 30vw;
}
/* .otherback */
main .otherback {
	background-position: center 3em;
	background-size: 60% auto;
}
/* .indexParts #movieArea */
.indexParts #movieArea {
	max-width: 900px;
	margin: 7em auto 0;
}
.indexParts #movieArea .movieItem {
	width: 70%;
	margin-top: 2em;
}
.indexParts #movieArea .movieItem:nth-of-type(even) {
	margin-left: 30%;
}
/* #newsArea */
#newsArea { margin-bottom: 4em; }
#newsArea .cont {
	margin-top: 1em;
	border-right: #000 1px solid;
}
#newsArea .cont:first-of-type {
	margin-top: 1em;
}
/* .indexParts #discArea */
#discArea .slick-next {
	bottom: 0;
	left: 5vw;
}
	#discArea .slick-next::before {
		left: .3em;
	}
#discArea .slick-prev {
	bottom: 0;
	right: 5vw;
}
	#discArea .slick-prev::before {
		right: .3em;
	}
#discArea .allbtn {
	margin-left: auto !important;
	margin-right: auto !important;
}
/* footer */
footer .linkitem {
	max-width: 800px;
	margin: auto;
}
footer .linkitem li {
	width: calc(calc(100% / 2) - .5em);
	margin-top: .5em;
}
footer .linkitem li:nth-child(odd) {
	margin-right: .5em;
}
}


/* max-width 768px */
/* -------------------------------------------------------------------------- */
@media screen and (max-width: 768px) {
body {
	line-height: 1.5em;
	font-size: 14px;
}
.margin05 {
	margin-top: 2%;
}
.margin1 {
	margin-top: 4%;
}
.margin2 {
	margin-top: 7%;
}
.margin3 {
	margin-top: 10%;
}
.spBlock {
	display: block;
}
.spNoneBlock {
	display: none;
}
#Loading p.item1 {
	background-size: 40vw auto;
}
/* #sns */
#sns li {
	width: 7vw;
}
/* .menuBtn */
.menuBtn {
	right: 3vw;
	top: 4vw;
	width: 12vw;
	height: 2vw;
}
.menuBtn.active span:first-of-type {
	background-color: #fff;
	transform: translateY(.73vw) rotate(-10deg);
}
.menuBtn.active span:nth-of-type(2) {
	background-color: #fff;
	transform: translateY(-.73vw) rotate(10deg);
}
/* nav */
nav {
	width: 70vw;
	right: -70vw;
}
nav ul li {
	margin-left: 4vw;
}
/* main */
.indexParts main article {
	margin-top: 20vw;
}
.otherParts main article {
	margin-top: 4vw;
}
main h2.mtitle {
	font-size: 2em;
}
main .allbtn {
	margin-top: 4vw;
}
/* .indexParts header */
.indexParts header {
	padding: 20vw 0;
}
.indexParts header h1 {
    width: 60vw;
    margin: auto;
}
/* .indexParts header h1 {
	position: absolute;
	left: 0;
	right: 0;
	top: 26vh;
	width: 64vw;
} */
.otherParts header {
	padding: 18vw 0 10vw;
}
.otherParts header h1 {
	width: 40%;
	margin: auto;
}
/* .indexParts .backimg */
.indexParts main .back1 {
	right: -5vw;
	top: -4vw;
	width: 100vw;
}
.indexParts main .back2 {
	left: -1vw;
	top: 10vw;
	width: 16vw;
}
.indexParts main .back3 {
	left: -5vw;
	top: 100vw;
	width: 70vw;
}
.indexParts main .back4 {
	right: -6vw;
	top: 140vw;
	width: 70vw;
}
.indexParts main .back5 {
	left: 10vw;
	top: 200vw;
	width: 18vw;
}
.indexParts main .back6 {
	left: -1vw;
	top: 260vw;
	width: 20vw;
}
.indexParts main .back7 {
	right: 0;
	top: 280vw;
	width: 100vw;
}
/* .otherback */
main .otherback {
	background-position: left 24vw;
	background-size: 100% auto;
}
/* .catchArea */
.indexParts .catchArea p {
	position: relative;
	line-height: 3em;
	letter-spacing: .06em;
	font-size: 1em;
}
/* .indexParts #movieArea */
.indexParts #movieArea {
	margin: 16vw 3vw 0;
}
.indexParts #movieArea h2 {
	right: 2vw;
	top: 8vw;
	padding: 2vw 4vw;
	font-size: 1.2em;
}
.indexParts #movieArea .movieItem {
	width: 70%;
	margin-top: 4vw;
}
.indexParts #movieArea .movieItem:nth-of-type(even) {
	margin-left: 30%;
}
/* .indexParts #plarlistArea */
.indexParts #plarlistArea {
	width: 80vw;
}
/* #newsArea */
#newsArea { margin-bottom: 10vw; }
#newsArea .cont {
	margin-top: 3vw;
	margin-left: 5vw;
}
#newsArea .cont:first-of-type {
	margin-top: 4vw;
}
/* .indexParts #discArea */
.indexParts #discArea .slider li a {
	margin: auto 3vw;
}
#discArea .slick-next {
	bottom: 0;
	left: 5vw;
}
	#discArea .slick-next::before {
		left: 1vw;
	}
#discArea .slick-prev {
	bottom: 0;
	right: 5vw;
}
	#discArea .slick-prev::before {
		right: 1vw;
	}
/* footer */
footer {
	padding: 4vw 5vw 8vw;
}
.indexParts footer {
	margin-top: 24vw;
}
footer small {
	margin-top: 12vw;
}
footer .linkitem li {
	width: 100%;
	margin-top: 2vw;
}
footer .linkitem li a {
	padding: 4vw 0 4vw 18%;
}

}

/* -------------------------------------------------------------------------- */
/* NEWS */
/* -------------------------------------------------------------------------- */
/* -- #pager -- */
#pager {
	position: relative;
	margin-top: 3em;
	text-align: center;
	/*letter-spacing: -.4em;*/
}
#pager * {
	display: inline-block;
	padding: .2em .5em;
	text-decoration: none;
	font-size: 1.1em;
}
#pager span.current {
	color: #000;
	background-color: #fff;
	
}
/* -- #newsDetail -- */
#pager,#newsDetail {
	padding-bottom: 7em;
}
#newsDetail {
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
}
#newsDetail .detailarea {
	margin-top: 1.5em;
}
#newsDetail .detailarea h3 {
	line-height: 1.8em;
	letter-spacing: .06em;
	font-family: var(--fontitem2);
	font-weight: 600;
	font-size: 1.6em;
}
#newsDetail .detailarea h4 {
	letter-spacing: .06em;
	font-family: var(--fontitem1);
	font-weight: 500;
	font-size: 1em;
}
#newsDetail .detailarea .txtarea {
	margin-top: 1.5em;
	line-height: 1.8em;
}
#newsDetail .detailarea .txtarea p {
	margin-top: 1.5em;
}
#newsDetail .detailarea .txtarea img {
	width: auto;
	max-width: 100%;
	height: auto;
}
#newsDetail .detailarea .movieitem {
	width: 100%;
}
#newsDetail .detailarea  a {
	text-decoration: underline;
	transition: all 180ms 0s ease-out;
}
#newsDetail .detailarea  a:hover {
	text-decoration: none;
	background-color: #E3E3E3;
}
/* max-width 768px */
@media screen and (max-width: 768px) {
#pager,#newsDetail {
	padding-bottom: 24vw;
}
#newsDetail .detailarea {
	margin-left: 5vw;
	margin-right: 5vw;
}
}


/* -------------------------------------------------------------------------- */
/* DISCOGPAHY */
/* -------------------------------------------------------------------------- */
/* -- #discallArea -- */
#discallArea {}
#discallArea .disclist {
	position: relative;
	box-sizing: border-box;
	max-width: 1000px;
	margin-left: auto;
	margin-right: auto;
	padding-bottom: .4em;
}
#discallArea .disclist li {
	position: relative;
	top: .6em;
	opacity: 0;
}
	#discallArea .disclist li::after {
		content: '';
		position: absolute;
		z-index: 1;
		display: block;
		right: -.4em;
		bottom: -.4em;
		width: 100%;
		height: 100%;
		background-color: rgba(0,0,0,.2);
	}
#discallArea .disclist li p {
	position: relative;
	z-index: 10;
	top: 0;
	left: 0;
	transition: all 180ms 0s ease-out;
}
#discallArea .disclist li p:hover,
#discallArea .disclist li p:focus {	
	left: .2em;
	top: .2em;
}

/* -- #discDetail -- */
#discDetail {
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
}
#discDetail .img {
	box-sizing: border-box;
	max-width: 400px;
	margin: 3em auto 0;
	border: #000 1px solid;
}
#discDetail h3 {
	text-align: center;
	line-height: 1.5em;
	letter-spacing: .1em;
	font-family: var(--fontitem2);
	font-weight: 600;
	font-size: 1.4em;
}

#discDetail .cartbtn {
	position: relative;
	box-sizing: border-box;
	border: #000 1px solid;
}
	#discDetail .cartbtn::before {
		content: '';
		position: absolute;
		left: 0;
		top: 0;
		width: 0;
		height: 100%;
		background-color: #000;
		transition: all 220ms 0s ease-out;
	}
	#discDetail .cartbtn:hover::before {
		width: 100%;
	}
#discDetail .cartbtn {
	max-width: 400px;
	margin: 3em auto 0;
}
#discDetail .cartbtn a {
	position: relative;
	display: block;
	padding: 1em 0;
	text-align: center;
	color: #000;
}
	#discDetail .cartbtn a:hover {
		color: #fff;
	}
	#discDetail .cartbtn a::after {
		content: '';
		position: absolute;
		right: 3%;
		top: 48%;
		width: 7%;
		height: 1px;
		background-color: #000;
		transition: all 220ms 0s ease-out;
	}
	#discDetail .cartbtn a:hover::after {
		right: 0;
		background-color: #fff;
	}
#discDetail .txt {
	margin-top: 3em;
}
#discDetail .txt p {
	margin-top: 1.5em;
}

/* min-width 769px */
@media screen and (min-width: 769px) {
#discallArea,
#discDetail {
	padding-bottom: 7em;
}
#discallArea .disclist li {
	width: calc(calc(100% / 4) - 2%);
	margin-top: 2.5em;
}
#discallArea .disclist li:not(:nth-of-type(4n)) {
	margin-right: calc(8% / 3);
}
#discallArea .disclist li:nth-of-type(-n+4) {
	opacity: 1;
}
#discDetail .movieItem {
	width: 80%;
	margin-left: auto;
	margin-right: auto;
}
}

/* max-width 768px */
@media screen and (max-width: 768px) {
#discallArea,
#discDetail .detailarea {
	padding-left: 5vw;
	padding-right: 5vw;
	padding-bottom: 24vw;
}
#discallArea .disclist li {
	width: 48%;
	margin-top: 6vw;
}
#discallArea .disclist li:nth-of-type(odd) {
	margin-right: 4%;
}
#discallArea .disclist li:nth-of-type(-n+4) {
	opacity: 1;
}
#discDetail .img {
	width: 70%;
}
#discDetail .movieItem {
	width: 95%;
	margin-left: auto;
	margin-right: auto;
}
#discDetail .cartbtn {
	width: 80%;
	margin-top: 6vw;
}

}