/*@import url(https://fonts.googleapis.com/css?family=Quattrocento+Sans);*/
.loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  z-index: 9999;
}

.loading-text {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  text-align: center;
  width: 100%;
  height: 100px;
  line-height: 100px;
}
.loading-text span {
  display: inline-block;
  margin: 0 5px;
  color: #fff;
  /*font-family: "Quattrocento Sans", sans-serif;*/
}
.loading-text span:nth-child(1) {
  -webkit-filter: blur(0px);
          filter: blur(0px);
  -webkit-animation: blur-text 1.5s 0s infinite linear alternate;
          animation: blur-text 1.5s 0s infinite linear alternate;
}
.loading-text span:nth-child(2) {
  -webkit-filter: blur(0px);
          filter: blur(0px);
  -webkit-animation: blur-text 1.5s 0.2s infinite linear alternate;
          animation: blur-text 1.5s 0.2s infinite linear alternate;
}
.loading-text span:nth-child(3) {
  -webkit-filter: blur(0px);
          filter: blur(0px);
  -webkit-animation: blur-text 1.5s 0.4s infinite linear alternate;
          animation: blur-text 1.5s 0.4s infinite linear alternate;
}
.loading-text span:nth-child(4) {
  -webkit-filter: blur(0px);
          filter: blur(0px);
  -webkit-animation: blur-text 1.5s 0.6s infinite linear alternate;
          animation: blur-text 1.5s 0.6s infinite linear alternate;
}
.loading-text span:nth-child(5) {
  -webkit-filter: blur(0px);
          filter: blur(0px);
  -webkit-animation: blur-text 1.5s 0.8s infinite linear alternate;
          animation: blur-text 1.5s 0.8s infinite linear alternate;
}
.loading-text span:nth-child(6) {
  -webkit-filter: blur(0px);
          filter: blur(0px);
  -webkit-animation: blur-text 1.5s 1s infinite linear alternate;
          animation: blur-text 1.5s 1s infinite linear alternate;
}
.loading-text span:nth-child(7) {
  -webkit-filter: blur(0px);
          filter: blur(0px);
  -webkit-animation: blur-text 1.5s 1.2s infinite linear alternate;
          animation: blur-text 1.5s 1.2s infinite linear alternate;
}

@-webkit-keyframes blur-text {
  0% {
    -webkit-filter: blur(0px);
            filter: blur(0px);
  }
  100% {
    -webkit-filter: blur(4px);
            filter: blur(4px);
  }
}

@keyframes blur-text {
  0% {
    -webkit-filter: blur(0px);
            filter: blur(0px);
  }
  100% {
    -webkit-filter: blur(4px);
            filter: blur(4px);
  }
}



#op {
    background: #2d3b01;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    justify-content: center;
    -webkit-justify-content: center;
    align-items: center;
}
footer {
    font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
    font-size: 1em;
    font-weight: 900;
    text-align: center;
}
#op .inBox {
    /*width: 6em;*/
}
body, html {
    font-size: 12px;
    font-family: futura-pt, sans-serif;
    font-weight: 400;
    font-style: normal;
}
header {
    position: relative;
    top: 0;
    left: 0;
	z-index: 103;
}
header button.hamburger {
    transform: scale(.75, .75);
    -webkit-transform: scale(.75, .75);
    /*padding: 3em 1em;*/

    margin-left: 0;
    position: fixed;
    right: 1.75em;
    top: 1em;
}
#itemWrap,#imageWrap{
	width: 50%;
	/*background: #fff;*/
	height: 100vh;
}
#itemWrap li{
	height: 100%;
	/*width: 100%;*/
	background: #fff;
    position: absolute;
    top: 0;

    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    justify-content: center;
   -webkit-justify-content: center;
    align-items: center;
	opacity: 0;
	pointer-events: none;
}
#itemWrap li.show{
	opacity: 1;
	transition: .8s;
	pointer-events: all;
}
#itemWrap{
	position: fixed;
	left: 0;
	top: 0;

}
#imageWrap{
	position: fixed;
	right: 0;
	top: 0;
}

