@charset "utf-8";

#loadimg{
	display:none;
}

/* HEADER-NAVI */
header{
	width: 100%;
}
.header1{
	position: relative;
    width: 100%;
    z-index: 20000;
    font-weight: 700;
    font-size: 13px;
    box-sizing: border-box;
}

#barba-wrapper{
	position: relative;
	opacity: 1;
}
.wrap{
	display: block;
	height:107px;
}
.header1 .cocolo-logo{
	margin-left:40px;
	display: block;
	width: 100px;
}
.header1 .cocolo-logo svg{
	width: 50px;
	height: 50px;
	padding: 25px;
}
nav .nav-ol{
	position: absolute;
	right: 130px;
	bottom: 45px;
}
nav .nav-ol .nav{
	display: flex;
	/* font-family: 'Abel', sans-serif; */
	letter-spacing: 0.2em;
	font-weight:normal;
}
nav .nav-ol .nav li{
	position:relative;
}
nav .nav-ol .nav li a{
	padding:40px 15px;
}
nav .nav-ol .nav li a:after{
	content:"";
	display:block;
	position:absolute;
	height:2px;
	width:15px;
	bottom:-10px;
	left:50%;
	opacity:0;
	background:#aaa;
	transform:translateX(-50%);
	-webkit-transition: all ease 0.4s;
    -moz-transition: all ease 0.4s;
    -o-transition: all ease 0.4s;
    -ms-transition: all ease 0.4s;
    transition: all ease 0.4s;
}
nav .nav-ol .nav li a.active{
	color:#90596a;
}
nav .nav-ol .nav li a.active:after{
	content:"";
	display:block;
	position:absolute;
	height:2px;
	width:15px;
	bottom:-5px;
	left:50%;
	opacity:1;
	background:#90596a;
}
nav .nav-ol .nav li a:hover:after{
	bottom:-5px;
	opacity:1;
}
nav .nav-ol .nav li a.active:hover:after{
	bottom:-5px;
	opacity:1;
}
.header1 .nav-sns{
	position: absolute;
    right: 50px;
    display: flex;
    bottom: 45px;
}
@font-face {
  font-family: 'icomoon';
  src:  url('../fonts/sns_icn/icomoondb3d.eot?jsxuni');
  src:  url('../fonts/sns_icn/icomoondb3d.eot?jsxuni#iefix') format('embedded-opentype'),
    url('../fonts/sns_icn/icomoondb3d.ttf?jsxuni') format('truetype'),
    url('../fonts/sns_icn/icomoondb3d.woff?jsxuni') format('woff'),
    url('../fonts/sns_icn/icomoondb3d.svg?jsxuni#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.header1 .icon-facebook:before {
  content: "\ea90";
}
.header1 .icon-instagram:before {
  content: "\ea92";
}
.icon-search:before {
  content: "\e900";
}
.header1 .instagram,
.header1 .facebook{
	width:16px;
	padding: 5px;
	color: #7f7f7f;
	-webkit-transition: all ease 0.4s;
    -moz-transition: all ease 0.4s;
    -o-transition: all ease 0.4s;
    -ms-transition: all ease 0.4s;
    transition: all ease 0.4s;
}
.header1 .instagram:hover,
.header1 .facebook:hover{
	color:#222;
}

/*fade-in header*/
nav .nav-ol,
.header1 .nav-sns{
	opacity: 1;
}
nav .nav-ol.view{
	display:block;
	-webkit-animation: fadeIn-header 1.7s 1 ease forwards;
  	animation: fadeIn-header 1.7s 1 ease forwards;
}
.header1 .nav-sns.view{
	display:flex;
	-webkit-animation: fadeIn-header 1.7s ease forwards;
  	animation: fadeIn-header 1.7s ease forwards;
}

@keyframes fadeIn-header { 
  0% {
    opacity:0;
	transform:translate(-40px,0px);
  }
  10% {
    opacity:0;
	transform:translate(-40px,0px);
  }
  50% { 
    opacity:1;
	transform:translate(0,0px);
  } 
  100% { 
    opacity:1;
	transform:translate(0,0px);
  } 
} 
@-webkit-keyframes fadeIn-header { 
  0% {
    opacity:0;
	transform:translate(-40px,0px);
  }
  10% {
    opacity:0;
	transform:translate(-40px,0px);
  }
  50% { 
    opacity:1;
	transform:translate(0,0px);
  } 
  100% { 
    opacity:1;
	transform:translate(0,0px);
  } 
} 

/* BURGER-NAVI */
.burger-nav {
  display:none;
  position: fixed;
  z-index:10001;
  width: 30px;
  height: 30px;
  top: 35px;
  left: 50px;
  -webkit-transition-duration: 0.5s;
          transition-duration: 0.5s;
}
.burger-nav .icon-left {
  -webkit-transition-duration: 0.5s;
          transition-duration: 0.5s;
  position: absolute;
  height: 1px;
  width: 10px;
  top: 15px;
  left:5px;
  background-color: #333;
}
.burger-nav .icon-left:before {
  -webkit-transition-duration: 0.5s;
          transition-duration: 0.5s;
  position: absolute;
  width: 10px;
  height: 1px;
  background-color: #333;
  content: "";
  top: -8px;
}
.burger-nav .icon-left:after {
  -webkit-transition-duration: 0.5s;
          transition-duration: 0.5s;
  position: absolute;
  width: 10px;
  height: 1px;
  background-color: #333;
  content: "";
  top: 8px;
}
.burger-nav .icon-left:hover {
  cursor: pointer;
}
.burger-nav .icon-right {
  -webkit-transition-duration: 0.5s;
          transition-duration: 0.5s;
  position: absolute;
  height: 1px;
  width: 10px;
  top: 15px;
  background-color: #333;
  left: 15px;
}
.burger-nav .icon-right:before {
  -webkit-transition-duration: 0.5s;
          transition-duration: 0.5s;
  position: absolute;
  width: 10px;
  height: 1px;
  background-color: #333;
  content: "";
  top: -8px;
}
.burger-nav .icon-right:after {
  -webkit-transition-duration: 0.5s;
          transition-duration: 0.5s;
  position: absolute;
  width: 10px;
  height: 1px;
  background-color: #333;
  content: "";
  top: 8px;
}
.burger-nav.open {
	display:block;
}
.burger-nav.open .icon-left {
  -webkit-transition-duration: 0.5s;
          transition-duration: 0.5s;
  background: transparent;
}
.burger-nav.open .icon-left:before {
  -webkit-transform: rotateZ(45deg) scaleX(1.4) translate(2px, 2px);
          transform: rotateZ(45deg) scaleX(1.4) translate(2px, 2px);
		  background-color: #eee;
}
.burger-nav.open .icon-left:after {
  -webkit-transform: rotateZ(-45deg) scaleX(1.4) translate(2px, -2px);
          transform: rotateZ(-45deg) scaleX(1.4) translate(2px, -2px);
		  background-color: #eee;
}
.burger-nav.open .icon-right {
  -webkit-transition-duration: 0.5s;
          transition-duration: 0.5s;
  background: transparent;
}
.burger-nav.open .icon-right:before {
  -webkit-transform: rotateZ(-45deg) scaleX(1.4) translate(-2px, 2px);
          transform: rotateZ(-45deg) scaleX(1.4) translate(-2px, 2px);
		  background-color: #eee;
}
.burger-nav.open .icon-right:after {
  -webkit-transform: rotateZ(45deg) scaleX(1.4) translate(-2px, -2px);
          transform: rotateZ(45deg) scaleX(1.4) translate(-2px, -2px);
		  background-color: #eee;
}
.burger-nav:hover {
  cursor: pointer;
}

nav .nav-sp{
	display:none;
	top:0%;
	left:0%;
	width:100%;
	height:100%;
	position:fixed;
	z-index:-10000;
	-webkit-transition: all ease 0s;
    -moz-transition: all ease 0s;
    -o-transition: all ease 0s;
    -ms-transition: all ease 0s;
    transition: all ease 0s;
}

nav .nav-sp::before{
	content:"";
	opacity:0;
	width:120%;
	height:120%;
	position:absolute;
	top:-10%;
	left:-10%;
	background: rgba(0,0,0,0.65);
	-webkit-transition: all ease 0.6s;
    -moz-transition: all ease 0.6s;
    -o-transition: all ease 0.6s;
    -ms-transition: all ease 0.6s;
    transition: all ease 0.6s;
}
nav .nav-sp::after{
	content:"";
	opacity:0;
	width:120%;
	height:120%;
	position:absolute;
	top:-10%;
	left:-10%;
	z-index:-1;
	background: url("../img/back_sp.jpg") no-repeat center;
	 -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
	-webkit-transition: all ease 0.6s;
    -moz-transition: all ease 0.6s;
    -o-transition: all ease 0.6s;
    -ms-transition: all ease 0.6s;
    transition: all ease 0.6s;
}
nav .nav-sp.open{
	z-index:10000;
	overflow:hidden;
}
nav .nav-sp.open,
nav .nav-sp.open .cocolo-logo,
nav .nav-sp.open .nav li{
	display:block;
}
nav .nav-sp.open .nav-sns-sp{
	display:flex;
}
nav .nav-sp.close .cocolo-logo,
nav .nav-sp.close .nav li,
nav .nav-sp.close .nav-sns-sp{
	display:none;
}


nav .nav-sp.open,
nav .nav-sp.open::before,
nav .nav-sp.open::after{
	opacity:1;
	width:100%;
	height:100%;
	top:0;
	left:0;
}
nav .nav-sp .cocolo-logo{
	display:none;
	position: absolute;
    left: 50%;
    transform: translateX(-50%);
}
nav .nav-sp .nav{
	/* font-family: 'Abel', sans-serif; */
	letter-spacing: 0.2em;
	font-weight:normal;
	position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    font-size: 35px;
	margin-top:50px;
	opacity:0;
	-webkit-transition: all ease 1s;
    -moz-transition: all ease 1s;
    -o-transition: all ease 1s;
    -ms-transition: all ease 1s;
    transition: all ease 1s;
}
nav .nav-sp.open .nav{
	margin-top:0;
	opacity:1;
}
nav .nav-sp .nav li{
	display:none;
}
nav .nav-sp .nav a{
	color:#bbb;
	-webkit-transition: all ease 0.4s;
    -moz-transition: all ease 0.4s;
    -o-transition: all ease 0.4s;
    -ms-transition: all ease 0.4s;
    transition: all ease 0.4s;
}
nav .nav-sp .nav a.active{
	color:#fff;
}
.nav-sns-sp{
	display:none;
	position: absolute;
    right: 50px;
    bottom: 45px;
}
.nav-sns-sp .instagram,
.nav-sns-sp .facebook{
	color:#bbb;
	-webkit-transition: all ease 0.4s;
    -moz-transition: all ease 0.4s;
    -o-transition: all ease 0.4s;
    -ms-transition: all ease 0.4s;
    transition: all ease 0.4s;
}
nav .nav-sp .nav a:hover,
.nav-sns-sp .instagram:hover,
.nav-sns-sp .facebook:hover{
	color:#fff;
}

/* FOOTER-NAVI-IN */

#cnt-footer-nav{
	width:100%;
	margin-top:100px;
	padding:0 50px;
	box-sizing:border-box;
	position:relative;
}
#cnt-footer-nav:after{
	content:"";
	position:absolute;
	width:1280px;
	height:1px;
	background: #dddddd; /* Old browsers */
	background: -moz-linear-gradient(left, #dddddd 1%, #999 40%, #999 60%, #dddddd 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left, #dddddd 1%,#999 40%,#999 60%,#dddddd 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right, #dddddd 1%,#999 40%,#999 60%,#dddddd 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dddddd', endColorstr='#dddddd',GradientType=1 ); /* IE6-9 */
	left:50%;
	top:0;
	transform:translateX(-50%);
}
#cnt-footer-nav:before{
	content:"";
	position:absolute;
	width:1280px;
	height:1px;
	background: #dddddd; /* Old browsers */
	background: -moz-linear-gradient(left, #dddddd 1%, #999 40%, #999 60%, #dddddd 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left, #dddddd 1%,#999 40%,#999 60%,#dddddd 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right, #dddddd 1%,#999 40%,#999 60%,#dddddd 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dddddd', endColorstr='#dddddd',GradientType=1 ); /* IE6-9 */
	left:50%;
	bottom:0;
	transform:translateX(-50%);
}
#cnt-footer-nav .cnt-footer-nav-in{
	box-sizing:border-box;
	border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
	width:100%;
	display: flex;
	
}
#cnt-footer-nav .nav-box{
	width: auto;
    margin: 0 auto;
    padding: 30px 50px;
    display: flex;
}
#cnt-footer-nav .nav-box li{
	width: auto;
    text-align: center;
	letter-spacing:.3em;
	margin-left:-.3em;
	/* font-family: 'Abel', sans-serif; */
	position:relative;
}
#cnt-footer-nav .nav-box li a{
	padding:30px 25px;
	-webkit-transition: all ease 0.4s;
    -moz-transition: all ease 0.4s;
    -o-transition: all ease 0.4s;
    -ms-transition: all ease 0.4s;
    transition: all ease 0.4s;
}
#cnt-footer-nav .nav-box li a:after{
	content:"";
	display:block;
	position:absolute;
	height:2px;
	width:15px;
	bottom:-10px;
	left:50%;
	opacity:0;
	background:#aaa;
	transform:translateX(-50%);
	-webkit-transition: all ease 0.4s;
    -moz-transition: all ease 0.4s;
    -o-transition: all ease 0.4s;
    -ms-transition: all ease 0.4s;
    transition: all ease 0.4s;
}
#cnt-footer-nav .nav-box li a:hover{
	opacity:.5;
}
#cnt-footer-nav .nav-box li a:hover:after{
	bottom:-5px;
	opacity:1;
}
#cnt-footer-nav .nav-box li a.active:hover{
	opacity:1;
}
#cnt-footer-nav .nav-box li a.active:hover:after{
	bottom:0;
	opacity:0;
}
#cnt-footer-nav .nav-box li a.active{
	color:#90596a;
	position:relative;
}
#cnt-footer-nav .nav-box li a.active:before{
	content:"";
	width:1px;
	height:50px;
	background:#90596a;
	left: calc(50% - 3px);
	left: -webkit-calc(50% - 3px);
	top:-30px;
	position:absolute;
}


