@charset "UTF-8";

	
/* example
----------------------------------------------- */
	

.anim{
	
    transition: all 250ms cubic-bezier(.50,.0,.50,1);
}

p:nth-of-type(2){}


p:last-child{}





/* class
----------------------------------------------- */
a.btn{ display:block;  text-indent: 200%; white-space: nowrap;overflow: hidden;height:inherit;}


ul.sns{}
ul.sns li{ display:inline-block; margin-right:10px;}

ul.sns li.facebook { width:20px; height:20px;}
ul.sns li.twitter { width:23px; height:20px;}


ul.sns li.facebook a{ }
ul.sns li.twitter a{ }


	
	

ul.sns li.facebook a:hover{ }
ul.sns li.twitter a:hover { }



ul.arrowLink{}
ul.arrowLink li{ position:relative; margin-bottom:10px;}
ul.arrowLink li a{ display:block; padding-left:1.5em; line-height:1.5;}
ul.arrowLink li a:before{
		content:"→";
		display:block;
		position:absolute;
		left:0px;
		top:2px;
}


ul.arrowLink li:last-child{ margin-bottom:0;}

#debug{ display:none; position:fixed; top:0; left:0; z-index:1000; width:100%; height:auto; background-color:#333; opacity:.8; color:#FF3; font-size:1rem; text-align:left; padding:5px;}


.tLeft{ text-align:left !important;}


p.read{ font-size:1.2rem;}


	

/* common
----------------------------------------------- */
.btnAnim{
	
        transition: all 250ms cubic-bezier(0.645, 0.045, 0.355, 1.000); /* easeInOutCubic */
	}

             
body .hexagonBtn {
	position:relative;

  width: 26px; 
  height: 15.01px;
  background-color: #ffffff;

        transition: all 250ms cubic-bezier(0.645, 0.045, 0.355, 1.000); /* easeInOutCubic */
		
		
		
}



body .hexagonBtn:before,
body .hexagonBtn:after {
  content: "";
  position: absolute;
  width: 0;
  border-left: 13px solid transparent;
  border-right: 13px solid transparent;

        transition: all 250ms cubic-bezier(0.645, 0.045, 0.355, 1.000); /* easeInOutCubic */
		
}

body .hexagonBtn:before {
  bottom: 100%;
  border-bottom: 7.4px solid #ffffff;
 
}

body .hexagonBtn:after {
  top: 100%;
  width: 0;
  border-top: 7.4px solid #ffffff;
}


