@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-Regular.woff2) format('woff2'),
		
	  url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Regular.woff) format('woff'),
		
	  url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Regular.otf) format('opentype');
		
	
}

html{
	font-size:62.5%;/*16px × 62.5%=10px*/
}
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;
	text-decoration:none;
}
img{
	max-width: 100%;
	height: auto;
}
/*------------------------------
 *utility
 -----------------------------*/
.wrapper{
	box-sizing: border-box;
	padding: 0 20px;
}
.page{
	margin-top: 72px;
}
.text-center{
	text-align: center;
}
.img-pc{
	display: none;
}
.bg-gray{
	background-color: #e6e6e6;
}
.bg-lightgray{
	background-color: #f4f4f4;
}
/*------------------------------
 *section
 -----------------------------*/
.section-header{
	padding: 75px 0 55px;
}
.section-header2{
	padding: 75px 0 75px;
}
.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;
}
.section-footer2{
	padding: 0;
}
/*------------------------------
 *header
 -----------------------------*/
.header{
	position: fixed;
    top:0;
    left:0;
    z-index: 100;
    box-sizing: border-box;
    width: 100%;
    height: 69px;
    padding: 20px 20px 16px;
    border-top: 1px solid #e2dede;
    border-bottom: 1px solid #e2dede;
    background-color: #fff;
}
.header-nav{
    display: none;
    position: fixed;
    top:0;
    left:0;
    z-index: 50;  
    box-sizing: border-box; 
    width:100%;
    height: 120%;
    padding: 120px 0 0;
    background-color: rgba(255,255,255,0.97);
}
.header-inner{
    padding: 0;
}
/*------------------------------
 *hero-image
 -----------------------------*/
.hero-image{
	position: relative;
	margin-top: 72px;
}
/*------------------------------
 *logo
 -----------------------------*/
.logo{
	width: 55px;
}
.logo-center{
	margin: 0 auto 55px;
}
.logo-img__center{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate3d(-50%,-50%,0);
	width: 80px;
}
/*------------------------------
 *navigation
 -----------------------------*/

.btn-trigger{
	-webkit-appearance:none;
	appearance:none;
	position:fixed;
	top:12px;
	right: 13px;
	z-index: 110;
	width: 40px;
	height: 20px;
	margin-right: 0px;
	border: none;
	background-color: #fff;
	padding: 0;
}
use{
    -webkit-transition: 0.5s all;
    -moz-transition: 0.5s all;
    -ms-transition: 0.5s all;
    transition: 0.5s all;
}
.btn-trigger.active use:nth-of-type(1) {
    -webkit-transform: translateY(30px) rotate(-45deg);
    transform: translateY(30px) rotate(-45deg);
}

.btn-trigger.active use:nth-of-type(2) {
    opacity: 0;
}
.btn-trigger.active use:nth-of-type(3) {
    -webkit-transform: translateX(35px) translateY(-15px) rotate(45deg);
    transform: translateX(35px) translateY(-15px) rotate(45deg);
}

.navigation{
	position: fixed;
	top:0;
	left:0;
	z-index: 100;
	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;
	font-size: 1.4rem;
	text-transform: uppercase;
}
.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-title__bold{
	font-weight: bold;
}
.section-subtitle{
	display: block;
	padding-top: 17px;
	font-size: 1.6rem;
}
.page-title{
	margin-bottom: 55px;
	font-size: 3.5rem;
	font-weight: bold;
}
.page-title__withoutItem{
	margin-bottom: 30px;
}
/*------------------------------
 *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{
	-webkit-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%;
	color: #fff;
	font-size: 3rem;
	text-transform: uppercase;
	transform: translate3d(-50%,-50%,0);
}
.works-info{
	position: absolute;
	left:20px;
	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-news{
	padding-left: 8px;
	padding-right: 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;
}
.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 0px;
	border-radius: 3px;
	color: #fff;
	font-size: 1.1rem;
}
.category-seminer{
	background-color: #17d8;
}
.category-media{
	background-color: #e69a17;
}
.category-recruit{
	background-color: #a0a0a0;
}
/*------------------------------
 *About
 -----------------------------*/
.brand-primaryText{
	line-height: 1.6;
}
.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;
}
.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;
}
/*------------------------------
 *access
 -----------------------------*/
.maps-outer{
	position: relative;
	padding-top: 75%
}
.maps{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
/*------------------------------
 *access info
 -----------------------------*/
.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-parts__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-radius:  3px;
	background-color: #f00;
	color: #fff;
	font-size: 1.1rem;
	text-align: center;
	vertical-align: middle;
}