.sp{
	display:none;
}


/* SCROLL-FADE */
.js-scroll{
	/* opacity: 1; */
	/* transition: all 1s; */
	/* transform:translate(0px,120px) scale(1.1); */
}
.js-scroll-in{
	opacity:1;
	transform:translate(0px,0px) scale(1);
}
.js-scroll-blur{
	opacity:0;
	transition: all 1s;
	-webkit-filter: blur(5px);
	filter: blur(5px);
	transform:translate(0px,180px);
}
.js-scroll-blur-in{
	-webkit-filter: blur(0);
	filter: blur(0);
	opacity:1;
	transform:translate(0px,0px);
}
.effect{
	transition: all 1s;
	transform:translate(0px,120px);
}
.effect-in{
	transform:translate(0px,0px);
}

/* //////////////////////////////////////////////

LOADER

////////////////////////////////////////////// */

#progress {
	width:100vw;
	height:100vh;
	position:fixed;
	z-index:50000;
	display: none;
}
#progressBar {
	width:0;
	height:100vh;
	background: -webkit-linear-gradient(right, #7c7a78 ,#e0d5cd ,#f4e4e7);
  background: linear-gradient(0deg, #7c7a78 ,#e0d5cd ,#f4e4e7);
  background-size: 200% 200%;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
	position:absolute;
}
#progress #logo_load{
	position: fixed;
	left:50%;
	top:50%;
	transform: translate(-50%,-50%);
	display:block;
	z-index:1000;
	width:65px;
	height:65px;
	display:none;
}
#progressTxt{
	transform: translate(-0,-50%);
	top:50vh;
	right:0%;
	position:absolute;
	z-index:100;
	letter-spacing:0.5em;
	padding:20px;
	font-size:30px;
	color:#fff;
	/* font-family: 'Prata', serif; */
}