html:not(.touchDevice) body .hexagonBtn.h{ background-color:#000; cursor:pointer;}

html:not(.touchDevice) body .hexagonBtn.h:before {
  border-bottom: 7.51px solid #000;
}

html:not(.touchDevice) body .hexagonBtn.h:after {
  top: 100%;
  width: 0;
  border-top: 7.51px solid #000;
}


body .hexagonBtn img.btn{ 
	width:100%; 
	height:30px; 
	position:absolute; 
	left:0; 
	top:-8px; 
	z-index:10;
	-webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

body .hexagonBtn area{ cursor:pointer;}

body .hexagonBtn .hexagonContents {
  text-align:center;
  font-size:18px;
  position:absolute;
  width: 26px; 
  height: 30px;
  display:table-cell;
  vertical-align:middle;
  margin: 0;
  top:-7.51px;
  left:0;
  z-index:9;
  opacity:1;
}

.touchDevice body .hexagonBtn map:after{

content: "";
  position: absolute;
  top:0px;
  left:0px;
  z-index:-1;
  width: 26px;
  height:15px;
  background-color:#fff;
  

}

body .hexagonBtn .hexagonContents img.icon{width: 26px; height: 30px; position:absolute; top:0; left:0;}








/* site logo
----------------------------------------------- */
.siteLogo{ position:fixed; top:60px; left:60px; z-index:1001; width:122px; height:0px; padding-top:297px; overflow:hidden; background:url(img/common/logo.svg) top center no-repeat; background-size:contain;}
.siteLogo a{ display:block; width:100%; height:0; padding-top:207px;position:absolute; top:0; left:0;overflow:hidden;}
.siteLogo a:hover{ background-color:transparent;}
.siteLogo.icon:after{ content:''; display:block; width:60px; height:70px; background:url(img/common/20th.svg) no-repeat; background-size:contain; position:absolute; top:227px; left:30px;}

#siteLogoPC{  opacity:0.01; }
#siteLogoSP{ display:none;}

#siteLogoPC,
#siteLogoSP{ transition: all 600ms cubic-bezier(0,.8,.5,1);}

#siteLogoPC.open,
#siteLogoSP.open{ opacity:1;}	
	
	

/* header & footer
----------------------------------------------- */

header#globalHeader{ position:fixed; top:0; left:0; z-index:2000; width:100%; height:0; opacity:0.01; 
transition: all 500ms cubic-bezier(0,.8,.5,1);}
header#globalHeader.open{ opacity:1;}


header#globalHeader nav.tools{position:fixed; top:60px; right:60px; z-index:2002; width:61px; height:62px;font-size:1px !important; }
header#globalHeader nav.tools ul{ text-align:center; text-align:left;}
header#globalHeader nav.tools ul li{ display:inline-block; transition: all 250ms cubic-bezier(0.645, 0.045, 0.355, 1.000);}

header#globalHeader nav.tools ul li.facebook{ position:absolute; top:7.51px; left:0px;}
header#globalHeader nav.tools ul li.twitter{ position:absolute; top:7.51px; right:0px;}
header#globalHeader nav.tools ul li.menu{ position:absolute; top:36px; left:17.5px;}
header#globalHeader nav.tools ul li.list{ position:absolute; top:64px; right:0px;}
	
	
	
	

header#globalHeader nav.tools ul li .iconOff,
header#globalHeader nav.tools ul li .iconOn{width: 26px; height: 30px; position:absolute; top:1px; left:0;}

header#globalHeader nav.tools .fb .iconOff{ background:url(img/common/icon_facebook.svg) no-repeat; background-size:contain;}
header#globalHeader nav.tools .tw .iconOff{ background:url(img/common/icon_twitter.svg) no-repeat; background-size:contain;}

header#globalHeader nav.tools .fb .iconOn{ background:url(img/common/icon_facebook_on.svg) no-repeat; background-size:contain; opacity:0;}
header#globalHeader nav.tools .tw .iconOn{ background:url(img/common/icon_twitter_on.svg) no-repeat; background-size:contain; opacity:0;}
 
header#globalHeader nav.tools .hexagonBtn{}

header#globalHeader nav.tools .hexagonBtn.h .iconOff{ opacity:0;}
header#globalHeader nav.tools .hexagonBtn.h .iconOn{ opacity:1;}


	.coverMenuOpen header#globalHeader nav.tools ul li.sns,
	.coverMenuOpen header#globalHeader nav.tools ul li.list{ opacity:0 !important;pointer-events: none !important;}

header#globalHeader nav.tools ul li.menu{}
header#globalHeader nav.tools ul li.menu hr{ border-bottom:solid 2px #000; width:16px; box-sizing:border-box;}
header#globalHeader nav.tools ul li.menu hr:nth-of-type(1){ position:absolute; top:9.5px; left:5px;}
header#globalHeader nav.tools ul li.menu hr:nth-of-type(2){ position:absolute; top:13.5px; left:5px;}
header#globalHeader nav.tools ul li.menu hr:nth-of-type(3){ position:absolute; top:17.5px; left:5px;}


header#globalHeader nav.tools ul li map,
header#globalHeader nav.tools ul li area{cursor: pointer;}
	

	html:not(.touchDevice) .hexagonBtn.h hr{ border-bottom:solid 2px #fff !important;}





header#globalHeader nav.tools ul li.list{ opacity:0;pointer-events: none;}
body#works.worksDetailOn header#globalHeader nav.tools ul li.list{ opacity:1;pointer-events:auto;}

header#globalHeader nav.tools ul li.list hr{ border-bottom:solid 2px #000; border-top:0; width:2px; height:0; line-height:0;}
header#globalHeader nav.tools ul li.list hr:nth-of-type(1){ position:absolute; top:10px; left:8px;}
header#globalHeader nav.tools ul li.list hr:nth-of-type(2){ position:absolute; top:10px; left:12px;}
header#globalHeader nav.tools ul li.list hr:nth-of-type(3){ position:absolute; top:10px; left:16px;}

header#globalHeader nav.tools ul li.list hr:nth-of-type(4){ position:absolute; top:14px; left:8px;}
header#globalHeader nav.tools ul li.list hr:nth-of-type(5){ position:absolute; top:14px; left:12px;}
header#globalHeader nav.tools ul li.list hr:nth-of-type(6){ position:absolute; top:14px; left:16px;}

header#globalHeader nav.tools ul li.list hr:nth-of-type(7){ position:absolute; top:18px; left:8px;}
header#globalHeader nav.tools ul li.list hr:nth-of-type(8){ position:absolute; top:18px; left:12px;}
header#globalHeader nav.tools ul li.list hr:nth-of-type(9){ position:absolute; top:18px; left:16px;}


header#globalHeader nav.tools ul li.list.h hr{border-bottom:solid 2px #fff !important;transition: all 250ms cubic-bezier(0.645, 0.045, 0.355, 1.000);}
	
	
	

footer{ padding-top:60px;}


footer nav{}


footer nav .goUp{ text-align:center; height:50px; width:26px; margin:auto;}
body footer nav .goUp .hexagonBtn{ text-align:left;}

	body#top footer nav .goUp{ opacity:0;}

body footer nav .goUp .hexagonBtn .hexagonContents{ width:26px !important; padding:0;}
body footer nav .goUp .hexagonBtn .hexagonContents:before,
body footer nav .goUp .hexagonBtn .hexagonContents:after{ content:''; display:block; width:7px; border-top:solid 2px #000;
  background-color: #ffffff;
  transition: all 250ms cubic-bezier(0.645, 0.045, 0.355, 1.000); /* easeInOutCubic */
}

body footer nav .goUp .hexagonBtn .hexagonContents:before{transform: rotate(-40deg); position:absolute; top:13px; left:7.5px;}
body footer nav .goUp .hexagonBtn .hexagonContents:after{transform: rotate(40deg); position:absolute; top:13px; right:7.5px;}


body footer nav .goUp .hexagonBtn.h .hexagonContents:before,
body footer nav .goUp .hexagonBtn.h .hexagonContents:after{border-top:solid 2px #fff;}


footer nav ul{}
footer nav ul li{ display:inline-block;}
footer nav ul li:after{ content:'/'; display:inline-block; padding:0 10px;}
footer nav ul li:last-child:after{ display:none;}
footer nav ul li a{ text-decoration:none; color:#fff;}




footer nav ul.globalMenu{padding-top:50px;  margin-bottom:10px;}
footer nav ul.globalMenu li{}
footer nav ul.globalMenu li a{ opacity:.8}
footer nav ul.globalMenu li a:hover{ opacity:1;}

footer nav ul.links{}
footer nav ul.links li{}
footer nav ul.links li a{ opacity:.8; }
footer nav ul.links li a:hover{ opacity:1;}

footer .copy{ padding-top:50px; font-size:0.85rem; opacity:.8}


footer nav ul li.deactive a{ opacity:.2; pointer-events: none; text-decoration:none;}
footer nav ul li.deactive a:hover{ opacity:.2;}
	

/* #contentsWrap
----------------------------------------------- */

#contentsWrap h1{  font-size:3.5rem; margin-bottom:84px; height:100px;letter-spacing:0.08em;}

#contentsWrap section article{ margin:0 auto 100px auto; max-width:820px; position:relative;}

#contentsWrap section article h2{ margin-bottom:45px; font-size:1.8rem;}


#contentsWrap .titleRead{ text-align:center;transition: all 250ms ease-out 0.3s;  line-height:1.5; margin-bottom:60px;}
#contentsWrap .titleRead p{ margin-bottom:0;}
	

#contentsWrapTop{ width:100%; margin:auto; min-width:500px; }



section#mainTop{min-height:60vh;  transition: all 500ms ease-in-out;}

.absHide{ position:absolute; top:0; left:0; opacity:0.3 !important; display:block !important;}

/* top
----------------------------------------------- */
body#top.home #contentsWrap{ padding-top:180px;}

#contentsWrapTop .logo{ margin-bottom:100px;}

body#top.home section#mainTop{min-height:60vh;}



/* works
----------------------------------------------- */




#worksWrap{ border:solid 0px #ccc !important; 


    transition: all 500ms cubic-bezier(0.000, 0.000, 0.090, 0.985); 
	
	text-align:left;
	
	transform-origin: 0 0;
	
	
	}


#worksWrap.abs{}


#incPageBG{ position:fixed; width:100%; height:100%; top:0; left:0; z-index:2;opacity:0; overflow:hidden; background-color:#000; background-size:cover; background-position:center center;
transition: all 1000ms cubic-bezier(0,.8,.5,1);
	 pointer-events: none;
	 
  transform: scale(2,2);
  transform-origin:center center;
  
  
}



#incPageBG:after{ content:''; display:none; position:fixed; width:100%; height:100%; z-index:999; background: url(img/parts/black_282828.jpg);}

#incPageBG.open{
	
  opacity:.15;
	transition: all 1000ms cubic-bezier(0,.8,.5,1);
  transform: scale(1.1,1.1);
  transform-origin:center center;
}

#incPage{  
	 opacity:0.001; 
     transition: all 500ms ease-in-out;
	 pointer-events: none;
	 padding-top:0px;
	
 }
 
