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

@font-face{
	font-family:'Noto Sans JP';
	font-style: normal;
	font-weight: 400;
	src:
	local("Noto Sans CJK JP"),
	url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Reegular.woff2) fotmat('woff2'),
	url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Reegular.woff) fotmat('woff'),
	url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Reegular.otf) fotmat('opentype');
}
html{
	font-size:62.5%;
}
body{
	color:#333;
	font-family: 'Montserrat','Noto Sans JP', sans-serif;
	font-size:1.6rem;
	font-feature-settings: "palt";
	letter-spacing: 0.025em;
}
a{
	color:#333;
}
img{
	max-width: 100%;
	height: auto;
}
/*====================
utility
====================*/
.sp-item{
	display:block;
}
.text-center{
	text-align: center;
}
.bg-gray{
	background-color: #e6e6e6;
}
.bg-lightgray{
	background-color: #f4f4f4;
}
.sp-img{
	display: block;
}
.pc-img{
	display:none;
}
.wrapper2{
	padding: 0 20px;
	box-sizing:border-box;
}
.page{
	margin-top: 72px;
}

/*====================
section
====================*/
.section-header{
	padding: 75px 0 55px;	
}
.section-header2{
	padding: 75px 0 ;
}
.section-header3{
	padding: 75px 0 55px;
}
.section-body{
	padding-bottom:55px;
}
.section-body2{
	padding-bottom: 75px;
}
.section-body3{
	padding-bottom: 0;
}
.section-footer{
	padding: 0 56px 75px;
}/*viewmore に56pxの余白*/
.section-footer2{
	padding: 0;
}
/*====================
header
====================*/
.header{
	position:fixed;
	top: 0;
	left: 0;
	z-index: 50;
	width: 100%;
	padding: 20px 20px 10px;
	background-color: #fff;
}
/*====================
hero-image
====================*/
.hero-image{
	position:relative;
	margin-top: 72px;
}
.logo-img__center{
	position:absolute;
	top: 50%;
	left: 50%;
	transform: translate3d(-50%,-50%,0);
	width: 80px;
}
/*====================
logo
====================*/
.logo{
	width: 55px;
}
.logo-center{
	margin: 0 auto 55px;
}
/*====================
navigation
====================*/
.btn-trigger{
	appearance:none;
	-weblit-appearance:none;
	position:fixed;
	top: 24px;
	right:12px ;
	z-index: 110;
	width: 40px;
	height: 20px;
	border:none;
	background-color: #fff;
}
.btn-trigger span{
	position:absolute;
	display: block;
	width: 28px;
	height: 2px;
	background-color: #a0a0a0;
	transition: all 0.5s;
}
.btn-trigger span:first-of-type{
	top: 0;	
}
.btn-trigger span:nth-of-type(2){
	text-outline: 10px;
}
.btn-trigger span:last-of-type{
	bottom:0;
}
.btn-trigger.active span:first-of-type{
	transform:rotate(45deg);
	top: 10px;
}
.btn-trigger.active span:nth-of-type(2){
	opacity: 0;
}
.btn-trigger.active span:last-of-type{
	transform:rotate(-45deg);
	bottom: 10px;
}
.navigation{
	display:none;
	position:fixed;
	top: 0;
	left: 0;
	z-index: 100;
	/*worksの所にpositionもあるし、headerにもpositionfixedあるため、headerにz-indexの小さい値を入れる*/
	width: 100%;
	height: 120%;
	padding: 120px 0 150px;
	background-color: rgba(255,255,255,0.97);
}
.nav-item{
	margin-bottom: 55px; 
}
.nav-item>a{
	color:#626262;
	text-transform: uppercase;
	font-size:1.4rem;
}
.sns{
	font-size:2.7rem;
}
/*====================
footer
====================*/
.footer{
	padding: 75px 0 115px;
}
.footer-nav{
	margin-bottom: 75px;
}
.footer-text{
	margin-bottom: 75px;
	color:#626262;
	font-size:1.3rem;
	line-height: 2.1;
}
.copyrights{
	color:#626262;
	font-size:1.1rem;
}
.btn-pageTop{
	display:none;
}
/*====================
title
====================*/
.section-title{
	color:#2e2e2e;
	font-size:3rem;
	text-transform: uppercase;
}
.section-subtitle{
	padding: 15px;
	display: block;
	font-size:1.6rem;
	line-height: 1.2;
}
.page-title{
	margin-bottom: 55px;
	font-size:3.5rem;
	font-weight:bold;
}
.page-title__withoutitem{
	margin-bottom: 30px;
}
.section-title__bold{
	font-weight:bold;
}
/*====================
btn
====================*/
.btn{
	display:block;
	width: 100%;
	padding: 16px 0;
	background-color: #444;
	color:#fff;
	text-transform: uppercase;
}
.btn::after{
	position:relative;
	left:16px;
	content:"\f105";
	font-family:FontAwesome
}
.btn-maps{
	text-transform:capitalize;
}
.btn-maps::after{
	content:none;
}
.btn-maps::before{
	position:relative;
	left:-16px;
	content:"\f041";
	font-family:FontAwesome
}
.btn-submit{
	-weblit-appearance:none;
	appearance:none;
	width: 100%;
	border:none;
	font-size:1.6rem;
	letter-spacing: 0.5em;
}
.btn-submit::after{
	content:none;
}
/*====================
works
====================*/
.works-item{
	position:relative;
}
.works-item__title{
	position:absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	transform:translate3d(-50%,-50%,0);
	color:#fff;
	font-size:3rem;
	text-transform: uppercase;
}
.works-info{
	position:absolute;
	left: 50px;
	bottom: 30px;
	color: #fff;
}
.works-name{
	display: block;
	margin-bottom: 30px;
	font-size:2.4rem;
}
.works-category{
	font-size:1.4rem;
	font-weight:300;
}
.black{
	color:#000;
}
.nav-category-item{
	margin-bottom: 30px;
}
.nav-category-item:last-of-type{
	margin-bottom: 0;
}
.nav-category-item>a{
	color:#aaa;
}
.nav-category-item.current>a{
	color:#777;
}

