/* CSS Document */

.imgbox img {
-webkit-filter: grayscale(100%);
  filter: grayscale(100%);
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
    display: block;
	transition-duration: 0.9s;	/*変化に掛かる時間*/
}
.imgbox img:hover {
  -webkit-filter: grayscale(0);
  filter: grayscale(0);
    transform: scale(1.02);	/*画像の拡大率*/
	transition-duration: 0.9s;	/*変化に掛かる時間*/
}
/* L 594*/

#bg-video{
	position: fixed;
	right: 0;
	bottom: 0;
	min-width: 100%;
	min-height: 100%;
	width: auto;
	height: auto;
	z-index: -100;
	background-repeat: no-repeat;
	background-image: url(../web-works/images/bg_03.jpg);
	background-size: cover;
}

/* ----- グラデーションオーバーレイ ----- */
.wrap{
 height: 100vh;
 background: linear-gradient(-45deg, rgba(4, 114, 124, 0), rgba(17, 66, 99, 0));
}


/* Basic */

html {
		box-sizing: border-box;
	}

	*, *:before, *:after {
		box-sizing: inherit;
	}

body {
    position: relative;
	background-color: #150C07;
	overflow-x: hidden;
	overflow-y: auto;	/*
	background-image: url(images/overlay.png), -moz-linear-gradient(90deg,rgba(0,0,0,0.00) 75%,rgba(0,0,0,0.65) 100%), url("/images/bg.jpg");
	background-image: url(images/overlay.png), -webkit-linear-gradient(90deg,rgba(0,0,0,0.00) 75%,rgba(0,0,0,0.65) 100%), url("/images/bg.jpg");
	background-image: url("images/overlay.png"), -ms-linear-gradient(top, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0.65)), url("/images/bg.jpg");
	background-image: url(images/overlay.png), -o-linear-gradient(90deg,rgba(0,0,0,0.00) 75%,rgba(0,0,0,0.65) 100%), url("/images/bg.jpg");
	background-image: url(images/overlay.png), linear-gradient(top, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0.65)), url("/images/bg.jpg");
	
	*/
	}

body.is-preload *, body.is-preload *:before, body.is-preload *:after {
-moz-animation: none !important;
-webkit-animation: none !important;
-ms-animation: none !important;
animation: none !important;
-moz-transition: none !important;
-webkit-transition: none !important;
-ms-transition: none !important;
transition: none !important;
		}

@media screen and (max-width: 1280px) {

body {
background-attachment: scroll;
}

}

@media screen and (max-width: 736px) {

body {
background-attachment: scroll;
background-size: auto, 100% 100%, 250% auto;
background-repeat: repeat, no-repeat, no-repeat;
background-position: top left, bottom left, 50% 0%;
}

}



/* -------------------------------
Wrapper 
-------------------------------*/

#wrapper {
min-height: 100vh;
display: -moz-flex;
display: -webkit-flex;
display: -ms-flex;
display: flex;
-moz-flex-direction: column;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-moz-justify-content: space-between;
-webkit-justify-content: space-between;
-ms-justify-content: space-between;
justify-content: space-between;
-moz-align-items: center;
-webkit-align-items: center;
-ms-align-items: center;
align-items: center;
-moz-transition: -moz-filter 0.5s ease-in-out;
-webkit-transition: -webkit-filter 0.5s ease-in-out;
-ms-transition: -ms-filter 0.5s ease-in-out;
transition: filter 0.5s ease-in-out;
margin-bottom: -100px;
	}

#wrapper:before {
content: '';
display: block;
		}

body.is-poptrox-visible #wrapper {
-moz-filter: blur(0.25em);
-webkit-filter: blur(0.25em);
-ms-filter: blur(0.25em);
filter: blur(0.25em);
		}

@media screen and (max-width: 736px) {

#wrapper {
min-height: 0;
			}

		}

/*----------------------------
Scroll Zone 
-------------------------------*/

.scrollZone {
position: fixed;
width: 6rem;
height: 100vh;
cursor: -moz-grab;
cursor: -webkit-grab;
cursor: -ms-grab;
cursor: grab;
z-index: 10001;
}

.scrollZone.left {
left: 0;
}

.scrollZone.right {
right: 0;
}

@media screen and (max-width: 736px) {
.scrollZone {
display: none;
}
}


/*----------------------------
 Main
-------------------------------*/
#main {
	-moz-transition: opacity 1s ease-in-out;
	-webkit-transition: opacity 1s ease-in-out;
	-ms-transition: opacity 1s ease-in-out;
	transition: opacity 1s ease-in-out;
	-moz-transition-delay: 0.5s;
	-webkit-transition-delay: 0.5s;
	-ms-transition-delay: 0.5s;
	transition-delay: 0.5s;
	position: relative;
	z-index: 1;
	width: -moz-min-content;
	width: -webkit-min-content;
	width: -ms-min-content;
	width: min-content;
	max-width: 100vw;
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch;
	padding-top: 5px;
	padding-right: 5px;
	padding-bottom: 0px;
	padding-left: 5px;
    margin-bottom: 60px;
	}


#main .items {
display: -moz-flex;
display: -webkit-flex;
display: -ms-flex;
display: flex;
}

#main .items > :last-child {
border-right: solid 10px #000000;
}

#main .item {
-moz-flex-grow: 0;
-webkit-flex-grow: 0;
-ms-flex-grow: 0;
flex-grow: 0;
-moz-flex-shrink: 0;
-webkit-flex-shrink: 0;
-ms-flex-shrink: 0;
flex-shrink: 0;
margin: 5px;
min-height: 8em;
box-shadow: 0 0 0 10px #000000;
}

#main .item.span-1 {
    width: 28em;
			}

#main .item.span-2 {
    width: 30em;
			}
