@charset "UTF-8";
/* CSS Document */


*{
	margin:0;
	padding:0;
}
html, body{
	width:100%;
	height:100%;
}
body{
	font-size:12px;
	line-height:1.8em;
	color:#000000;
	/*font-family:Verdana, "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN","メイリオ", Meiryo, 'Karla', sans-serif;*/
	font-family: Verdana, "游ゴシック", YuGothic, "Hiragino Kaku Gothic ProN", Meiryo,'Karla', sans-serif;
	background:#FFFFFF;
	-webkit-font-smoothing: antialiased;
	-webkit-text-size-adjust: none;
}
img{
	border-width:0;
}
object, embed{
   vertical-align: bottom;
}
ul,ul li{
	list-style:none;
}

/*///////////////////////////////////////////////////////////// ANCHOR */

a,a:link,a:visited{
	color:#000000;
	text-decoration:none;
}
a,a:active,a:hover{
	color:#666666;
	text-decoration:none;
}
img,a img{
   margin: 0;
   padding: 0;
   border: 0;
   border-style: none;
   text-decoration: none;
   vertical-align: top;
}

/*///////////////////////////////////////////////////////////// LOADING */

#loading{
	position:fixed;
	top:0;
	left:0;
	z-index:999;
	width:100%;
	height:100%;
	background:url(/images/loading.gif) no-repeat center center #fff;
	text-align:center;
}

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

	UTILITY

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

.en{}
.jp {}
.font-karla{
	font-family: 'Karla', sans-serif;
}

.mb10 {
	margin-bottom:10px;
}
.mb15 {
	margin-bottom:15px;
}
.mb20 {
	margin-bottom:20px;
}
.mb25 {
	margin-bottom:25px;
}
.mb30 {
	margin-bottom:30px;
}
.mb35 {
	margin-bottom:35px;
}
.mb40 {
	margin-bottom:40px;
}