/*====================
news
====================*/
.wrapper{
	padding: 0 8px;
}
.card-item{
	margin: 0 0 30px;
	background-color: #fff;
}
.card-item:last-of-type{
	margin-bottom: 0;
}
.card-item__contents{
	padding: 30px 12px 55px;
}
.card-item__meta{
	display:flex;
	justify-content: space-between;
	margin-bottom: 30px;
}
.card-item__text{
	font-size:1.3rem;
	line-height: 1.65;
}
.meta-date{
	font-size:1.1rem;
	line-height: 19px;	
}
.category{
	display: block;
	width: 100px;
	padding: 4px 0;
	border-radius: 3px;
	font-size:1.1rem;
	color:#fff;
}
.category-seminar{
	background-color: #17d8e6;
}
.category-media{
	background-color: #e69a17;
}
.category-recruit{
	background-color: #a0a0a0;
}
/*========================
about
=====================*/
.message{
	padding-bottom:80px;
	background-color:#fef1eb;
}
.ceoname{
	margin: 20px 0;
	font-weight:bold;
	font-size:2rem;
}
.brand-primaryText{
	line-height: 1.6;
	padding: 0 10px;
}
.brand-item{
	margin-bottom: 30px;
	font-size:2.4rem;
	font-weight:bold;
}
.brand-item:last-of-type{
	margin-bottom: 0;
}
.brand-item__ja{
	display: block;
	padding-top: 21px;
	font-size:1.6rem;
	font-weight: normal;
	line-height: 1.5;
}
.info-item{
	display: flex;
	margin-bottom: 30px;
	line-height:1.5 ;
}
.info-item:last-of-type{
	margin-bottom: 0;
}
.info-title{
	flex:0 0 auto;
	width: 105px;
	margin-right: 30px;
	text-align: right;
}
.info-detail{
	flex:1 1 auto;
}
.ceofacebook{
	display:flex;
	
}
.ceofacebooktitle{
	vertical-align: middle;
	padding-top: 15px;
}
.facebook{
	width:48px;
	height: 48px;
	}
