@charset "utf-8";

/*-----------------------------------------------------
Container
-------------------------------------------------------*/
#Container{
	width: 100%;
	position: relative;
	background: #fff;
	font-family: 'Montserrat', 游ゴシック体, 'Yu Gothic', 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
}


/*-----------------------------------------------------
Header
-------------------------------------------------------*/
#Header{
	width: 100%;
	height: 80px;
	position: fixed;
	font-family: 'Montserrat', 游ゴシック体, 'Yu Gothic', 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
}

/* h1
---------------------*/
/*
#Header h1{
	width: 86px;
	position: relative;
	margin: 0 auto;
	padding: 18px 0 0;
	opacity: 0;
}
#Header h1 a{
	-webkit-transition: opacity 0.3s;
	        transition: opacity 0.3s;
}
#Header h1 a:hover{
	opacity: 0.6;
}
*/

/*.kanoLogo
---------------------*/
#Header h1.kanoLogo{
	position: absolute;
	top:27px;
	left:40px;
}
#Header h1.kanoLogo a{
	display: block;
	padding: 0;
}



/* bg
---------------------*/
#Header div.bg{
	width: 100%;
	height: 80px;
	position: absolute;
	top:-30px;
	left:0;
	background: #fff;
	opacity: 0;
}


/*-----------------------------------------------------
Japanese / English Menu
-------------------------------------------------------*/

i {margin-right:7px; }

#Header ul#languageList {
	position: absolute;
	top:32px;
	right:105px;
}

#Header ul#languageList li {
	display:inline-block;
	margin-right:12px;
	font-size:14px;
	line-height:1.0;
}

#Header ul#languageList li a {
	color:#222;
	text-decoration: none;
	transition: .3s ease-in-out;
	-webkit-transition: .3s ease-in-out;
	-moz-transition: .3s ease-in-out;
}

#Header ul#languageList li a:hover {
	text-decoration: none;
	color:#869299;
}

/*-----------------------------------------------------
GlobalNavi
-------------------------------------------------------*/
/*-------------------------------------
btn
---------------------------------------*/
#GlobalNavi p.btn{
	position: absolute;
	top:32px;
	right:20px;
	padding: 10px 10px 10px 36px;
	color: #fff;
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
}
#GlobalNavi p.btn em{
	font-style: normal;
}
#GlobalNavi p.btn span{
	width: 30px;
	height: 2px;
	position: absolute;
	left:0;
	background: #707475;
	-webkit-transition: all 0.1s cubic-bezier(0.005, 0.450, 0.420, 1.000);
	        transition: all 0.1s cubic-bezier(0.005, 0.450, 0.420, 1.000);
}
#GlobalNavi p.btn span:nth-child(1){top:0;}
#GlobalNavi p.btn span:nth-child(2){top:8px;}
#GlobalNavi p.btn span:nth-child(3){top:16px;}

#Header.active p.btn span:nth-child(1){top:8px;-webkit-transform:rotate(-24deg);-moz-transform:rotate(-24deg);-ms-transform:rotate(-24deg);-o-transform:rotate(-24deg);transform:rotate(-24deg);}
#Header.active p.btn span:nth-child(2){opacity: 0;}
#Header.active p.btn span:nth-child(3){top:8px;-webkit-transform:rotate(24deg);-moz-transform:rotate(24deg);-ms-transform:rotate(24deg);-o-transform:rotate(24deg);transform:rotate(24deg);}

#Header p.btn:hover span:nth-child(1),#Header.active p.btn:hover span:nth-child(1){top:8px;-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg);}
#Header p.btn:hover span:nth-child(2),#Header.active p.btn:hover span:nth-child(2){top:8px;opacity:1;}
#Header p.btn:hover span:nth-child(3),#Header.active p.btn:hover span:nth-child(3){top:8px;-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg);}

/*-------------------------------------
inline
---------------------------------------*/
#GlobalNavi div.inline{
	width: 100%;
	height: 100%;
	position: fixed;
	top:0;
	left:0;
	background: #F1F3F2;
	display: none;
}