#incPage.open{ opacity:1; pointer-events:auto;}
body.worksDetailDirect #incPage{}

	#works #contentsWrap .titleRead{}
	.worksDetailOn #contentsWrap .titleRead{ opacity:0; }

#contentsWrap article .detailHeader{ padding-top:80px; }

	

#contentsWrap article .detailHeader .clients{ line-height:1; margin-bottom:20px; font-size:1rem; }
#contentsWrap article .detailHeader h2{ margin-bottom:54px; font-size:2.2rem; line-height:1.3;}
#contentsWrap article .detailHeader h3{ line-height:1; margin-bottom:28px; font-size:1rem; }

#contentsWrap article .detailHeader .role{ margin-bottom:53px; font-size:0.7rem; }

#contentsWrap article .detailHeader .role ul.roleList{ display:inline-block; padding-left:5px;}
#contentsWrap article .detailHeader .role ul.roleList li{ display:inline-block;}
#contentsWrap article .detailHeader .role ul.roleList li:after{ content:'/'; display:inline-block; padding:0 5px;}
#contentsWrap article .detailHeader .role ul.roleList li:last-child:after{ display:none;}

	#contentsWrap article .detailHeader .role .help{ width:15px; height:15px; margin-top:-3px; display:inline-block; margin-left:10px; vertical-align:middle; cursor:pointer; position:relative; background:url(img/parts/help.svg) no-repeat; background-size:contain;}
	
	#contentsWrap article .detailHeader .role .help .inner{ display:block; position:absolute; bottom:20px; left:10px;  text-align:left; height:0px; width:0px; overflow:hidden;}
	
	#contentsWrap article .detailHeader .role .help ul{ background-color:#000; color:#fff; padding:15px 20px; height:auto; width:auto;  border:solid 1px #666; border-radius:5px; opacity:0;  transition: all 300ms cubic-bezier(.50,.0,.50,1);}
	#contentsWrap article .detailHeader .role .help ul li{ white-space:nowrap; line-height:1.2;}
	
	#contentsWrap article .detailHeader .role .help:hover .inner{ display:block; overflow:auto; height:auto; width:auto; }
	#contentsWrap article .detailHeader .role .help:hover ul{opacity:1;}



#incPage .closeBtn{ border:solid 1px #fff; width:50px; height:50px; position:fixed; top:50px; right:50px;}

#incPage .contents{ width:80%; margin:0 auto 50px auto; padding:0; max-width:1000px;}
#incPage .contents p{ text-align:left;}
	

#incPage .contents img{ width:100%; height:auto; margin-bottom:10px;}


#incPage nav{ width:80%; margin:auto; max-width:1000px; position:relative; height:30px;}

#incPage nav .hexagonBtn{ text-align:left;}
#incPage nav .next,
#incPage nav .prev{}

#incPage nav .next{ position:absolute; right:0; top:7px;}
#incPage nav .prev{ position:absolute; left:0; top:7px;}

	
	#incPage nav .iconOff,
	#incPage nav .iconOn{width: 26px; height: 30px; position:absolute; top:0; left:0;}
	
	#incPage nav .next .iconOff{ background:url(img/common/icon_arrow_right.svg) no-repeat; background-size:contain;}
	#incPage nav .prev .iconOff{ background:url(img/common/icon_arrow_left.svg) no-repeat; background-size:contain;}
	
	#incPage nav .next .iconOn{ background:url(img/common/icon_arrow_right_on.svg) no-repeat; background-size:contain; opacity:0;}
	#incPage nav .prev .iconOn{ background:url(img/common/icon_arrow_left_on.svg) no-repeat; background-size:contain; opacity:0;}
	 
	#incPage nav.tools .hexagonBtn{}
	
	#incPage nav.tools .hexagonBtn.h .iconOff{ opacity:0;}
	#incPage nav.tools .hexagonBtn.h .iconOn{ opacity:1;}
	




#incPage nav .list{ position:absolute; left:50%; top:7px; margin-left:-13px}



#incPage nav.tools .list{}
#incPage nav.tools .list hr{ border-bottom:solid 2px #000; border-top:0; width:2px; height:0; line-height:0;}
#incPage nav.tools .list hr:nth-of-type(1){ position:absolute; top:10px; left:8px;}
#incPage nav.tools .list hr:nth-of-type(2){ position:absolute; top:10px; left:12px;}
#incPage nav.tools .list hr:nth-of-type(3){ position:absolute; top:10px; left:16px;}