#imageWrap ul li{
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    justify-content: center;
   -webkit-justify-content: center;
    align-items: center;
}

#itemWrap ul li,
#imageWrap ul li{
	/*display: none;*/
}
#itemWrap ul li,
#imageWrap ul li{
    /*display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    justify-content: center;
   -webkit-justify-content: center;
    align-items: center;*/
	height: 100vh;
	width: 50vw;
	/*transform: translate(0, 0);
	-webkit-transform: translate(0, 0);*/
	
}

@media screen and (max-width: 768px) {
	#itemWrap ul li,
	#imageWrap ul li{
		/*display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		justify-content: center;
	   -webkit-justify-content: center;
		align-items: center;*/
		height: 100vh;
		width: 100vw;
		/*transform: translate(0, 0);
		-webkit-transform: translate(0, 0);*/

	}
}
@media screen and (max-width: 768px) {
	#itemWrap ul li,
	#imageWrap ul li{
		/*display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		justify-content: center;
	   -webkit-justify-content: center;
		align-items: center;*/
		height: 0;
		overflow: hidden;
		/*transform: translate(0, 0);
		-webkit-transform: translate(0, 0);*/

	}
}

#itemWrap .content{
	line-height: 1.5em;
    letter-spacing: 0.01em;
	width: 100%;
	margin-top: 1.5em;
	font-size: 0.8em;
}
#itemWrap .content p{
	text-align:justify;
	text-justify : inter-world;
	/*min-width: 90em;*/
}
#itemWrap ul li:nth-child(1){
    background: none;
    width: 50vw;
    text-align: center;
    font-weight: 400;
    color: #000;
    line-height: 2em;
    font-size: 1.5em;
    letter-spacing: 0.1em;
}
#itemWrap ul li:nth-child(1) div{
    font-family: futura-pt, sans-serif;
    font-size: 0.9em;
    font-weight: 500;
    line-height: 1.7;
    color: #242424;
}
#itemWrap ul li dl{
	display:-ms-flexbox;/*--- IE10 ---*/
	display:-webkit-flex;/*--- safari（PC）用 ---*/
	display:flex;
	-ms-flex-wrap:wrap;/*--- IE10用 ---*/
	-webkit-flex-wrap:wrap;/*--- safari（PC）用 ---*/
	flex-wrap:wrap;
	webkit-justify-content: space-between;
	justify-content: space-between;
	flex-wrap: wrap;
	width: 40%;
}
#itemWrap ul li dt{
	display: block;
	width: 100%;
}
#itemWrap ul li dd .content{
	width: 100%;
}
#itemWrap ul li dd a{
    /*background: url(https://jcstore.fs-storage.jp/fs2cabinet/str/str002nbruiser/str002nbruiser-m-01-ll.jpg) center center no-repeat rgba(0,0,0,0.05);*/
    background-blend-mode: multiply;
    background-size: 85% !important;
    width: 100%;
}
#itemWrap ul li dd a:nth-last-of-type(){
	background: none;
	background-blend-mode:normal;
}
#itemWrap ul li dd a img{
	opacity: 0;
	width: 100%;

}
#itemWrap ul li dd a{
	transition: .8s;
}
#itemWrap ul li dd a:hover{
	/*background-size: 86% !important*/
}
#itemWrap ul li dd a{
	display: block;
}
#itemWrap ul li dd{
	width: 49%;
	margin-bottom: 6px;
}
.lazyload{
 opacity: 0;
}
.lazyloaded{
  opacity: 1;
  transition: all 0.5s;
}