/* menu
---------------------*/
#GlobalNavi div.inline ul.menu{
	width: 300px;
	position: absolute;
	top:50%;
	left:50%;
	margin: -222px 0 0 -150px;
	font-size: 26px;
	font-family: 'Montserrat', sans-serif;
	text-align: center;
	line-height: 1;
	color:#88929B;
}
#GlobalNavi div.inline ul.menu li a{
	display: block;
	position: relative;
	padding: 32px 0;
	color:#88929B;
	-webkit-transition: all .3s;
	   -moz-transition: all .3s;
	    -ms-transition: all .3s;
	     -o-transition: all .3s;
	        transition: all .3s;
}
#GlobalNavi div.inline ul.menu li a:before,
#GlobalNavi div.inline ul.menu li a:after{
	width: 0;
	height: 1px;
	display: block;
	position: absolute;
	background: #88929B;
	content:'';
	opacity: 0;
	-webkit-transition: all .3s;
	   -moz-transition: all .3s;
	    -ms-transition: all .3s;
	     -o-transition: all .3s;
	        transition: all .3s;
}
#GlobalNavi div.inline ul.menu li a:before{
	right:0;
	top: 20px;
}
#GlobalNavi div.inline ul.menu li a:after{
	left:50%;
	bottom: 20px;
}
#GlobalNavi div.inline ul.menu li a:hover{
	letter-spacing: 0.1em;
}
#GlobalNavi div.inline ul.menu li a:hover:after{
	width: 70%;
	left:15%;
	opacity: 1;
}

/* share
---------------------*/
#GlobalNavi div.inline dl.share{
	overflow: hidden;
	position: absolute;
	left:40px;
	bottom: 25px;
}
#GlobalNavi div.inline dl.share dt,
#GlobalNavi div.inline dl.share dd{
	float: left;
}
#GlobalNavi div.inline dl.share dt{
	line-height: 30px;
}
#GlobalNavi div.inline dl.share dd{
	width: 30px;
	height: 30px;
	margin: 0 0 0 13px;
}
#GlobalNavi div.inline dl.share dd a{
	width: 30px;
	height: 30px;
	display: block;
	position: relative;
	border-radius: 15px;
	background: #88929B;
	-webkit-transition: all 0.3s;
	        transition: all 0.3s;
}
#GlobalNavi div.inline dl.share dd.fb a:hover{
	background: #325495;
}
#GlobalNavi div.inline dl.share dd.tw a:hover{
	background: #6caddc;
}
#GlobalNavi div.inline dl.share dd a img{
	position: absolute;
	top:50%;
	left:50%;
	margin: -10px 0 0 -10px;
}





/*-----------------------------------------------------
Header.low
-------------------------------------------------------*/
#Header h1,
#Header p.kanoLogo a,
#Header p.kanoLogo a span:before,
#Header p.kanoLogo a span:after,
#Header div.bg,
#Header #GlobalNavi p.btn,
#Header #GlobalNavi p.btn span{
	-webkit-transition: all .4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	   -moz-transition: all .4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	    -ms-transition: all .4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	     -o-transition: all .4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	        transition: all .4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* h1 */
#Header.low h1,#Header.active h1{
	opacity: 1;
}

/*.kanoLogo */
#Header.low p.kanoLogo a,#Header.active p.kanoLogo a{
	color: #111;
}
#Header.low p.kanoLogo a span:before,#Header.active p.kanoLogo a span:before{
	background: #111;
}
#Header.low p.kanoLogo a span:after,#Header.active p.kanoLogo a span:after{
	border-color: transparent transparent transparent #111;
}

/* bg */
#Header.low div.bg{
	top:0;
	opacity: 1;
}

/* btn */
#Header.low #GlobalNavi p.btn,#Header.active #GlobalNavi p.btn{
	color: #111;
}
#Header.low #GlobalNavi p.btn span,#Header.active #GlobalNavi p.btn span{
	background: #111;
}


/*-----------------------------------------------------
Content
-------------------------------------------------------*/
#Content{
	width:100%;
	min-width: 1200px;
	overflow: hidden;
	position: relative;
	background: #fff;
}