#incPage nav.tools .list hr:nth-of-type(4){ position:absolute; top:14px; left:8px;}
#incPage nav.tools .list hr:nth-of-type(5){ position:absolute; top:14px; left:12px;}
#incPage nav.tools .list hr:nth-of-type(6){ position:absolute; top:14px; left:16px;}

#incPage nav.tools .list hr:nth-of-type(7){ position:absolute; top:18px; left:8px;}
#incPage nav.tools .list hr:nth-of-type(8){ position:absolute; top:18px; left:12px;}
#incPage nav.tools .list hr:nth-of-type(9){ position:absolute; top:18px; left:16px;}


#incPage nav.tools .list.h hr{border-bottom:solid 2px #fff !important;transition: all 250ms cubic-bezier(0.645, 0.045, 0.355, 1.000);}
	
	


#incDetail{ margin:auto; max-width:1000px;}

#incDetail img{ width:100%; height:auto;}




#worksWrapEnd{margin-bottom:100px !important;}
#worksWrapLoading{
	width:50px;
	height:50px;
	margin:auto;
	position:absolute;
	top:0;
	left:50%;
	margin-left:-25px;
	background:url(./img/parts/loading_works.gif) center center no-repeat;
	opacity:0;
	transition: opacity 300ms cubic-bezier(.50,.0,.50,1);
	
	
}

#worksWrapLoading.active{ opacity:1;}


.wp-video{ width:100% !important;}

.wp-video video{ width:100% !important; margin-bottom:2em;}


/* about
----------------------------------------------- */
body#about #contentsWrap section article{ margin-bottom: 200px;}

body#about #contentsWrap section article h2{ line-height:1;}

body#about #contentsWrap section article .wtny{ padding-top:35px;}
body#about #contentsWrap section article .dpts{ padding-top:50px;}
body#about #contentsWrap section article .fujisaryo{ padding-top:50px;}

body#about #contentsWrap section article .wtny img{ width:260px; height:auto; margin-bottom:15px;}
body#about #contentsWrap section article .dpts img{ width:165px; height:auto; margin-bottom:15px;}
body#about #contentsWrap section article .fujisaryo img{ width:230px; height:auto; margin-bottom:15px; margin-left: -10px;}


body#about #contentsWrap section article a,
body#about #contentsWrap section article a:hover{ text-decoration:none; background: transparent;}

body#about .contactBtn { display:inline-block; margin-bottom:40px; padding-top:20px;}
body#about .contactBtn a{ display:inline-block; cursor:pointer; padding-left:46px; height:32px; background:url(img/common/icon_form.svg) left center no-repeat !important; opacity:.8; background-size:contain; color:#fff; font-size:1.3rem; text-decoration:none !important}

body#about .contactBtn a:hover{ opacity:1;background-color:inherit !important; color:inherit !important;}

/* contact & entry (body.form)
----------------------------------------------- */

body.form #contentsWrap section p.read{ margin-bottom:30px;}