#itemWrap ul li dd{
	opacity: 0;
	transition: .8s;
	transform: translate(0, -1em);
	-webkit-transform: translate(0, -1em);
}
#itemWrap ul li dd:hover{
	opacity: 0.5
}
#itemWrap ul li.show dd{
	transform: translate(0, 0);
	-webkit-transform: translate(0, 0);
}
#itemWrap ul li.show dd:nth-of-type(1){
	opacity: 1;
	transition-delay: 0.1s;
}
#itemWrap ul li.show dd:nth-of-type(2){
	opacity: 1;
	transition-delay: 0.2s;
}
#itemWrap ul li.show dd:nth-of-type(3){
	opacity: 1;
	transition-delay: 0.3s;
}
#itemWrap ul li.show dd:nth-of-type(4){
	opacity: 1;
	transition-delay: 0.4s;
}
#itemWrap ul li.show dd:nth-of-type(5){
	opacity: 1;
	transition-delay: 0.5s;
}
#itemWrap ul li.show dd:nth-of-type(6){
	opacity: 1;
	transition-delay: 0.6s;
}
#itemWrap ul li.show dd:nth-of-type(7){
	opacity: 1;
	transition-delay: 0.7s;
}
#imageWrap ul li figure{
	/*transition: .8s;
	opacity: 0;
	transform: translate(10vw, 0);
	-webkit-transform: translate(10vw, 0);*/
}


#imageWrap ul li{/*190222*/
	/*transform: translate(-10vw, 0);
	-webkit-transform: translate(-10vw, 0);*/
	opacity: 0;
	transition-delay: 0.2s;
	height: 100%;
	transition: .8s;
	position: absolute;
	pointer-events: none;
}

#imageWrap ul li.show{/*190222*/
	transform: translate(0, 0);
	-webkit-transform: translate(0, 0);
	opacity: 1;
	transition-delay: 0.2s;
	height: 100%;
	pointer-events: all;
	/*overflow: auto*/
}
@media screen and (max-width: 767px) {
  /* 767px以下用（タブレット／スマートフォン用）の記述 */
	#imageWrap ul li.show{/*190222*/
		overflow: hidden
	}
}


#imageWrap ul li:nth-child(1).show{
	/*transform: translate(-1em, 0);
	-webkit-transform: translate(-1em, 0);*/
}
#imageWrap ul li.show figure{/*190222*/
	transform: translate(0, 0);
	-webkit-transform: translate(0, 0);
	opacity: 1;
	transition-delay: 0.2s;
	/*height: 100%;*/
	
}
#imageWrap ul li:nth-child(1) figure,
#imageWrap ul li:nth-child(2) figure,
#imageWrap ul li:nth-child(6) figure{
	height: auto;
}
#imageWrap ul li figure img{
    max-height: 100%;
    width: auto;
	vertical-align: bottom
}
body.ie #imageWrap ul li figure img{
	width: 50vw;
}

#imageWrap ul li.show figure img{
}
/*#imageWrap ul li:nth-child(1) figure{
	transform: translate(100vw, 0);
	-webkit-transform: translate(100vw, 0);
}*/


header button.hamburger.view{
	opacity: 1;
}
header button.hamburger{
	opacity: 0;
}

#navigation{
	position: absolute;
	bottom: 3em;
	width: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    justify-content: center;
   -webkit-justify-content: center;
    align-items: center;
	z-index: 101;
}
#navigation li{
	opacity: 0;
	transform: translate(0, 2em);
	-webkit-transform: translate(0, 2em);
	transition: .8s;
}
#navigation.view li{
	opacity: 1;
	transform: translate(0, 0);
	-webkit-transform: translate(0, 0);	
}
#navigation.view li:nth-child(2){
	transition-delay: 0.2s;
}
#navigation li:hover{
	opacity: 0.3;
	transform: scale(1.3, 1.3);
	-webkit-transform: scale(1.3, 1.3);
}
@media screen and (max-width: 767px) {
  /* 767px以下用（タブレット／スマートフォン用）の記述 */
	#navigation li:hover{
		opacity: 1;
		transform: scale(1, 1);
		-webkit-transform: scale(1, 1);
	}
}