@media screen and (min-width:641px){
	.inner{
        max-width: 1140px;
        margin:0 auto;
        padding: 0;
    }
	a{
		transition: all 0.2s;
	}
	a:hover{
		opacity: 0.5;
	}
	.wrapper{
		max-width: 1140px;
		margin: 0 auto;
		padding: 0;
	}
	img{
		width: 100%;
	}
	.img-pc{
		display: block;
	}
	.img-sp{
		display: none;
	}
	.br-reverse{
		display: none;
	}
	.page{
		margin: 0;
	}
/*------------------------------
 *section
 -----------------------------*/	
	.section-header{
		padding: 80px 0 64px;
	}
	.section-header2{
		padding: 80px 0; 
	}
	.section-header3{
		padding: 80px 0;
	}
	.section-body{
		padding-bottom: 64px;
	}
	.section-body2{
		padding-bottom: 80px;
	}
	.section-fotter{
		padding: 0 0 80px;
	}
/*------------------------------
 *btn
 -----------------------------*/	
	.btn{
		width: 264px;
		margin: auto;
	}
	.btn-maps{
		margin: 0;
		padding: 14px 0;
	}
	.btn-submit{
		cursor: pointer;
		transition: 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;
	}
	.home .header{
        position: static;
    }
	.header.fix{
        position: fixed;
        top:0;
        left:0;
        width:100;
        animation:nyuru 0.5s;
    }
    @keyframes nyuru {
        0%{
            margin-top:-64px;
        }
        100%{
            margin-top:0;
        }
    }
	.header-inner{
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 20px;
	}
	.header-nav{
        display: block;
        position: static;
        height: auto;
        width:auto;
        padding: 0;
    }
	.btn-trigger{
		display: none;
	}
	.navigation{
		display: flex;
		position: static;
		width: auto;
		height: auto;
		padding: 0;
	}
	.nav-list{
		display: flex;
	}
	.nav-item{
		margin: 0;
	}
	.nav-item__link{
		margin-left: 26px;
	}
	.nav-item__sns:last-of-type{
		margin-left: 24px;
	}
	.l-horizon{
		margin-left: 40px;
	}
	.l-horizon .nav-item>a{
		display: block;
		height: 60px;
		line-height: 60px;
		font-size: 1.4rem;
		box-sizing:border-box;
	}
	.l-horizon .nav-item.current>a{
		padding: 0 8px;
		border-bottom: solid 2px #aaa;
		color: #aaa;
	} 
	.sns{
		font-size: 1.8rem;
	}
/*------------------------------
 *heroimage
 -----------------------------*/
	.hero-image{
		margin-top: 64px;
	}
	.home .hero-image{
        margin-top: 0;
    }
/*------------------------------
 *footer
 -----------------------------*/
	.footer{
		position: relative;
		padding: 80px 0;
	}
	.footer-nav{
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 64px;
	}
	.l-vertical:first-of-type{
		margin-bottom: 24px;
	}
	.footer-text{
		margin-bottom: 80px;
	}
	.btn-pageTop{
		display: block;
		position: fixed;
  		right: 0;
		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.2s;
	}
	.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{
		position: relative;
		width: 33.333%;
	}
	.works-item__title{
		font-size: 3.6rem;
	}
/*------------------------------
 *worksページ
 -----------------------------*/
	.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;
	}
	.card-item__contents{
		padding: 24px 12px;
	}
	.card-item__meta{
		margin-bottom: 24px;
	}
	.category{
		width: 88px;
	}
/*------------------------------
 *about
 -----------------------------*/
	.brand-item{
		margin-bottom: 40px;
	}
	.info-list{
		max-width: 754px;
		margin: auto;
	}
	.info-item{
		margin-bottom: 40px;
	}
	.info-title{
		flex: 0 0 132px;
		width: 132px;
		margin-right: 64px;
	}
	.maps-outer{
		padding-top: 21.4285%;
	}
	.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: left;
	}
	.access-item:not(:last-of-type){
		margin-bottom: 28px;
	}
/*------------------------------
 *contact
 -----------------------------*/
	.form{
		max-width: 814px;
		margin: 0 auto;
	}
	.form-item{
		display: flex;
		margin-bottom: 24px;
	}
	.form-title{
		width: 170px;
		margin: 0 30px 0 0;
		padding: 10px 0;
		text-align: right;
	}
	.form-detail{
		width: 460px;
	}
	.caution{
		display: inline;
		margin-left: 10px;
		padding: 2px 4px;
	}
}

@media screen and (min-width:1140px){
	.header-inner{
		padding: 0;
	}
}