@charset "UTF-8";





@media screen and (min-width: 769px) {
	
	#index figure {
		position: absolute;
		width: 100%;
		height: 80vh;
		left: 0;
		top: 7.5vh;
		text-align: center;
		background-position: 50% 50%;
		background-repeat: no-repeat;
		background-size: contain;
	}
	
	
	
	
	
	
	#days {
		position: absolute;
		right: 30px;
		top: 29px;
	}
	#days i {
		display: inline-block;
		font-style: normal;
	}
	#days i.dot {
		width: 13px;
		height: 42px;
	}
	#days i.colon {
		position: relative;
		width: 13px;
		height: 42px;
		top: -3.5px;
	}
	#days i.space {
		width: 20px;
	}
	#days i.minus {
		display: none;
	}
	#days i.equal {
		display: none;
	}
	body #days > span {
		display: block;
		text-align: right;
	}
	body #days > * + span {
		margin-top: 4px;
	}
	
	


	
	
	
	#days * {
		color: rgba(0,0,0,0);
	}
	#days .num {
		width: 25px;
		height: 42px;
	}
	#days .n0 {
		background: url(../img/num_pc/0.png) 50% 0 no-repeat;
	}
	#days .n1 {
		background: url(../img/num_pc/1.png) 50% 0 no-repeat;
	}
	#days .n2 {
		background: url(../img/num_pc/2.png) 50% 0 no-repeat;
	}
	#days .n3 {
		background: url(../img/num_pc/3.png) 50% 0 no-repeat;
	}
	#days .n4 {
		background: url(../img/num_pc/4.png) 50% 0 no-repeat;
	}
	#days .n5 {
		background: url(../img/num_pc/5.png) 50% 0 no-repeat;
	}
	#days .n6 {
		background: url(../img/num_pc/6.png) 50% 0 no-repeat;
	}
	#days .n7 {
		background: url(../img/num_pc/7.png) 50% 0 no-repeat;
	}
	#days .n8 {
		background: url(../img/num_pc/8.png) 50% 0 no-repeat;
	}
	#days .n9 {
		background: url(../img/num_pc/9.png) 50% 0 no-repeat;
	}
	#days .colon {
		background: url(../img/num_pc/colon.png) 50% 0 no-repeat;
	}
	#days .dot {
		background: url(../img/num_pc/dot.png) 50% 0 no-repeat;
	}


	
	
	#days-area {
		position: absolute;
		width: 430px;
		height: 130px;
		right: 30px;
		top: 29px;
		z-index: 1000;
		background: rgba(0,0,0,0);
	}
	#days-area a {
		display: block;
		height: 130px;
	}
}













@media screen and (max-width: 768px) {
	
	#index figure {
		position: absolute;
		width: 90%;
		height: calc(100% - 50px - 60px);
		left: 5%;
		top: 50px;
		text-align: center;
		background-position: 50% 50%;
		background-repeat: no-repeat;
		background-size: contain;
	}
	
	
	
	
	#days {
		position: absolute;
		width: calc(100% - 15px);
		right: 15px;
		top: 17px;
		text-align: center;
		white-space: nowrap;
	}
	
	
	#days i {
		display: inline-block;
		font-style: normal;
		width: 11px;
	}
	#days i.dot,
	#days i.colon {
		width: 5.5px;
	}
	#days i.space {
		width: 8px;
	}
	#days i.minus {
		display: none;
	}
	#days i.equal {
		display: none;
	}
	body #days > span {
		display: block;
		text-align: right;
	}
	body #days > * + span {
		margin-top: 2px;
	}
	
	
	
	
	
	
	#days * {
		color: rgba(0,0,0,0);
	}
	#days .num {
		width: 10.5px;
		height: 18.5px;
	}
	#days .n0 {
		background: url(../img/num_sp/0.png) 50% 0 no-repeat;
		background-size: 10px 18px;
	}
	#days .n1 {
		background: url(../img/num_sp/1.png) 50% 0 no-repeat;
		background-size: 10px 18px;
	}
	#days .n2 {
		background: url(../img/num_sp/2.png) 50% 0 no-repeat;
		background-size: 10px 18px;
	}
	#days .n3 {
		background: url(../img/num_sp/3.png) 50% 0 no-repeat;
		background-size: 10px 18px;
	}
	#days .n4 {
		background: url(../img/num_sp/4.png) 50% 0 no-repeat;
		background-size: 10px 18px;
	}
	#days .n5 {
		background: url(../img/num_sp/5.png) 50% 0 no-repeat;
		background-size: 10px 18px;
	}
	#days .n6 {
		background: url(../img/num_sp/6.png) 50% 0 no-repeat;
		background-size: 10px 18px;
	}
	#days .n7 {
		background: url(../img/num_sp/7.png) 50% 0 no-repeat;
		background-size: 10px 18px;
	}
	#days .n8 {
		background: url(../img/num_sp/8.png) 50% 0 no-repeat;
		background-size: 10px 18px;
	}
	#days .n9 {
		background: url(../img/num_sp/9.png) 50% 0 no-repeat;
		background-size: 10px 18px;
	}
	#days .colon {
		background: url(../img/num_sp/colon.png) 50% 0 no-repeat;
		background-size: 10px 18px;
	}
	#days .dot {
		background: url(../img/num_sp/dot.png) 50% 0 no-repeat;
		background-size: 10px 18px;
	}


	
	
	
	
	#days-area {
		position: absolute;
		width: 180px;
		height: 60px;
		right: 15px;
		top: 15px;
		z-index: 1000;
		background: rgba(0,0,0,0);
	}
	#days-area a {
		display: block;
		height: 60px;
	}
}