#navigation li{
	display: table;
	transition: 1s;
	/*transform: scale(1, 1);
	-webkit-transform: scale(1, 1);*/
	margin: 0.5em;
}
#navigation li img{
	width: 5em;
}
#navigation ul{
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    justify-content: center;
   -webkit-justify-content: center;
    align-items: center;
}
/*.hamburger span.bar {
    content: "";
    width: 100%;
    height: 1px;
    display: block;
    position: absolute;
    background-color: #000;
    border-radius: 0;
}
.hamburger--criss-cross>.inner::before, .hamburger--criss-cross>.inner::after {
    height: 1px;
}*/
footer {/* test style */
    position: fixed;
    bottom: 1em;
    width: 100%;
    font-family: futura-pt, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 0.9em;
    color: #c3c3c3;
	z-index: 1
}
#menuBox {
    display: none;
}
#eventLoader {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    justify-content: center;
    -webkit-justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
	z-index: 1111111;
}
#eventLoader.end {
    opacity: 0;
    transition: .8s;
    pointer-events: none;
}
#eventLoader .inBox {
}
#eventLoader .inBox.out{
	display: none;
}
#eventLoader .inBox:nth-child(2) {
	display: none;
}
#eventLoader .inBox:nth-child(2).out{
	display: none;
}
.active {
}
.zopim {/*chat del*/
    display: none !important
}
#op{
	transition: .8s;
}
#op.phase2{
	background: rgba(0,0,0,0);
}
#op.phase2.half{
	/*width: 50%;*/
    -webkit-filter:blur(5px); /* for Google Chrome and Safari*/
    -moz-filter:blur(5px); /* for Firefox */
    -o-filter:blur(5px); /* for Oper */
    -ms-filter:blur(5px); /* for Internet Explorer */
    filter: blur(5px);
	opacity: 0;
}
#op.phase2.half.hide{
	opacity: 0;
	transition: .8s;
	transition-delay: 0.2s;
}
#op .inBox:nth-child(2).out {
	opacity: 0;
	/*transform: translate(0, -20px);
	-webkit-transform: translate(0, -20px);*/
}
#op .inBox:nth-child(2).active {
	width: 15vw;
}
#op .inBox:nth-child(2) {
	display: none;
	overflow: hidden;
	width: 1px;
	transition: .8s;
}
#op .inBox:nth-child(1).out {
	display: none;
}
#op.end{
	pointer-events: none;
}
#op .logo {
	opacity: 0;
	transform: translate(0, 20px);
	-webkit-transform: translate(0, 20px);
	transition: .8s;
}
#op .logo.active {
	opacity: 1;
	transform: translate(0, 0);
	-webkit-transform: translate(0, 0);
	width: 6em;
}
#op .logo.active.out {
	opacity: 0;
	transform: translate(0, -20px);
	-webkit-transform: translate(0, -20px);
}
#op .catchphrase {
	width: 15vw;
	opacity: 0;
	transform: translate(0, 20px);
	-webkit-transform: translate(0, 20px);
	transition: .8s;
	margin: 0 auto;
	
}
#op .catchphrase.active {
	opacity: 1;
	transform: translate(0, 0);
	-webkit-transform: translate(0, 0);
}