body.form  .mapBtn { display:inline-block; margin-bottom:40px; padding-top:20px;}
body.form  .mapBtn a{ display:inline-block; cursor:pointer; padding-left:46px; height:32px; background:url(img/common/icon_map.svg) left center no-repeat; opacity:.8; background-size:contain; color:#fff; font-size:1.3rem; text-decoration:none !important}
body.form  .mapBtn a:hover{ opacity:1;background-color:inherit !important; color:inherit !important;}


body.form #contentsWrap section article.input{ display:block;}

body.form #contentsWrap section input:-webkit-autofill {


  transition: all 9999s;
  background-color:transparent !important;
  color:#fff !important;
}
	
	
	body.form #contentsWrap section form{}
	
	body.form #contentsWrap section form .checkError{ display:none;font-family: 'Axis-Medium'; padding:10px; margin-bottom:20px; background-color:#c00;color:#282828;}
	body.form #contentsWrap section form .checkError br{ display:none;}
	
	body.form #contentsWrap section form ul{border-top:solid 2px #fff; overflow:hidden;}
	body.form #contentsWrap section form ul li{ border-bottom:solid 1px #fff; text-align:left; padding:10px;clear:both; min-height:125px;}
	
		body#contact.form #contentsWrap section form ul li:nth-of-type(1),
		body#contact.form #contentsWrap section form ul li:nth-of-type(2),
		body#contact.form #contentsWrap section form ul li:nth-of-type(3),
		body#contact.form #contentsWrap section form ul li:nth-of-type(4){ width:50%; float:left; clear:none;}
		
		body#contact.form #contentsWrap section form ul li:nth-of-type(1){border-right:solid 1px #fff;}
		body#contact.form #contentsWrap section form ul li:nth-of-type(2){}
		body#contact.form #contentsWrap section form ul li:nth-of-type(3){border-right:solid 1px #fff;}
		body#contact.form #contentsWrap section form ul li:nth-of-type(4){}
		
		
		body#entry.form #contentsWrap section form ul li:nth-of-type(1),
		body#entry.form #contentsWrap section form ul li:nth-of-type(2),
		body#entry.form #contentsWrap section form ul li:nth-of-type(3),
		body#entry.form #contentsWrap section form ul li:nth-of-type(4),
		body#entry.form #contentsWrap section form ul li:nth-of-type(5),
		body#entry.form #contentsWrap section form ul li:nth-of-type(6),
		body#entry.form #contentsWrap section form ul li:nth-of-type(11),
		body#entry.form #contentsWrap section form ul li:nth-of-type(12){ width:50%; float:left; clear:none;}
		
		body#entry.form #contentsWrap section form ul li:nth-of-type(1){border-right:solid 1px #fff;}
		body#entry.form #contentsWrap section form ul li:nth-of-type(2){}
		body#entry.form #contentsWrap section form ul li:nth-of-type(3){border-right:solid 1px #fff;}
		body#entry.form #contentsWrap section form ul li:nth-of-type(4){}
		body#entry.form #contentsWrap section form ul li:nth-of-type(5){border-right:solid 1px #fff;}
		body#entry.form #contentsWrap section form ul li:nth-of-type(6){}
		body#entry.form #contentsWrap section form ul li:nth-of-type(11){border-right:solid 1px #fff;}
		body#entry.form #contentsWrap section form ul li:nth-of-type(12){}
	
	body.form #contentsWrap section form ul li h4{ line-height:1; padding:0; margin-bottom:20px;}
	
	body.form #contentsWrap section form ul li h4 .must{ display:inline-block; font-family: 'Axis-Medium'; margin-left:5px; padding:2px 5px; font-size:0.8em; background-color:#c00;color:#282828; letter-spacing:0;}
	body.form #contentsWrap section form ul li .inp{ margin-bottom:5px; position:relative;}
	body.form #contentsWrap section form ul li .inp:before{ content:'→'; display:inline-block; width:30px; padding-top:5px; vertical-align:top;}
	
		body#entry.form #contentsWrap section form ul li.gender .inp{ padding-left:30px; position:relative;}
		body#entry.form #contentsWrap section form ul li.gender .inp:before{ display:none;}
		body#entry.form #contentsWrap section form ul li.gender .inp span{ display:inline-block;font-size:1.5em; margin-right:50px; padding-top:10px;}
		
		body#entry.form #contentsWrap section form ul li.privacy{ padding:30px 0 20px 0; text-align:center;}
		body#entry.form #contentsWrap section form ul li.privacy .inp{ padding:0px; white-space:nowrap;}
		body#entry.form #contentsWrap section form ul li.privacy .inp.must{ width:auto; display:inline-block; margin:auto; border:solid 1px #c00; padding:10px;}
		body#entry.form #contentsWrap section form ul li.privacy .inp:before{ display:none;}
		
		body#entry.form #contentsWrap section form ul li.privacy .privacyText{ border:solid 1px #fff; height:250px; padding:30px; overflow-y:auto; margin-bottom:20px;text-align:left;}
		
		body#entry.form #contentsWrap section form ul li.privacy .privacyText h4{ font-size:1.2rem;}
		body#entry.form #contentsWrap section form ul li.privacy .privacyText h5{ font-size:1.0rem;}
		body#entry.form #contentsWrap section form ul li.privacy .privacyText p{ font-size:0.8rem;}
	
		body#entry.form #contentsWrap section form ul li.privacy .error{ display:none; margin-bottom:10px; text-align:center; font-size:1.5rem; color:#c00;}
		body#entry.form #contentsWrap section form ul li.privacy .error.active{ display:block;}
		
		
		
	
		input[type=radio], input[type=checkbox] {
		  display: none;
		}
		
		.radio, .checkbox {
		  box-sizing: border-box;
		  transition: background-color 0.2s linear;
		  position: relative;
		  display: inline-block;
		  margin: 0;
		  padding: 0px 0px 0px 25px;
		  
		  
		  vertical-align: middle;
		  cursor: pointer;
		}
		.radio:hover, .checkbox:hover {
		 
		}
		.radio:hover:after, .checkbox:hover:after {
		
		}
		.radio:after, .checkbox:after {
		  transition: border-color 0.2s linear;
		  position: absolute;
		  top: 50%;
		  left: 0px;
		  display: block;
		  margin-top: -9px;
		  width: 16px;
		  height: 16px;
		  border: 1px solid #fff;
		  content: '';
		}
		
		.radio:after{
		
		  border-radius: 8px;
		}
		
		.radio:before {

		  transition: opacity 0.2s linear;
		  position: absolute;
		  top: 50%;
		  left: 4px;
		  display: block;
		  margin-top: -6px;
		  width: 10px;
		  height: 10px;
		  border-radius: 50%;
		  background-color: #fff;
		  content: '';
		  opacity: 0;
		}
		input[type=radio]:checked + .radio:before {
		  opacity: 1;
		}
		
		.checkbox:before {
		  transition: opacity 0.2s linear;
		  position: absolute;
		  top: 50%;
		  left: 5px;
		  display: block;
		  margin-top: -8px;
		  width: 5px;
		  height: 9px;
		  border-right: 3px solid #fff;
		  border-bottom: 3px solid #fff;
		  content: '';
		  opacity: 0;
		  transform: rotate(45deg);
		}
		input[type=checkbox]:checked + .checkbox:before {
		  opacity: 1;
		}
		
		
	
	body.form #contentsWrap section form ul li .read{ font-size:0.85rem; line-height:1.8; margin-bottom:20px;}
	
	body.form #contentsWrap section form ul li .inp input.text,
	body.form #contentsWrap section form ul li .inp textarea.text{ width:calc(100% - 50px); box-sizing:border-box; padding:10px; font-size:1.5rem; color:#fff; background-color:transparent; border:solid 0px #666; color:#fff !important; line-height:1.5; }
	
		body.form #contentsWrap section form ul li .inp input.must,
		body.form #contentsWrap section form ul li .inp textarea.must{ border:solid 1px #c00;}
		
		
		body.form #contentsWrap section form ul li .must_check{
		   
			width:100%;
		
			color:#C00;
		    padding: 0px;
    		font-size: 1.5rem;
			position:absolute; top:-15px; left:30px;
		}
		
		
		
		body.form #contentsWrap section form ul li .inp input.done,
		body.form #contentsWrap section form ul li .inp textarea.done{ border:0;}
	
	body.form #contentsWrap section form ul li .inp textarea.text{ height:auto; overflow-y:auto;}
	
	
	body.form #contentsWrap section form .check{ border-bottom:solid 1px #fff; padding:20px; text-align:center;}
	body.form #contentsWrap section form .check .g-recaptcha{ margin:auto; width:304px;}
	body.form #contentsWrap section form .action{padding:60px 20px 20px 20px;}
	
	body.form #contentsWrap section form .action button.send,
	body.form #contentsWrap section form .action button.send2{ cursor:pointer; padding-left:52px; height:22px; background:url(img/common/icon_letter.svg) left center no-repeat; background-size:contain; color:#fff; opacity:.8;}
	
	body.form #contentsWrap section form .action button.deactive{ opacity:.3; pointer-events:none; cursor:default;}
	
	body.form #contentsWrap section form .action button.active:hover{ opacity:1;}
	
	body.form #contentsWrap section form .action button.edit{ cursor:pointer; padding-left:0px; height:22px; background:url(img/common/icon_edit.svg) left center no-repeat; background-size:contain; color:#fff;}
	
	body.form #contentsWrap section form .action .ready{ width:100%; margin:auto; overflow:hidden; display:none;}
	
	body.form #contentsWrap section form .action .ready button.edit{ margin-right:50px;}
	body.form #contentsWrap section form .action .ready button.send2{margin-left:50px;}
	
	body.form #contentsWrap section form ul li .inp .check{ width:calc(100% - 55px); box-sizing:border-box; padding:10px; font-size:1.5rem; color:#fff;  position:absolute; top:0px; left:40px; border:solid 1px #f30; text-align:left; display:none; font-size:1rem; font-style:normal;}



	body.form #contentsWrap section .submitReady{ display:none;}

	body.form #contentsWrap section #confirmText{padding:10px; margin-bottom:20px; font-size:1.0rem; line-height:1.8; background-color:#eee;color:#000;}
	body.form #contentsWrap section #confirmText p{ margin:0;}