.pb10 {
	padding-bottom:10px;
}
.pb15 {
	padding-bottom:15px;
}
.pb20 {
	padding-bottom:20px;
}
.pb25 {
	padding-bottom:25px;
}
.pb30 {
	padding-bottom:30px;
}
.pb35 {
	padding-bottom:35px;
}
.pb40 {
	padding-bottom:40px;
}
.ptb100 {
	padding-top:100px;
	padding-bottom:100px;
}
@media(max-width:768px){
.ptb100 {
	padding-top:0px;
	padding-bottom:0px;
}
}
/*///////////////////////////////////////////////////////////////////////////

	PAGETOP

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

.pagetop {
	display: none;
	position: fixed;
	bottom: 30px;
	right: 55px;
	z-index:100;
}
.pagetop a {
	display: block;
	width: 37px;
	height: 37px;
	overflow:hidden;
}
.pagetopsp {
	display:none;
}
.pagetopsp a{
	display:none;
}

@media(max-width:768px){
.pagetop {
	display:none;
}
.pagetop a{
	display:none;
}
.pagetopsp {
	display: none;
	position: fixed;
	bottom: 30px;
	right: 5px;
	z-index:100;
}
.pagetopsp a {
	display: block;
	width: 37px;
	height: 37px;
	overflow:hidden;
}
.pagetopsp a img {
	width: 37px;
	height:auto;
}
}


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

	LAYOUT

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

#wrap {
	width:100%;
	position: relative;
}
#wrapinner {
	width:980px;
	position: absolute;
}
#wrapinner:after{
	content:".";
	height:0;
	display:block;
	clear:both;
	visibility:hidden;
}

/*side menu*/
#side {
	width:210px;
	float:left;
}
#side h1{
	font-size:24px;
	font-weight:normal;
	letter-spacing:2px;
	font-family: 'Karla', sans-serif;
	margin-bottom:15px;
	line-height: 22px;
}
#side h2{
	font-size:11px;
	color: #9a9a9a;
	font-weight:normal;
	letter-spacing:1px;
	padding-left: 1.5px;
	   font-family: 'Karla', sans-serif;
	/*margin-bottom:20px;*/
	/* line-height: 12px; */
	/* margin-bottom: 5px */
}
#side ul{
	font-size:1.0em;
	font-weight:normal;
	letter-spacing:0.8px;
	font-family: 'Karla', sans-serif;
}
#side ul li{
	width:100%;
	line-height:1.8em;
	max-width:200px;
}
#side ul li.sub{
}
#side ul li.here  a{
	color: #9a9a9a;
}
#side ul li.sub{
	background:#ffffff;
	padding-left:10px;
	line-height:1.7em;
	padding-bottom: 5px;
}
#side ul li.sub a.here{
	color: #9a9a9a;
}
#side ul li.sub-sub{
	padding-left:10px;
	color: #9a9a9a
}
.pcmenu{
	display: block;
}
.spmenu{
	display: none;
}
.spsubmenu{
	display: none;
}
#detailnote {
	width:200px;
}
#detailnote dl{
	width:200px;
	position:absolute;
	bottom:0;
}
#detailnote dl{
	font-weight:normal;
    font-family: 'Karla', sans-serif;
}
#detailnote dl dt #days{
	font-size:12px;
	line-height:10px;
	letter-spacing:0.8px;
}
#detailnote dl dt #detit{
	font-size:16px;
	margin-bottom: 20px;
	letter-spacing:0.8px;
}
#detailnote dl dd{
	font-size:11px;
	color: #000000;
	line-height:14px;
	letter-spacing:0.8px;
}
/*#detailnote dl dd{
	font-size:12px;
	color: #000000;
	line-height:14px;
	letter-spacing:0.8px;
}*/
#detailnote dl dd span{
	font-size: 11px;
}
/*headmenu*/
#headmenu {
	width:273px;
	float:right;
	margin-bottom: 5px;
}
#headmenu-s {
	width:140px;
	float:right;
	margin-bottom: 5px;
}
#headmenu ul,
#headmenu-s ul{
	font-size:1.0em;
	font-weight:normal;
	letter-spacing:0.8px;
    font-family: 'Karla', sans-serif;
}
#headmenu ul:after,
#headmenu-s ul:after{
	content:".";
	height:0;
	display:block;
	clear:both;
	visibility:hidden;
}
#headmenu ul li,
#headmenu-s ul li{
	float:left;
	margin-right:30px;
	text-align:right;
}
#headmenu ul li.listend,
#headmenu-s ul li.listend{
	margin-right:0;
}

/*top visual*/
#visual-pc{
	width:762px;
	float:right;
}
#visual-pc img{
	height: 568px;
}
#visual-pc .pcimg{
	display: block;
}
#visual-sp{
	display: none;
}
#visual-sp .spimg{
	display: none;
}
/*crossFader*/
.crossfader{
	position:relative;
	height:567px;
}
.crossfader img{
	position:absolute;
	top:0;
	left:0;
	z-index:8;
	opacity:0;
}
.crossfader .active{
	z-index:10;
	opacity:1.0;
}
.crossfader .last-active{
	z-index:9;
}

/*portfolip*/
#contents {
	width:762px;
	float:right;
}
#contents ul {
	width:100%;
}
#contents ul:after {
	content:".";
	height:0;
	display:block;
	clear:both;
	visibility:hidden;
}
#contents #portfoliolinks-sp{
	display: none;
}

/*#contents ul#portfoliolinks .btn {
    margin: 0 auto;
    color: #fff;
    text-decoration: none;
    text-align: center;
    position: relative;
    z-index: 2;
    display: block;
    width: 222px;
    height: 222px;
    line-height: 222px;
	top:173px;
	cursor:pointer;
}
#contents ul#portfoliolinks .btn a{
	font-size:28px;
	font-weight:normal;
	letter-spacing:0.1px;
	font-family: 'Karla', sans-serif;
	color:#ffffff;
    width: 222px;
    height: 222px;
    display: block;
}
#contents ul#portfoliolinks .btn::before {
    content: '';
    display: block;
    position: absolute;
    width: 222px;
    height: 222px;
    z-index: -1;
    border-radius: 50%;
    transition: all .3s ease;
    -webkit-transition: all .3s ease;
    background:url(/images/bg_portfoliobtn.png) left top no-repeat;
}
#contents ul#portfoliolinks .btn:hover::before {
    transform: scale(1.03);
    -webkit-transform: scale(1.03);
	cursor:pointer;
}*/