/* line
---------------------*/
#Content p.line{
	width: 1px;
	height: 30px;
	display: block;
	position: absolute;
	bottom: 0;
	left: 50%;
	background: #111;
}


/*-----------------------------------------------------
MV
-------------------------------------------------------*/
#MV{
	width: 100%;
	min-width: 980px;
	overflow: hidden;
	position: relative;
}

/*-------------------------------------
h2
---------------------------------------*/
#MV h2{
	position: absolute;
	top:52%;
	left:50%;
	margin: -126px 0 0 -570px;
}

/*-------------------------------------
inline
---------------------------------------*/
#MV div.inline{
	width: 100%;
}
#MV div.inline ul li{
	overflow: hidden;
	position: absolute;
	top:0;
	left:0;
}
#MV div.inline ul li img{
	width: 100%;
	height: auto;
	position: fixed;
	top:50%;
	left:50%;
	will-change: transform;
}



/*-------------------------------------
loading
---------------------------------------*/
#MV p.loading{
	position: absolute;
	top:50%;
	left:50%;
	margin: -21px 0 0 -21px;
}


/*-----------------------------------------------------
style common
-------------------------------------------------------*/
article.style{
	width: 100%;
	min-width: 1200px;
	overflow: hidden;
	position: relative;
	margin: 0 auto;
	padding: 0;
}

/*-------------------------------------
main
---------------------------------------*/
article.style section.main {
	position: relative;
	width:1200px;
	margin:0 auto;
}


/* bg
---------------------*/
article.style section.main div.bg{
	position: relative;
}
/* p */
article.style section.main div.bg p{
	position: relative;
}


/*-----------------------------------------------------
Kano
-------------------------------------------------------*/

/* デバイスの横幅が画像サイズを超えた場合 */
#Kano{
	background: url(../img/shibori/bg01.jpg) no-repeat center;
	background-attachment: fixed ;
	min-height:900px;
}
@media only screen and (min-width: 2000px) {
#Kano{
	background: url(../img/shibori/bg01.jpg) no-repeat center;
	background-size:100% auto;
}
}

#Kano section.main div.bg{
	margin: 0 auto;
	width:1200px;
}


#Kano section.main ul li{
	margin-top:140px;
}


/*-----------------------------------------------------
Traditional
-------------------------------------------------------*/

#Traditional{
	background: url(../img/shibori/bg02.jpg) no-repeat center;
	background-attachment: fixed ;
	min-height:1400px;
}
@media only screen and (min-width: 2000px) {
#Traditional{
	background: url(../img/bg02.jpg) no-repeat center;
	background-size:100% autoshibori/;
}
}

#Traditional section.main div.bg{
	margin: 0 auto;
	width:1200px;
}

#Traditional section.main ul li{
	margin-top:150px;
}


/*-----------------------------------------------------
Products
-------------------------------------------------------*/

#Products{
	background: url(../img/shibori/bg03.jpg) no-repeat center;
	background-attachment: fixed ;
	min-height:1804px;
	margin-top:-3px;
}
@media only screen and (min-width: 2000px) {
#Products{
	background: url(../img/shibori/bg03.jpg) no-repeat center;
	background-size:100% auto;
}
}

#Products section.main div.bg{
	margin: 0 auto;
	width:1200px;
}


#Products section.main ul li{
	margin-top:150px;
	margin-left:40px;
}


/*-----------------------------------------------------
Artist
-------------------------------------------------------*/

#Artist{
	background: url(../img/bg04.jpg) no-repeat center;
	min-height:832px;
}
@media only screen and (min-width: 2000px) {
#Artist{
	background: url(../img/bg04.jpg) no-repeat center;
	background-size:100% auto;
}
}

#Artist section.main div.bg{
	margin: 0 auto;
	width:1200px;
}


#Artist section.main ul li{
	margin-top:130px;
	margin-left:460px;
}


/*-----------------------------------------------------
News
-------------------------------------------------------*/

#News{
	background: url(../img/bg06.jpg) no-repeat center;
	min-height:669px;
}
@media only screen and (min-width: 2000px) {
#News{
	background: url(../img/bg06.jpg) no-repeat center;
	background-size:100% auto;
}
}