/*========================
access
=====================*/
.maps-outer{
	position:relative;
	
}
.maps{
	position:absolute;
	top: 0;
	left: 0;
	width:100%;
	height: 100%;
}
.access-info{
	margin-bottom: 55px;
	color:#3b3939;
	line-height: 2;
	text-align: center;
}
/*========================
contact
=====================*/
.form-parts{
	-webkit-appearance:none;
	appearance:none;
	box-sizing: border-box;
	border:solid 1px #d7d7d7;
	background-color: #fff;
	
}
.form-part__text{
	width: 100%;
	padding:9px 8px ;
	border-radius: 3px;
	color: #333;
	font-size:1.6rem;
}
.form-parts__checkbox{
	width: 16px;
	height: 16px;
	margin: 0 7px 0 0;
	vertical-align: -2px;
}
.form-parts__checkbox:checked{
	background-color: #444;
}
.form-title{
	margin-bottom: 18px;
}
.form-item{
	margin-bottom: 30px;
}
.form-item:last-of-type{
	margin-bottom: 55px;
}
.caution{
	display:inline-block;
	width: 30px;
	margin-left: 15px;
	padding: 2px 0;
	border-radious:3px;
	background-color: #f00;
	color: #fff;
	font-size:1.1rem;
	text-align: center;
	vertical-align: middle;
}
@media screen and (min-width:641px){
	a{
		transition:all 0.2s;
	}
	a:hover{
		opacity:0.5;
	}
	img{
		width: 100%;
	}
	.sp-item{
		display:none;
	}
	.wrapper2{
		max-width: 1140px;
		margin: 0 auto;
		padding: 0;
	}
	.pc-img{
		display: block;
	}
	.sp-img{
		display: none;
	}
	.page{
		margin: 0;
	}

/*========================
section
=====================*/
	.section-header{
		padding: 84px 0 64px;
	}
	.section-header2{
		padding: 80px 0;
	}
	.section-header3{
		padding: 80px 0 40px;
	}
	.section-body{
		padding-bottom: 64px;
	}
	.section-body2{
		padding-bottom: 80px;
	}
	.section-footer{
		padding: 0 0 80px;
	}
/*========================
btn
=====================*/
	.btn{
		width: 264px;
		margin:auto;
	}
	.btn-maps{
		margin: 0;
		padding: 14px 0;
	}
	.btn-submit{
		cursor: pointer;
		trandition:all 0.2s
	}
	.btn-submit:hover{
		opacity: 0.5;
	}
/*========================
header
=====================*/
	.header{
		position:static;/*初期状態*/
		height: 62px;
		padding: 0;
		border-top:solid 1px #e2dede; 
		border-bottom:solid 1px #e2dede; 
	}
	.header-inner{
		box-sizing: border-box;
		padding: 0 20px;
		display:flex;
		justify-content: space-between;
		align-items: center;
	}
/*========================
navigation
=====================*/
	.btn-trigger{
		display:none;
	}
	.navigation{
		display: flex;
		position:static;
		width: auto;
		height: auto;
		padding: 0;
	}
	.nav-list{
		display:flex;
	}
	.nav-item{
		margin-bottom: 0;
	}
	.nav-item__link{
		margin-left: 28px;
	}
	.nav-item__sns:last-of-type{
		margin-left: 24px;
	}
	.sns{
		font-size:1.8rem;
	}
	.l-horizon{
		margin-left: 40px;
	}
	.l-horizon .nav-item>a{
		display:block;
		height: 60px;
		line-height: 60px;/*上下中央*/
		font-size:1.4rem;
	}
	.l-horizon .nav-item.current>a{
		padding: 0 8px;
		border-bottom: solid 2px #aaa;
		color:#aaa;
	}
/*========================
hero-image
=====================*/
	.hero-image{
		margin-top: 0;
		
		
	}
/*========================
footer
=====================*/
	.footer{
		padding: 80px 0;
		position:relative;
	}
	
	.footer-nav{
		margin-bottom: 64px;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.l-vertical:first-of-type{
		margin-bottom: 24px;
	}
	.footer-text{
		margin-bottom: 80px;
	}
	.btn-pageTop{
		display: block;
		position: absolute;
		right: 0;
		bottom: 50px;
		width: 44px;
		height: 44px;
		background-color: #bababa;
	}
	.btn-pageTop>.fa{
		position:relative;
		top: 0;
		color:#222;
		width: 100%;
		height: 100%;
		line-height: 44px;
		transition:all 0.5s;
	}
	.btn-pageTop:hover>.fa{
		top:-10%;
		
	}
	
/*========================
logo
=====================*/
	.logo-center{
		width: 75px;
		margin: 0 auto 64px;
	}
/*========================
works
=====================*/
	.works-list{
		display:flex;
		flex-wrap: wrap;
		overflow:hidden;
		
	}
	.works-item{
		width: 33.3333%;
		position:relative;
	}
	.works-item__title{
		font-size:3.6rem;
	}
	.works-info{
		opacity: 0;
	}
	.works-item:hover a{
		opacity:1;
	}
	.works-item:hover .works-info{
		opacity:1;
	}
	.cover{
		position:absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		opacity: 0;
		background-image: linear-gradient(0deg,rgba(0,0,0,0.6),rgba(0,0,0,0.25),transparent);
		transition:all 0.2s;
	}
	.works-item:hover .cover{
		opacity:0.6;
	}
	.nav-category{
		display:flex;
		justify-content: center;
	}
	.nav-category-item{
		margin: 0 48px 0 0;
	}
	.nav-category-item:last-of-type{
		margin: 0;
	}
/*========================
news
=====================*/
	.card-list{
		display:flex;
		margin-left: -30px;
	}	
	.card-item{
		width: 33.333%;
		margin:  0 0 0 30px;
	}
	.car-item__content{
		padding: 24px 12px;
	}
	.card-item__meta{
		margin-bottom: 24px;
	}
	.category{
		width: 88px;
	}

/*========================
about
=====================*/	
	.brand-item{
		margin-bottom: 40px;
	}
	.info-list{
		 max-width: 500px;
		 margin: 0 auto;
	}
	.info-item{
		margin-bottom: 40px;
	}
	.info-title{
		flex:0 0 132px;
		width: 132px;
		margin-right: 64px;
	}
/*========================
access
=====================*/
	.maps-outer{
		padding-top: 3.35%;
	}
	.access-wrapper{
		max-width: 950px;
		display: flex;
		justify-content: space-between;
		align-items:center;
		margin: auto;
	}
	.access-info{
		margin: 0;
		line-height: 1;
		text-align: center;
	}
	.access-item:not(:last-of-type){
		margin-bottom: 28px;
	}
/*========================
contact
=====================*/
	.form{
		max-width: 814px;
		margin: auto;
	}
}
@media screen and (min-width:1140px){
	.header-inner{
		padding: 0;
	}
}