@charset "utf-8";
  @import url("https://use.typekit.net/glz6udz.css");
body{
	/*background:#f4f3f1;*/
	/*background:url(../images/bg.jpg) left top repeat;*/

	font-family:  "neue-haas-grotesk-display","HelveticaNeue","Helvetica Neue","Helvetica Neue Light",Helvetica,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"ＭＳ Ｐゴシック","MS PGothic",Verdana,Arial,sans-serif;
    line-height: 1;
	color:#333;
	}

#menu-btn_sp {
	position: fixed;
	left: 35px;
	top: 40px;
	width: 39px;
	z-index: 10000;
	cursor: pointer;
}
.menu-trigger, .menu-trigger span {
	display: inline-block;
	transition: all .4s;
	box-sizing: border-box;
}
.menu-trigger {
	position: relative;
	width: 20px;
	height: 20px;
}
.menu-trigger span {
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	background-color: #000;
	border-radius: 2px;
}
.menu-trigger.close span {
	background-color: #fff;
}
.menu-trigger span:nth-of-type(1) {
	top: 0;
}
.menu-trigger span:nth-of-type(2) {
	display: none;
}
.menu-trigger span:nth-of-type(3) {
	bottom: 0;
}
.menu-trigger.close span:nth-of-type(1) {
    -webkit-transform: translateY(2px) rotate(-45deg);
    transform: translateY(2px) rotate(-45deg);
	width: 20px;
}
.menu-trigger.close span:nth-of-type(2) {
	opacity: 0;
}
.menu-trigger.close span:nth-of-type(3) {
	-webkit-transform: translateY(-7px) rotate(0);
	transform: translateY(-7px) rotate(0);
	width: 300px;
}
.menuWrapp {
	
	position: fixed;
	left: -100%;
	top:0;
	z-index: 90;
	width: 100%;
	background: rgba(0,0,0,0.8);
	height: 100vh;
	transition: all 0.3s ease;
}
.menuWrapp.on {
	position: fixed;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 101;
	width: 100%;
	
	height: 100vh;
}
.close {
	color: #fff;
	position: absolute;
}
.sp_menu {
	height: 100%;
	
	width: 100%;
	display: table;
}
.sp_menuWrap {
	display: table-cell;
	vertical-align: middle;
	text-align: center;
}
.sp_menu ul li {
	font-size: 40px;
	text-align: left;
	font-weight: 400;
	margin-bottom: 30px;
	letter-spacing: 0.08em;
	padding-left: 40px;
}
.sp_menu ul li a {
	display: block;
	text-decoration: none;
	color: #fff;
	line-height:1;
}
.textcontentW.footer h3 {
	font-weight: 400;
}
.sideleftMiddle li {
	display: inline-block;
	font-size: 11px;
	color: #444;
	padding: 0 0 0 5px;
}
#logo_navi{
	position:fixed;
	top:33px;
	right:33px;
	width:297px;
	z-index:101;
	mix-blend-mode: color-burn;
	}	

#logo_navi li{
	float:left;
	margin-right:10px;
	padding-bottom:10px;
	}
	
.acv{ border-bottom:1px solid #535353;}
	
#logo_navi li a{ text-decoration:none; color: #535353; 
    line-height: 1; font-style: italic; font-size:16px; letter-spacing:0.2em;}
#logo_navi ul{
	padding-top:15px;
	}
	
.copy{ position: fixed; right: 20px; top: 30%;  writing-mode: vertical-rl; letter-spacing: 0.10em; font-weight: 600; white-space: nowrap; font-size: 24px;}
.copy span{ font-weight: 300;}
#conarea{
	width:100%;
	padding: 0 122px;
	padding-top:130px;
	display:none; box-sizing: border-box;
word-break: break-all;}
.inner{	display: flex;
  flex-wrap: wrap; width: 100%;}
	
.Article{
	position: relative;
	margin-bottom:130px;
	width:25%;
	box-sizing: border-box;
	padding:0 70px 0 25px;
	z-index:2;}

.Article img{ width: 100%; height: auto;}
	
.Article .tits{
	position: absolute; left: 0; top: 0;     position: absolute;
    top: 0;
    left: 25px;;
    display: flex;
        transform: rotate(90deg) translateY(19px);
    align-items: flex-end;
    transform-origin: left top;
    color: #00378b;
    transition-timing-function: cubic-bezier(0.83, 0, 0.17, 1);
    transition-duration: .3s;
    transition-property: color;
    will-change: color;
	

	font-size:17px;
   
	letter-spacing:0.1em;
	color:#333;
	white-space: nowrap;

	z-index:2;
	}
.Article .tits h2{ font-weight: 500;}
.Article .txt{
	font-size:10px;
	color:#666;
	line-height:1.3;
	letter-spacing:0.1em;
	padding-left: 20px;

	/*text-align:right;*/
	z-index:2;
	}
	
.mark{
	margin-bottom:20px;
	z-index:2;}
	
.sam{
 box-shadow: -2px -2px 10px 3px rgba(0, 90, 255, 0.1), 2px 2px 10px 5px rgba(0, 213, 83, 0.1);

	z-index:2;
	z-index:2;}
	
.sam2{
	margin-top:40px;
	padding-left:20px;
	z-index:2;}
	
.mark2{
	text-align:right;
	padding-top:20px;
	margin-right:-20px;}
	
.Article a{
	color:#999;
	text-decoration:none;
	}
	
.Article a:hover{
	color:#333;
	text-decoration:none;
	}
#cpright{

	}
	
#cpright p{
font-size: 12px;
	margin-left: 20px;
	margin-bottom: 20px;
	letter-spacing: 0.11em

	}
	