#News section.main div.bg{
	margin: 0;
	width:1200px;
}


#News section.main ul li{
	margin-top:150px;
	margin-left:0;
}



/*-----------------------------------------------------
Company
-------------------------------------------------------*/

#Company{
	background: url(../img/bg05.jpg) no-repeat center;
	min-height:1150px;
}
@media only screen and (min-width: 2000px) {
#Company{
	background: url(../img/bg05.jpg) no-repeat center;
	background-size:100% auto;
}
}


#Company section.main div.bg{
	margin: 0 auto;
	width:1200px;
}


#Company section.main ul li{
	margin-top:150px;
}


#Company section.main h2 {
	font-size:28px;
	 color:#ABB2B8;
	 text-align:center;
	 margin: 60px auto 80px;
	 width:1200px;
}

#Company section.main p {
	font-size:13px;
	 color:#ABB2B8;
	 text-align:center;
	 margin: 50px auto;
	 width:1200px;
}

table{
	border-collapse:collapse;
	border-spacing:0;
	text-align:left;
	margin-top:80px;
}

.baseTab {
 width:100%;
}

/*
.baseTab {
 border-top:1px solid #D9D9D9;
}
*/
.baseTab tr th,
.baseTab tr td {
 border-bottom   : 1px solid #E8EAEE;
 padding         : 13px 20px;
 line-height:1.6;
 vertical-align:middle;
 color:#ABB2B8;
 font-size:16px;
}

.baseTab tr td {
	font-weight:normal;
	font-weight:400;
	font-size:14px;
}






p.copyright {
	font-size:13px;
	 text-align:center;
	 margin: 80px auto 33px;
	 width:1200px;
}

/*-------------------------------------
pagetop
---------------------------------------*/
p.pagetop{
	width: 50px;
	height: 50px;
	position: fixed;
	bottom: 40px;
	right: 40px;
	opacity: 0;
}
p.pagetop a{
	width: 50px;
	height: 50px;
	display: block;
	text-indent: -9999px;
	background: #C9CBD1;
	-webkit-transition: all 0.3s;
	        transition: all 0.3s;
}
p.pagetop a:after{
	width: 9px;
	height: 9px;
	display: block;
	position: absolute;
	top:21px;
	left:20px;
	border: solid #fff;
	border-width: 1px 1px 0 0;
	-webkit-transform: rotate(-45deg);
	   -moz-transform: rotate(-45deg);
	    -ms-transform: rotate(-45deg);
	     -o-transform: rotate(-45deg);
	        transform: rotate(-45deg);
	content:'';
	-webkit-transition: all 0.3s;
	        transition: all 0.3s;
}
p.pagetop a:hover{
	background: #fff;
}
p.pagetop a:hover:after{
	border: solid #111;
	border-width: 1px 1px 0 0;
}



/*-----------------------------------------------------
Opening用
-------------------------------------------------------*/
#Header,
#MV div.inline,#MV h2,#MV .sns li,#MV .scroll,#MV .scroll span,
#Concept,#Instagram,#Access,#Photo,
article.style section
{
	opacity: 0;
}

/*-----------------------------------------------------
z-index
-------------------------------------------------------*/
#GlobalNavi p.btn{z-index: 6000;}
#Header{z-index: 5000;}
#GlobalNavi div.inline{z-index: 4500;}
#Content{z-index: 4000;}

/* #Header */
#Header h1,#Header p.kanoLogo{z-index: 5000;}
#Header div.bg{z-index: 0;}

/* #MV */
#MV h2,#MV p.scroll,#MV ul.sns{z-index: 100;}
#MV div.inline{z-index: 50;}
#MV div.inline ul li.active{z-index: 10;}
#MV div.inline ul li.next{z-index: 1;}
#MV div.inline ul li{z-index: 0;}

/* style */
article.style section.main h2{z-index: 100;}
article.style section.main div.bg{z-index: 10;}




/* clearfix (Firefox)
------------------------------- */
.clearfix:after{
	content:".";
	display:block;
	height:0px;
	clear:both;
	visibility:hidden;
}