#contents ul#portfoliolinks li {
	float:left;
	width:254px;
	height:567px;
	position:relative;
	overflow:hidden;
}
#contents ul#portfoliolinks .btimg{
	width:254px;
	z-index:0;
	position:absolute;
	top:0;
	left:0;
}
#contents ul#portfoliolinks .btimg a.bwWrapper{
	width: 254px;
	height: auto;
	filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
    -webkit-filter: grayscale(00%);
}

#contents ul#portfoliolinks .btimg a.bwWrapper:hover {  
  	filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
    filter: gray; 
    -webkit-filter: grayscale(100%); 
    transition: 0.1s ease-in;
}
#contents ul#portfoliolinks .btimg a.bwWrapper img{
	width: 254px;
	height: auto;
}
#contents ul#portfoliolinks .onlink{
	display: none;
	z-index:1;
	position:absolute;
	top:10px;
	left:10px;
	color: #ffffff;
	border:solid 1px #ffffff;
	width: 232px;
	height: 545px;
	padding: 0% 0;
	margin: 0 auto;
	text-align: center;
	background-color: rgba(0,0,0,0.1);
	line-height: 545px;
	font-size: 18px;
	font-family: 'Karla', sans-serif;
	letter-spacing: 1px;
}
#contents ul#portfoliolinks img.onimg{
	z-index: 1;
}
.bwWrapper {
    position:relative;
    display:block;
}

/*list*/

#portfoli-detail {
	clear: both;
}


/*slick*/

.pc .photoslider{
	height: 567px;
	position:relative;
}
.pc .photoslider img{
	max-height: 567px;
	height: auto;
	margin: 0 auto;
}

/*profile*/

#boxprofile {
	width: 740px;
	height: 400px;
	padding: 166px 10px 0 10px;
	background-color: #ffffff;
	text-align: center;
	border:solid 1px #f5f5f5;
}
#boxprofile dt{
	font-size:24px;
	font-weight:normal;
	letter-spacing:2px;
	font-family: 'Karla', sans-serif;
	margin-bottom:35px;
}
#boxprofile dt #name-jp{
	font-size:18px;
	font-weight:normal;
	letter-spacing:1px;
	font-family: 'Karla', sans-serif;
}
#boxprofile dt #name-en{
	font-size:12px;
	font-weight:normal;
	letter-spacing:4.5px;
	font-family: 'Karla', sans-serif;
	color: #9a9a9a;
	line-height: 12px;
}
#boxprofile dd{
	width: 300px;
	margin: 0 auto;
	text-align: left;
	line-height: 22px;
	letter-spacing: 1px;
	margin-bottom: 15px;
}
.footer{
	display: none;
}


/* ====================================================
         SP
==================================================== */
@media(max-width:1032px){

#wrap {
	width:100%;
	position:relative;
	padding: 2% 0;
}
.sp #wrapinner {
	width:100%;
}