body.form #contentsWrap section article.finish{ display:none;}

	body.form #contentsWrap section article.finish h3{ font-size:1.5rem; margin-bottom:50px;}
	body.form #contentsWrap section article.finish p{ padding-left:1em; margin-bottom:10px;}
	
	
	
	
	.cp_ipselect_wrap{	display: inline-block; padding: 0; margin: 0;}
	.cp_ipselect {
	overflow: hidden;
	width: 80%;
	margin: 0em 0 0.5em 0;
	text-align: center;
	display: block;
}
.cp_ipselect select {
	width: 100%;
	padding-right: 1em;
	cursor: pointer;
	text-indent: 0.01px;
	text-overflow: ellipsis;
	border: none;
	outline: none;
	background: transparent;
	background-image: none;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
	font-size: 1.2em;
	 font-family: 'Axis-Light'; 
	 color: #000;
}
.cp_ipselect select::-ms-expand {
    display: none;
}
.cp_ipselect.cp_sl03 {
	position: relative;
	border-radius: 2px;
	border: 0px solid #999;
	background:#fff;
}
.cp_ipselect.cp_sl03::before {
	position: absolute;
	top: 50%;
	right: 0.8em;
	transform: translate(0,-50%);
	width: 0;
	height: 0;
	padding: 0;
	content: '';
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-top: 6px solid #000;
	pointer-events: none;
}
.cp_ipselect.cp_sl03 select {
	padding: 8px 38px 8px 8px;

}

.select_match{ font-size: 0.8em; font-family: 'Axis-Light'; padding-left: 40px; }
.hissu_select{
    display: none;
}
.hissu_select span{
		 font-family: 'Axis-Medium';
	display: inline-block;
	    color: #000;
	    background-color: #c00;
	    	border-radius: 2px;
	    font-size: 0.8em;
	    padding: 0.2em 1em;
	
	    margin-bottom: 0.75em;
}
	
/* wanted
----------------------------------------------- */

body#wanted #contentsWrap section p.read{ margin-bottom:30px;}

body#wanted #contentsWrap section  article div.area{ padding:50px; margin-bottom:2em; border:solid 1px #fff;}
body#wanted #contentsWrap section  article div.area p{ margin-bottom:0;}
body#wanted #contentsWrap section  article ul{ margin-bottom:2em; margin-left:1.5em;}
body#wanted #contentsWrap section  article ul li{ list-style:disc;}

body#wanted #contentsWrap section  .action{ padding-top:50px;}

body#wanted #contentsWrap section  .action a{ display:inline-block; padding-left:52px; height:22px; background:url(img/common/icon_entry.svg) left center no-repeat; background-size:contain; color:#fff; line-height:22px;opacity:.8; text-decoration:none;}

body#wanted #contentsWrap section  .action a:hover{ opacity:1;background-color:inherit !important; color:inherit !important; }


/* fonts
----------------------------------------------- */

body#fonts ul.fontlist{ overflow:hidden;}

body#fonts ul.fontlist li{ width:33.333%; float:left; margin:0;padding-top:16.1%;}