#main .item.span-3 {
    width: 10em;
			}

#main .item.intro {
	display: -moz-flex;
	display: -webkit-flex;
	display: -ms-flex;
	display: flex;
	-moz-flex-direction: column;
	-webkit-flex-direction: column;
	-ms-flex-direction: column;
	flex-direction: column;
	-moz-justify-content: center;
	-webkit-justify-content: center;
	-ms-justify-content: center;
	justify-content: center;
text-align: center;
	padding-right: 2%;
	padding-left: 2%;
	background-color: rgba(0,0,0,0.5);
	color: #FFFFFF;
			}

#main .item.intro h1 {
	font-size: 1.5em;
	font-family: 'Questrial', sans-serif;
	font-family: 'IM Fell English', serif;
	color: #FFFFFF;
    width: 10em;
				}


#main .item.thumb {
    display: block;
    position: relative;
    background: rgba(255, 255, 255, 0.25);
    cursor: default;
			}

#main .item.thumb h2 {
	position: absolute;
	bottom: 0;
	left: 0;
	background: rgba(18, 21, 29, 0.85);
	z-index: 2;
	font-family: 'Questrial', sans-serif;
	font-family: 'IM Fell English', serif;
	font-weight: normal;
	color: #CECECE;
	font-size: 0.88em;
	padding-left: 1em;
	padding-right: 1em;
	padding-top: 0.2em;
	padding-bottom: 0.2em;
				}

/*#main .item.thumb img {
					display: block;
					z-index: 1;
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					-moz-object-fit: cover;
					-webkit-object-fit: cover;
					-ms-object-fit: cover;
					object-fit: cover;
					-moz-object-position: center;
					-webkit-object-position: center;
					-ms-object-position: center;
					object-position: center;
					-moz-transition: opacity 0.75s ease-in-out;
					-webkit-transition: opacity 0.75s ease-in-out;
					-ms-transition: opacity 0.75s ease-in-out;
					transition: opacity 0.75s ease-in-out;
					-moz-transition-delay: 1.25s;
					-webkit-transition-delay: 1.25s;
					-ms-transition-delay: 1.25s;
					transition-delay: 1.25s;
				}

#main .item.thumb.delay-1 img {
					-moz-transition-delay: 1.375s;
					-webkit-transition-delay: 1.375s;
					-ms-transition-delay: 1.375s;
					transition-delay: 1.375s;
				}

				#main .item.thumb.delay-2 img {
					-moz-transition-delay: 1.5s;
					-webkit-transition-delay: 1.5s;
					-ms-transition-delay: 1.5s;
					transition-delay: 1.5s;
				}

				#main .item.thumb.delay-3 img {
					-moz-transition-delay: 1.625s;
					-webkit-transition-delay: 1.625s;
					-ms-transition-delay: 1.625s;
					transition-delay: 1.625s;
				}

				#main .item.thumb.delay-4 img {
					-moz-transition-delay: 1.75s;
					-webkit-transition-delay: 1.75s;
					-ms-transition-delay: 1.75s;
					transition-delay: 1.75s;
				}

				#main .item.thumb.delay-5 img {
					-moz-transition-delay: 1.875s;
					-webkit-transition-delay: 1.875s;
					-ms-transition-delay: 1.875s;
					transition-delay: 1.875s;
				}

				#main .item.thumb.delay-6 img {
					-moz-transition-delay: 2s;
					-webkit-transition-delay: 2s;
					-ms-transition-delay: 2s;
					transition-delay: 2s;
				}*/

body.is-preload 
#main {
    opacity: 0;
		}

body.is-preload 
#main .item.thumb img {
opacity: 0;
			}

/*----------------------------
max-width:1680pxサイズ
-------------------------------*/
@media screen and (max-width: 1680px) {
#wrapper {
margin-bottom: -100px;
	}
#main {
	margin-bottom: 0px;
	}
#main .item {
min-height: 10em;
			}

#main .item.span-1 {
    width: 20em;
			}

#main .item.span-2 {
    width: 30em;
			}
#main .item.span-3 {
    width: 10em;
			}

		}
/*----------------------------
max-width:736pxサイズ
-------------------------------*/
@media screen and (max-width: 736px) {
#main {
width: 100%;
overflow-x: hidden;
overflow-y: auto;
padding: 2.5px;
margin-bottom: 0px;
}

#main .items {
-moz-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-moz-justify-content: center;
-webkit-justify-content: center;
-ms-justify-content: center;
justify-content: center;
}

#main .items > :last-child {
border-right: 0;
}

#main .item {
-moz-flex-grow: 1;
-webkit-flex-grow: 1;
-ms-flex-grow: 1;
flex-grow: 1;
-moz-flex-shrink: 1;
-webkit-flex-shrink: 1;
-ms-flex-shrink: 1;
flex-shrink: 1;
margin: 2.5px;
box-shadow: 0 0 0 5px #000000;
}

#main .item.intro {
width: calc(100vw - 20px) !important;
text-align: center;
height: auto;
padding: 3em;
background-color: #000000;
}

#main .item.intro h1 {
font-size: 1.5em;
}

						

#main .item.thumb h2 {
display: none;
font-family: 'BenchNine', cursive;
}

}

/*----------------------------
max-width:480pxサイズ
-------------------------------*/
@media screen and (max-width: 480px) {
#main {
top: -0px;
margin-bottom: -90px;
}
#main .item {
min-height: 5em;
}


}

/* Header */

@media screen and (max-width: 736px) {
.mv_box {
	width: 100%;
	min-height: none;
	max-width: none;
}
.mv_box_in {
	width: 100%;
	background-image: url(../web-works/images/bg_03.jpg);
	background-size: cover;
	min-height: 400px;
	background-position: center center;
    }
}