#cpright ul{
	position:absolute;
	top:300px;
	right:130px;
	}
	
#cpright ul li{
	float:left;
	padding-right:5px;}







#namearea{
	width:440px;
	
	}
	
#name{
	float:right;
	width:290px;
	
	font-family: Georgia,Helvetica Neue;}
	
#mail{
	font-family: Georgia,Helvetica Neue;
	font-size:12px;
	margin-top:20px;
	}
#mailad{
	margin-left:5px;}
	
#about{
	width:490px;
	margin:0 auto;
	}
	
#sns li{
	float:left;}
	
#sns{
	margin-top:20px;}
	
#abttxt{
	font-family:"ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
	font-size:12px;
	line-height:1.8;
	margin-top:10px;
	}
	
#back-top{
	position:fixed;
	bottom:20px;
	right:20px;}
	
.navigation{
	font-family: 'Helvetica Neue',Helvetica,'Cabin',Arial,Verdana,sans-serif; color: #535353; font-style:italic;
	font-size:12px;
	text-align:center;
	width:100px; margin:0 auto; margin-bottom:100px;}
	
.navigation li{ float:left; margin-right:12px; width:10px; text-align:center; padding-bottom:5px; }

.navigation li a{color: #535353; text-decoration:none;}
.second{ position: relative; margin-left: 40px;}


.second .tits{position: absolute;
    left: 0;
    top: 50px;
    position: absolute;
    left: 25px;
    display: block
;
    transform: rotate(90deg) translateY(19px);
    align-items: flex-end;
    transform-origin: left top;
    color: #00378b;
    transition-timing-function: cubic-bezier(0.83, 0, 0.17, 1);
    transition-duration: .3s;
    transition-property: color;
    will-change: color;
    font-size: 17px;
    letter-spacing: 0.1em;
    color: #333;
    white-space: nowrap;
    z-index: 2; line-height: 1.1;}

.second .tits h2{ font-size: 29px; font-weight: 500;}
.second .tits p{ font-size: 13px; font-weight: 300; line-height: 1.2}

.second .img {
    padding-left: 30px;
    padding-right: 40px;
}

.second .img img{ width: 100%; height: auto}

.backbtn{ position: fixed; left: 60px; top: 90px;}
.backbtn a{ color: #000; text-decoration: none; font-weight: 500;}
.backbtn a span{ transition: all .3s ease-out; display: block; padding-bottom: 5px; font-size: 14px;}
.backbtn a:hover:before{ transition: all .3s ease-out; content: ""; display: block; width: 30px; height: 1px; background: #000; transform: translateY(10px) rotate(-45deg);}
.backbtn a:after{ content: ""; display: block; width: 140px; height: 1px; background: #000;}
.backbtn a:hover span{transform: translateX(30px)}
.tits a {
    color: #999;
	text-decoration: none;
font-size: 14px;}

.about{ padding-top: 140px; line-height: 29px;}

.sectit{ font-size: 28px; font-weight: 500; margin-bottom: 60px; letter-spacing: 0.1em}
.sectit span{ font-weight: 300;}
.profile{ padding-top: 80px; }
.profile:before{ content: ""; display: block;width: 80px; height: 1px; background: #000; margin-bottom: 80px;}
.prfbame{ font-size: 20px; margin-bottom: 20px;}
@media screen and (max-width: 1240px) {
.Article{ width: 33%;}
	#conarea{padding: 130px 40px 0 80px;}
}

@media screen and (max-width: 950px) {
.Article{ width: 50%;}
	.aboutsecon{  margin-left: 0; padding-right: 40px}
	
}
	
	@media screen and (max-width: 650px) {
.Article{ width: 100%;}
	.aboutsecon{  margin-left: 0; padding-right: 40px}
		#logo_navi{ width: 200px; right: 20px;}
		.logo{ width: 200px}
		.logo img{ width: 100%; height: auto;}
		.copy{ font-size: 14px;}
		    #conarea {
        padding: 130px 0px 0 59px;
    }
		
		.backbtn{
    position: fixed;
    left: 30px;
    top: 100px;
}
.second {
    position: relative;
    margin-left: 0px;
}
		.second .img {
    padding-left: 20px;
    padding-right: 60px;
}
		.tits a{ font-size: 12px;}
		.second .tits h2 {
    font-size: 24px;

}
		
		
	
}



@-webkit-keyframes wiggle {
    0% { -webkit-transform: skewX(24deg); opacity: 0; } 
    10% { -webkit-transform: skewX(-8deg); }
    20% { -webkit-transform: skewX(55deg); }
    30% { -webkit-transform: skewX(-90deg); }
    40% { -webkit-transform: skewX(20deg); }
    50% { -webkit-transform: skewX(-90deg); }
    60% { -webkit-transform: skewX(3deg); }
    70% { -webkit-transform: skewX(-2deg); }
    80% { -webkit-transform: skewX(1deg); opacity: 1;}
    90% { -webkit-transform: skewX(10deg); }
    100% { -webkit-transform: skewX(0deg); opacity: 0; }
}

.Article a img{ position: relative; z-index: 3;}
.Article a:hover:before{
	content: "";
	width: 200px; height: 100px;
	position: absolute; right:40px; top: 30%;
	z-index: 0;
	display: block;
	
		 filter: contrast(210%) brightness(550%);
  background: 
	linear-gradient(118deg, rgba(0,0,255,1), rgba(0,0,0,0)),
	url(/👆/that/noise.svg);
  box-shadow:1px 1px rgba(246, 0, 153,0.8),
             -1px -1px rgba(15, 210, 255,0.8),
             -1px 0px rgba(255, 210, 0, 1);
	opacity: 0;

  -webkit-animation: wiggle 0.4s;
}