ul.fontlist li:nth-child(odd) { background-color:#ccc;}
ul.fontlist li:nth-child(even) { background-color:#666;}


body#fonts ul.fontlist li:nth-of-type(1) { background:url(img/fonts/01.png) center center no-repeat; background-size:cover;}
body#fonts ul.fontlist li:nth-of-type(2) { background:url(img/fonts/02.png) center center no-repeat; background-size:cover;}
body#fonts ul.fontlist li:nth-of-type(3) { background:url(img/fonts/03.png) center center no-repeat; background-size:cover;}
body#fonts ul.fontlist li:nth-of-type(4) { background:url(img/fonts/04.png) center center no-repeat; background-size:cover;}
body#fonts ul.fontlist li:nth-of-type(5) { background:url(img/fonts/05.png) center center no-repeat; background-size:cover;}
body#fonts ul.fontlist li:nth-of-type(6) { background:url(img/fonts/06.png) center center no-repeat; background-size:cover;}
body#fonts ul.fontlist li:nth-of-type(7) { background:url(img/fonts/07.png) center center no-repeat; background-size:cover;}
body#fonts ul.fontlist li:nth-of-type(8) { background:url(img/fonts/08.png) center center no-repeat; background-size:cover;}
body#fonts ul.fontlist li:nth-of-type(9) { background:url(img/fonts/09.png) center center no-repeat; background-size:cover;}
body#fonts ul.fontlist li:nth-of-type(10){ background:url(img/fonts/10.png) center center no-repeat; background-size:cover;}

body#fonts ul.fontlist li:nth-of-type(11) { background:url(img/fonts/11.png) center center no-repeat; background-size:cover;}
body#fonts ul.fontlist li:nth-of-type(12) { background:url(img/fonts/12.png) center center no-repeat; background-size:cover;}
body#fonts ul.fontlist li:nth-of-type(13) { background:url(img/fonts/13.png) center center no-repeat; background-size:cover;}
body#fonts ul.fontlist li:nth-of-type(14) { background:url(img/fonts/14.png) center center no-repeat; background-size:cover;}
body#fonts ul.fontlist li:nth-of-type(15) { background:url(img/fonts/15.png) center center no-repeat; background-size:cover;}
body#fonts ul.fontlist li:nth-of-type(16) { background:url(img/fonts/16.png) center center no-repeat; background-size:cover;}
body#fonts ul.fontlist li:nth-of-type(17) { background:url(img/fonts/17.png) center center no-repeat; background-size:cover;}
body#fonts ul.fontlist li:nth-of-type(18) { background:url(img/fonts/18.png) center center no-repeat; background-size:cover;}
body#fonts ul.fontlist li:nth-of-type(19) { background:url(img/fonts/19.png) center center no-repeat; background-size:cover;}
body#fonts ul.fontlist li:nth-of-type(20) { background:url(img/fonts/20.png) center center no-repeat; background-size:cover;}

body#fonts ul.fontlist li:nth-of-type(21) { background:url(img/fonts/21.png) center center no-repeat; background-size:cover;}
body#fonts ul.fontlist li:nth-of-type(22) { background:url(img/fonts/22.png) center center no-repeat; background-size:cover;}
body#fonts ul.fontlist li:nth-of-type(23) { background:url(img/fonts/23.png) center center no-repeat; background-size:cover;}
body#fonts ul.fontlist li:nth-of-type(24) { background:url(img/fonts/24.png) center center no-repeat; background-size:cover;}
body#fonts ul.fontlist li:nth-of-type(25) { background:url(img/fonts/25.png) center center no-repeat; background-size:cover;}
body#fonts ul.fontlist li:nth-of-type(26) { background:url(img/fonts/26.png) center center no-repeat; background-size:cover;}
body#fonts ul.fontlist li:nth-of-type(27) { background:url(img/fonts/27.png) center center no-repeat; background-size:cover;}
body#fonts ul.fontlist li:nth-of-type(28) { background:url(img/fonts/28.png) center center no-repeat; background-size:cover;}
body#fonts ul.fontlist li:nth-of-type(29) { background:url(img/fonts/29.png) center center no-repeat; background-size:cover;}
body#fonts ul.fontlist li:nth-of-type(30) { background:url(img/fonts/30.png) center center no-repeat; background-size:cover;}

body#fonts ul.fontlist li:nth-of-type(31) { background:url(img/fonts/31.png) center center no-repeat; background-size:cover;}
body#fonts ul.fontlist li:nth-of-type(32) { background:url(img/fonts/32.png) center center no-repeat; background-size:cover;}
body#fonts ul.fontlist li:nth-of-type(33) { background:url(img/fonts/33.png) center center no-repeat; background-size:cover;}
body#fonts ul.fontlist li:nth-of-type(34) { background:url(img/fonts/34.png) center center no-repeat; background-size:cover;}
body#fonts ul.fontlist li:nth-of-type(35) { background:url(img/fonts/35.png) center center no-repeat; background-size:cover;}
body#fonts ul.fontlist li:nth-of-type(36) { background:url(img/fonts/36.png) center center no-repeat; background-size:cover;}
body#fonts ul.fontlist li:nth-of-type(37) { background:url(img/fonts/37.png) center center no-repeat; background-size:cover;}
body#fonts ul.fontlist li:nth-of-type(38) { background:url(img/fonts/38.png) center center no-repeat; background-size:cover;}
body#fonts ul.fontlist li:nth-of-type(39) { background:url(img/fonts/39.png) center center no-repeat; background-size:cover;}
body#fonts ul.fontlist li:nth-of-type(40) { background:url(img/fonts/40.png) center center no-repeat; background-size:cover;}

body#fonts ul.fontlist li:nth-of-type(41) { background:url(img/fonts/41.png) center center no-repeat; background-size:cover;}
body#fonts ul.fontlist li:nth-of-type(42) { background:url(img/fonts/42.png) center center no-repeat; background-size:cover;}



body#fonts #contentsWrap section  .action{ padding-top:50px; clear:both;}

body#fonts #contentsWrap section  .action a{ display:inline-block; padding-left:52px; height:22px; background:url(img/common/icon_download.svg) left center no-repeat; background-size:contain; color:#fff; line-height:22px; opacity:.8; text-decoration:none;}

body#fonts #contentsWrap section  .action a:hover{ opacity:1;background-color:inherit !important; color:inherit !important;}


/* coverMenu
----------------------------------------------- */

#coverMenu{ 
	position:fixed; 
	top:0; 
	left:0; 
	z-index:1000; 
	width:100%; 
	height:100%; 
	opacity:0; 
	overflow:hidden; 
	
    transition: all 750ms cubic-bezier(0.8, 0, 0.2, 1);
	pointer-events: none; 
}

#coverMenu:before{ content:''; display:block; 
position:fixed; 
	top:0; 
	left:0; 
	z-index:999; 
	width:100%; 
	height:100%; 
	background:#262626;
	opacity:.9;
	
	}

#coverMenu.open{ opacity:1; pointer-events:auto;}

#coverMenu .spMenuCloseBtn{ width:50px; height:58px; position:fixed; top:71px; right:66px;z-index:10; text-align:left;

}

#coverMenu .spMenuCloseBtn nav{ position:absolute; top:20px; left:11px;
  }
  

#coverMenu .spMenuCloseBtn nav.tools ul li.close .iconOff,
#coverMenu .spMenuCloseBtn nav.tools ul li.close .iconOn{width: 12px; height: 12px; position:absolute; top:8.5px; left:7px;}

#coverMenu .spMenuCloseBtn nav.tools ul li.close .iconOff{ background:url(img/common/icon_close.svg) no-repeat; background-size:contain;}