@media screen and (max-width: 1280px) , (max-device-width : 1280px) {
	#cnt-footer-nav{
		width: calc(100% - 100px);
		width: -webkit-calc(100% - 100px);
		margin: 100px 50px 0;
		padding:0;
	}
	#cnt-footer-nav:before,
	#cnt-footer-nav:after{
		width:100%;
		padding:0 50px;
		box-sizing:border-box;
	}
}
@media screen and (max-width: 1150px) , (max-device-width : 1150px) {
	nav .nav-ol,
	.nav-sns{
		bottom:45px;
	}
	nav .nav-ol .nav{
		font-size:0.9em;
	}
}
@media screen and (max-width: 990px) , (max-device-width : 990px) {
	.header1 .cocolo-logo{
		margin:0 auto;
	}
	nav .nav-ol{
		display:none !important;
	}
	.burger-nav {
		display:block;
	}
	#footer-nav{
		justify-content: center;
		float:none;
		margin:0 auto;
	}
	footer p{
		float:none;
		text-align:center;
		margin-top:30px;
	}
}
@media screen and (max-width: 800px) , (max-device-width : 800px) {
	#cnt-footer-nav .nav-box{
		-webkit-justify-content: flex-start;
    	justify-content: flex-start;
    	-webkit-flex-wrap: wrap;
	}
	#cnt-footer-nav .nav-box li{
	    width: 33.33333333%;
		padding: 5px 0;
    	margin: 12px 0;
	}
	#cnt-footer-nav .nav-box li a{
		padding: 15px 25px;
	}
	#cnt-footer-nav .nav-box li a.active:before{
		top: 0;
		width: 5px;
    	height: 5px;
		left: calc(50% - 5px);
		left: -webkit-calc(50% - 5px);
	}
}
@media screen and (max-width: 600px) , (max-device-width : 600px) {
	.burger-nav {
		left:30px;
	}
	.header1 .nav-sns{
		display:none !important;
	}
	nav .nav-sp .nav{
		font-size:28px;
	}
	.nav-sns-sp{
		right:30px;
		bottom:30px;
	}
	#progressTxt{
		font-size:20px;
	}
	#cnt-footer-nav{
		margin: 40px 50px 0;
	}
	#cnt-footer-nav .nav-box{
		padding: 20px 0;
	}
	#cnt-footer-nav .nav-box li a{
		padding: 15px 5px;
	}
	footer{
		padding:30px 50px;
	}
	#footer-nav{
		-webkit-justify-content: flex-start;
		justify-content: flex-start;
		-webkit-flex-wrap: wrap;
		flex-wrap: wrap;
		width: 100%;
		box-sizing: border-box;
	}
	#footer-nav li{
		-webkit-flex-grow: 1;
		flex-grow: 1;
		margin:5px 10px;
		box-sizing: border-box;
	}
	#footer-nav li:nth-child(1){
		display:none;
	}
}