/* op mask */
#clipmask .st0 {
    display: none;
    stroke-dasharray: 1500; /* この行を追加 */
    stroke-dashoffset: 1500; /* この行を追加 */
}
#clipmask .st1 {
    display: inline;
    stroke-dasharray: 1500; /* この行を追加 */
    stroke-dashoffset: 1500; /* この行を追加 */
}
#clipmask .st2 {
    fill: none;
    stroke: #FFFFFF;
    stroke-width: 5;
    stroke-linecap: round;
    stroke-miterlimit: 10;
    stroke-dasharray: 1500; /* この行を追加 */
    stroke-dashoffset: 1500; /* この行を追加 */
}
#clipmask .st3 {
    fill: none;
    stroke: #FFFFFF;
    stroke-width: 6;
    stroke-linecap: round;
    stroke-miterlimit: 10;
    stroke-dasharray: 1500; /* この行を追加 */
    stroke-dashoffset: 1500; /* この行を追加 */
}
#mask .st4 {
    fill: none;
    stroke: #FFFFFF;
    stroke-width: 4;
    stroke-miterlimit: 10;
    stroke-dasharray: 1500; /* この行を追加 */
    stroke-dashoffset: 1500; /* この行を追加 */
}
#mask .st5 {
    fill: none;
    stroke: #FFFFFF;
    stroke-width: 5;
    stroke-miterlimit: 10;
    stroke-dasharray: 1500; /* この行を追加 */
    stroke-dashoffset: 1500; /* この行を追加 */
}
#clipmask .st6 {
    fill: none;
    stroke: #FFFFFF;
    stroke-width: 3;
    stroke-miterlimit: 10;
    stroke-dasharray: 1500; /* この行を追加 */
    stroke-dashoffset: 1500; /* この行を追加 */
}
#clipmask .st7 {
    fill: none;
    stroke: #FFFFFF;
    stroke-width: 6;
    stroke-miterlimit: 10;
    stroke-dasharray: 1500; /* この行を追加 */
    stroke-dashoffset: 1500; /* この行を追加 */
}
#clipmask .st8 {
    fill: none;
    stroke: #FFFFFF;
    stroke-width: 10;
    stroke-linecap: round;
    stroke-miterlimit: 10;
    stroke-dasharray: 1500; /* この行を追加 */
    stroke-dashoffset: 1500; /* この行を追加 */
}
#clipmask .st9 {
    fill: none;
    stroke: #FFFFFF;
    stroke-width: 2.7;
    stroke-miterlimit: 10;
    stroke-dasharray: 1500; /* この行を追加 */
    stroke-dashoffset: 1500; /* この行を追加 */
}
#clipmask .st10 {
    fill: none;
    stroke: #FFFFFF;
    stroke-width: 5;
    stroke-linecap: square;
    stroke-miterlimit: 10;
    stroke-dasharray: 1500; /* この行を追加 */
    stroke-dashoffset: 1500; /* この行を追加 */
}

/* menu iamge Box */

#container {
	display: none;
	background: #fff;
	width: calc(100% - 150px) !important;
	margin: 0 auto;
	padding-top:5.5em;
	padding-bottom:5.5em;
	position: relative;
	z-index: 100;
}

@media screen and (max-width: 600px) {
	#container {
		width: calc(90%) !important	
	}
}
#container.active {
	display: block;
}
#container .item {
    /*display: none;*/
    width: 33.3333333% !important;
    float: left;
    position: relative;
}
#container .item {
	overflow: hidden;
	opacity: 0;
	transition: .8s;
	-webkit-overflow-scrolling: touch;
}
#container .item.active {
	opacity: 1;
}

#container.active .item:hover img{
	transform: scale(1.05, 1.05);
	-webkit-transform: scale(1.05, 1.05);
}
@media screen and (max-width: 640px) {
	#container .item {
		/*display: none;*/
		width: 100% !important;/*50*/
		float: left;
		position: relative;
	}
}
#container.active .item img{
	opacity: 0.7;
	margin-bottom: -1em;
}
#container .item img{
	opacity: 0;
	transition: .8s;
}
#container .item img{
	-webkit-filter: grayscale(100%);
	-moz-filter: grayscale(100%);
	-ms-filter: grayscale(100%);
	-o-filter: grayscale(100%);
	filter: grayscale(100%);
}
#container .item:hover img{
	opacity: 1;
	-webkit-filter: grayscale(0%);
	-moz-filter: grayscale(0%);
	-ms-filter: grayscale(0%);
	-o-filter: grayscale(0%);
	filter: grayscale(0%);
	transition-delay: 0s !important
}