#coverMenu .spMenuCloseBtn nav.tools ul li.close .iconOn{ background:url(img/common/icon_close_on.svg) no-repeat; background-size:contain; opacity:0;}
 

#coverMenu .spMenuCloseBtn nav.tools ul li.close.h .iconOff{ opacity:0;}
#coverMenu .spMenuCloseBtn nav.tools ul li.close.h .iconOn{ opacity:1;}






#coverMenu nav{ position:relative; z-index:1001;}

#coverMenu nav .globalMenu{ text-align:right; width:300px; position:fixed; top:160px; right:66px;}
#coverMenu nav .globalMenu li{padding:10px;}
#coverMenu nav .globalMenu li a{ display:block; font-size:1.2rem; line-height:1; opacity:.8; text-decoration:none !important;}
#coverMenu nav .globalMenu li a:hover{  opacity:1;background-color:inherit !important; color:inherit !important;}
	
	
	
	
	

	body.coverMenuOpen{}
	body.coverMenuOpen header#globalHeader nav.tools ul li.sns{}
	body.coverMenuOpen header#globalHeader nav.tools ul li.menu hr:nth-of-type(1){ transform: rotate(45deg);transform-origin:left center;position:absolute; top:8px; left:7px; width:17px;}
	body.coverMenuOpen header#globalHeader nav.tools ul li.menu hr:nth-of-type(2){ transform: rotate(-45deg);transform-origin:left center;position:absolute; top:20px; left:7px; width:17px;}
	body.coverMenuOpen header#globalHeader nav.tools ul li.menu hr:nth-of-type(3){ opacity:0;}
	
	
	
#coverMenu nav .globalMenu li.deactive{ }
#coverMenu nav .globalMenu li.deactive a{opacity:.2; pointer-events: none;}
#coverMenu nav .globalMenu li.deactive a:hover{opacity:.2}


/* activecontents
----------------------------------------------- */

	body#top footer nav .globalMenu li.top a,
	body#works footer nav .globalMenu li.works a,
	body#about footer nav .globalMenu li.about a,
	body#contact footer nav .globalMenu li.contact a,
	body#wanted footer nav .globalMenu li.wanted a,
	body#fonts footer nav .globalMenu li.fonts a,
	body#top footer nav .globalMenu li.top a:hover,
	body#works footer nav .globalMenu li.works a:hover,
	body#about footer nav .globalMenu li.about a:hover,
	body#contact footer nav .globalMenu li.contact a:hover,
	body#wanted footer nav .globalMenu li.wanted a:hover,
	body#fonts footer nav .globalMenu li.fonts a:hover,
	body#top #coverMenu nav .globalMenu li.top a,
	body#works #coverMenu nav .globalMenu li.works a,
	body#about #coverMenu nav .globalMenu li.about a,
	body#contact #coverMenu nav .globalMenu li.contact a,
	body#wanted #coverMenu nav .globalMenu li.wanted a,
	body#fonts #coverMenu nav .globalMenu li.fonts a,
	body#top #coverMenu nav .globalMenu li.top a:hover,
	body#works #coverMenu nav .globalMenu li.works a:hover,
	body#about #coverMenu nav .globalMenu li.about a:hover,
	body#contact #coverMenu nav .globalMenu li.contact a:hover,
	body#wanted #coverMenu nav .globalMenu li.wanted a:hover,
	body#fonts #coverMenu nav .globalMenu li.fonts a:hover{ /* color:#990000; pointer-events: none; */ }



/* emblem
----------------------------------------------- */

#emblemCover {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color:#262626;
  opacity:.75;
  z-index: 1;
  transition: all 1000ms cubic-bezier(0.8, 0, 0.2, 1);
}


body#top.home #emblemCover{ opacity:0;}




#emblem {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 0;
  transition: all 1000ms cubic-bezier(0.8, 0, 0.2, 1);
}

/*body.worksDetailOn #emblemCover{ opacity:0;}
body.worksDetailOn #emblem{ opacity:0.30;}*/


#pageLoadingAnimBar{ opacity:1; position:fixed; top:0; left:0; z-index:5000; width:80%; height:3px;  font-size:1rem; background-color:#fff;  transition: all 1000ms ease-out;}


#pageLoadingAnim{ opacity:1; position:fixed; top:50%; left:50%; z-index:5000; width:200px; height:50px; margin:-25px 0 0 -100px; font-size:1rem; text-align:center; color:#666;}


#pageLoadingAnim span{
	-webkit-animation:tenmetsu 0.03s ease-in-out infinite alternate;
    -moz-animation:tenmetsu 0.03s ease-in-out infinite alternate;
    animation:tenmetsu 0.03s ease-in-out infinite alternate;
}
@-webkit-keyframes tenmetsu{
    0% {opacity:0;}
    100% {opacity:1;}
}
@-moz-keyframes tenmetsu{
    0% {opacity:0;}
    100% {opacity:1;}
}
@keyframes tenmetsu{
    0% {opacity:0;}
    100% {opacity:1;}
}



#pageLoadingAnimBar.start{
	-webkit-animation:bar 5s forwards;
    -moz-animation:bar 5s forwards;
    animation:bar 5s forwards;
}
@-webkit-keyframes bar{
    0% {width:0;}
	30% {width:50%;}
    80% {width:80%;}
}
@-moz-keyframes bar{
    0% {width:0;}
	30% {width:50%;}
    80% {width:80%;}
}
@keyframes bar{
    0% {width:0;}
	30% {width:50%;}
    80% {width:80%;}
}

#pageLoadingAnimBar.end{
	-webkit-animation:barend 0.3s forwards;
    -moz-animation:barend 0.3s forwards;
    animation:barend 0.3s forwards;
}
@-webkit-keyframes barend{
    0% {width:80%;}
	50% { }
    90% {width:100%;}
	100% {width:100%; opacity:0;}
}
@-moz-keyframes barend{
    0% {width:80%;}
	50% { }
    90% {width:100%;}
	100% {width:100%; opacity:0;}
}
@keyframes barend{
    0% {width:80%;}
	50% { }
    90% {width:100%;}
	100% {width:100%; opacity:0;}
}