@media screen and (min-width: 769px) {
	main.sp-mode #index figure.sp {
		display: none;
	}
	
	main.video #index figure,
	main.vimeo #index figure,
	main.layout-b #index figure {
		width: calc(100vw - 40px);
		height: calc(100vh - 40px);
		left: 20px;
		top: 20px;
		overflow: hidden;
	}
	main.layout-c #index figure {
		width: 100vw;
		height: 100vh;
		left: 0;
		top: 0;
		overflow: hidden;
	}
	
	main.video #index figure,
	main.vimeo #index figure {
		position: relative;
		display: block;
	}
	main.video #index figure div,
	main.vimeo #index figure div {
		display: inline;
	}
	
	/*
	main #index video,
	main #index iframe {
		position: absolute;
	}
	html.slim-video main #index video,
	html.slim-video main #index iframe {
		width: calc((100vh - 40px) / 9 * 16);
		height: calc(100vh - 40px);
		top: 0;
		left: 50%;
		
		-ms-transform: translateX(-50%);
		-moz-transform: translateX(-50%);
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
	}
	html.wide-video main #index video,
	html.wide-video main #index iframe {
		width: calc(100vw - 40px);
		height: calc((100vw - 40px) / 16 * 9);
		left: 0;
		top: 50%;
		
		-ms-transform: translateY(-50%);
		-moz-transform: translateY(-50%);
		-webkit-transform: translateY(-50%);
		transform: translateY(-50%);
	}
	
	main.vimeo #index figure span {
		position: absolute;
		display: block;
		width: calc(50% - 40px);
		height: 100%;
		top: 0;
		background: rgba(0,0,0,0);	
	}
	main.vimeo #index figure span:before {
		position: absolute;
		display: block;
		content: "";
		width: 80px;
		height: calc(50vh - 50px);
		background: rgba(0,0,0,0);	
	}
	main.vimeo #index figure span.ex1 {
		left: 0;
	}
	main.vimeo #index figure span.ex2 {
		right: 0;
	}
	main.vimeo #index figure span.ex1:before {
		top: 0;
		right: -80px;
	}
	main.vimeo #index figure span.ex2:before {
		left: -80px;
		bottom: 0;
	}
	*/
	
	
	
	main.layout-b #index figure {
		background-size: cover;
	}
	
	main.layout-c #index figure {
		background-size: cover;
	}
	
	main.layout-d #index figure {
	}
	
	main.layout-e #index figure {
		background-size: 42vw auto;
	}
	
	main.layout-f #index figure {
		background-position: 30px 100%;
		background-size: 50vw auto;
	}
	
	main.layout-g #index figure {
		background-position: calc(100% - 30px) 100%;
		background-size: 50vw auto;
	}
	
	main.layout-h #index figure {
		background-position: 0% 50%;
		background-size: 60vw auto;
	}
	
	main.layout-i #index figure {
		background-position: 100% 50%;
		background-size: 60vw auto;
	}
	
	
	main.layout-j #index figure {
		box-sizing: border-box;
		padding: 6vh 0;
		font-size: 0;
		white-space: nowrap;
	}
	main.layout-j #index figure img {
		width: auto;
		height: 100%;
	}
	main.layout-j #index figure img + img {
		margin-left: 5vh;
	}
}
	
@media screen and (max-width: 768px) {
	main.sp-mode #index figure.pc {
		display: none;
	}
	
	/*
	main.video #index figure,
	*/
	/*
	main.vimeo #index figure,
	main.layout-b #index figure {
		width:  calc(100vw - 24px);
		height: calc(100% - 24px);
		left: 12px;
		top: 12px;
		overflow: hidden;
	}
	main.layout-c #index figure {
		width:  100vw;
		height: 100%;
		left: 0;
		top: 0;
		overflow: hidden;
	}
	
	main.video #index figure {
		width: 100vw;
		height: 56.25vw;
		left: 0;
		top: 50%;
		margin-top: -28.125vw;
	}
	
	main.video #index figure div {
		display: inline;
	}
	main.video #index video {
		position: absolute;
		width: auto;
		height: 100%;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
	}
	
	main.vimeo #index figure div {
		display: inline;
	}
	main.vimeo #index iframe {
		position: absolute;
		width: 100%;
		height: 100%;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
	}
	*/
	
	
	
	
	
	main.layout-b #index figure {
		background-size: cover;
	}
	
	main.layout-c #index figure {
		background-size: cover;
	}
	
	main.layout-d #index figure {
	}
	
	main.layout-e #index figure {
		background-size: 70vw auto;
	}
	
	main.layout-f #index figure {
		width: calc(100% - 30px);
		left: 15px;
		background-position: 0% calc(100% - 30px);
		background-size: 68vw auto;
	}
	
	main.layout-g #index figure {
		width: calc(100% - 30px);
		left: 15px;
		background-position: 100% calc(100% - 30px);
		background-size: 68vw auto;
	}
	
	main.layout-h #index figure {
		width: 100%;
		left: 0;
		background-position: 0% 50%;
		background-size: 79vw auto;
	}
	
	main.layout-i #index figure {
		width: 100%;
		left: 0;
		background-position: 100% 50%;
		background-size: 79vw auto;
	}
	
	
	main.layout-j #index figure {
		width: 90vw;
		font-size: 0;
		white-space: nowrap;
	}
	main.layout-j #index figure:before {
		content: "";
		display: inline-block;
		height: 100%;
		vertical-align: middle;
	}
	main.layout-j #index figure img {
		width: 42.5vw;
		height: auto;
		vertical-align: middle;
	}
	main.layout-j #index figure img + img {
		margin-left: 5vw;
	}
}






@media screen and (min-width: 769px) {
	html.ipad #index figure {
		height: calc(0.8 * var(--zucca-height));
		top: calc(0.075 * var(--zucca-height));
	}
}