@media screen and (min-width: 767px) {
/* scroll */
/*スクロールバー全体*/
::-webkit-scrollbar {
    width: 10px;
}

/*スクロールバーの軌道*/
::-webkit-scrollbar-track {
  border-radius: 10px;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, .1);
}

/*スクロールバーの動く部分*/
::-webkit-scrollbar-thumb {
  background-color: rgba(50, 50, 50, .3);
  border-radius: 10px;
  box-shadow:0 0 0 1px rgba(255, 255, 255, .3);
}
/* end scroll */
}
.scrollbar{
	width: 100%;
	height: 100vh;
	overflow: auto;
	transition: .8s;
	background: #fff;
	position: relative;
	z-index: 102;
	-webkit-overflow-scrolling: touch;
}
.scrollbar.close{
	height: 0px;
}

.scrollbar .inner{
  /*background-image: url("http://lorempixel.com/800/800/");*/
  background-repeat: no-repeat;
  width:100%;
  height:800px;
}
@media screen and (max-width: 768px) {
	#pageWrap{
		/*height: 100vh;*/
	}
	.scrollbar{
		position:fixed;
	}
	#navigation {
		position: fixed;
		margin-bottom:0; /*3em;*/
		margin-top: 0;/*1em;*/
		bottom: 50%;
		/* height: 100vh; */
	}
}
@media screen and (max-width: 768px) {
	#itemWrap ul li:nth-child(1){
		margin: 0 auto;
	}
	#itemWrap, #imageWrap {
		width: 100%;
		/* background: #fff; */
		height: 100vh;
		position: inherit !important;
		height: auto;
	}
	#navigation ul {
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		justify-content: center;
		-webkit-justify-content: center;
		align-items: center;
		-webkit-box-pack: justify;
		-ms-flex-pack: justify;
		justify-content: space-between;
		width: 100%;
	}
	#navigation li img {
		width: 3em;
	}
	#navigation{
		/*position: inherit;*/
		margin-bottom: 0;
		margin-top: 0;
	}
	#op .inBox:nth-child(2).active,
	#op .catchphrase{
		width: 50vw;
	}
	#itemWrap ul li.show, #imageWrap ul li.show{
		height: auto;
	}
	#op.phase2.half{
		width: 100%;
	}
	#itemWrap ul li dl {
		width: 100%;
		margin-top: 0em;
		padding: 3em;
	}
	#pageWrap #imageWrap{
		order: 0;
	}
	#pageWrap #itemWrap{
		order: 1;
		z-index: 1;
	}
	#pageWrap{
		display:-ms-flexbox;/*--- IE10 ---*/
		display:-webkit-flex;/*--- safari（PC）用 ---*/
		display:flex;
		-ms-flex-wrap:wrap;/*--- IE10用 ---*/
		-webkit-flex-wrap:wrap;/*--- safari（PC）用 ---*/
		flex-wrap:wrap;
		webkit-justify-content: space-between;
		justify-content: space-between;
	}
	#itemWrap li.show,
	#imageWrap ul li.show{
		opacity: 1;
		pointer-events: all;
	}
	#itemWrap li,
	#imageWrap ul li{
		display: block;
		opacity: 0;
		pointer-events: none;
		height: 0;
	}
	#imageWrap ul li,
	#itemWrap li{
		position: inherit;
	}
	#itemWrap ul li:nth-child(1){
		height: 120vh;
		position: fixed;
		width: 100%;
	}

	#itemWrap ul li:not(:nth-child(1)){
		/*height: 60vh;*/
	}
	#itemWrap ul li.show:nth-child(1){
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		justify-content: center;
		-webkit-justify-content: center;
		align-items: center;
		/*height: 60vh;*/
	}
	

	
}