/*side menu*/
#side {
	width:100%;
	float:none;
}
#side h1{
	text-align: center;
	border-bottom: solid 1px #e9e9e9;
	padding-bottom: 5%;
}
#side h2{
	text-align: center;
}
#side ul{
	width: 100%;
}
#side ul.spmenu{
	margin: 3% auto;
}
#side ul:after{
	content: ".";
	height: 0;
	display: block;
	clear: both;
	visibility: hidden;
}
#side ul li{
	width:33%;
	float: left;
	text-align: center;
	max-width:33%;
}
.pcmenu{
	display: none;
}
.spmenu{
	display: block;
}
.fashion .spsubmenu,
.tabi .spsubmenu,
.kao .spsubmenu{
	display: block;
}
#side ul.spsubmenu li{
	width: 100% !important;
	max-width: 100% !important;
}
#side ul.spsubmenu li.sub{
	width: 100%;
	max-width:"";
	background:#ffffff;
	padding-left:0px;
	border-top: solid 1px #e9e9e9;
	padding: 3% 0;
}
#side ul.spsubmenu li.sub .subinner{
	width: 80%;
	margin: 0 auto;
}
#side ul.spsubmenu li.sub .subinner:after{
	content: ".";
	height: 0;
	display: block;
	clear: both;
	visibility: hidden;
}
#side ul.spsubmenu li.sub .subinner div{
	width: 33%;
	float: left;
	text-align: center;
}
/*#side ul.spsubmenu li.sub span{
	width: 99%;
	margin: 0 auto;
}*/
/*top visual*/
#visual-pc{
	display: none;
}
#visual-sp{
	display: block;
	width:100%;
	float:none;
}
.footer{
	display: block;
	width: 100%;
	text-align: center;
	padding: 2% 0%;
	font-size: 12px;
	letter-spacing:0.8px;
	font-family: 'Karla', sans-serif;
}


/*portfolip*/
#contents {
	width:100%;
	float:none;
}
#contents #portfoliolinks-sp {
	width: 100%;
	height: auto;
	display: block;
}
#contents ul#portfoliolinks{
	display: none;
}
#contents #portfoliolinks-sp .btn{
	width: 100%;
	height: auto;
	position: relative;
}
#contents #portfoliolinks-sp .btn a {
	display: block;
}
#contents #portfoliolinks-sp .btn a {
	display: block;
}
#contents #portfoliolinks-sp .btn a img{
	width: 100%;
	height: auto;
	position: absolute;
	z-index: 0;
	top:0;
	left: 0;
}
#contents #portfoliolinks-sp .btn a .onlink{
	text-align: center;
	color: #ffffff;
	text-align: center;
	z-index: 2;
	position: absolute;
	font-size: 18px;
	font-family: 'Karla', sans-serif;
	letter-spacing: 1px;
}
#contents #portfoliolinks-sp .btn a .borders{
	position: absolute;
	z-index: 1;
	border:solid 1px #ffffff;
	background-color: rgba(0,0,0,0.4);
	box-sizing:border-box;
}
#boxprofile {
	width: 92%;
	height: auto;
	padding: 15% 4% 0 ;
	background-color: #fafafa;
	text-align: center;
	min-height: 300px;
	border: none;
}
#boxprofile dt{
	padding-bottom: 5%
}
#boxprofile dt #name-jp{
}
#boxprofile dt #name-en{
}
#boxprofile dd{
	width: 90%;
	margin: 0 auto;
}

/*slick
.sp .photoslider{
	width: 100%;
	position:relative;
}
.sp .photoslider img{
	height: auto;
	max-width: 100%;
	max-height: 507px;
	margin: 0 auto;
}
*/

/*sidebottom*/
#detailnote {
	display: none;
}

}


/* ====================================================
         slick
==================================================== */


@media screen and (max-width:1032px)and(min-width:600px){

.sp .photoslider{
	width: 100%;
	margin: 0 auto;
/*	height: 507px;*/
	position:relative;
}
.sp .photoslider img{
	/*width: 100%;*/
	height: auto;
	max-width: 96%;
	max-height: 607px;
	margin: 0 auto;
}
}
@media(max-width:599px){

.sp .photoslider{
	width: 100%;
	margin: 0 auto;
/*	height: 507px;*/
	position:relative;
}
.sp .photoslider img{
	/*width: 100%;*/
	height: auto;
	max-width: 96%;
	max-height: 477px;
	margin: 0 auto;
}
}


::selection {background: #6BD29C; color: #fff;}
::-moz-selection {background: #6BD29C; color: #fff;}

img::selection {background: #D066E9; color: #fff;}
img::-moz-selection {background: #D066E9; color: #fff;}