@charset "utf-8";
/**--------------------------------------------------------
 * CSS information
 * file name	: mq.css
 * author		: takaaki koyama
 -----------------------------------------------------------*/
/*
 max-width: 1500px
------------------------------------------------------------*/
@media only screen and (max-width: 1500px){
	#contact-content.in-navi #contact-info .info{
		width:60%;
	}
	#contact-content.in-navi #contact-info .form-msg{
		padding-top:5px;
		width:40%;
	}
}
/*
 max-width: 1300px
------------------------------------------------------------*/
@media only screen and (max-width: 1300px){
	#contact-content.in-navi #contact-info .info{
		width:100%;
	}
	#contact-content.in-navi #contact-info .form-msg{
		padding-top:5px;
		width:100%;
	}
}
/*
 max-width: 1200px
------------------------------------------------------------*/
@media only screen and (max-width: 1200px){
#top #top-logo{
	left: -170px;
}

#logo{
	left: 3%;
}

.gnavi-list{
    display:table;
    position: relative;
}

.gnavi-list ul{
    display:table-cell;
	vertical-align: middle;
	padding-bottom: 100px;
    position: relative;
    width: 50%;
    height: 100%;
    left: 0;
    top: 0;    
}

.gnavi-list ul li{
	width:50%;
	margin: 0 auto;
	font-size: 70px;
	line-height: 65px;
}


#contact-content.in-navi{
	padding: 0 180px 0 100px;
}

#contact-content.in-navi h2{
	position:absolute;
	top: 0;
	width: 30%;
}
#contact-content.in-navi #contact-info{
	position: absolute;
	width: 30%;
	max-width: 200px;
	padding-right: 10px;
	top: 85px;
}
#contact-content.in-navi #contact-form{
	float:left;
	width: 70%;
	margin-left: 30%;
}
#contact-content.in-navi #contact-info .info{
	margin-bottom: 1em;
	font-size: 2.5em;
}
#contact-content.in-navi #contact-info .info a.mail{
	display:inline-block;
	margin-right:0;
}
#contact-content.in-navi #contact-info .info .tel{
	display: block;
	margin-left:0;
	line-height:1;
}
#contact-content.in-navi #contact-info .info .slash{
	display:none;
}

}

/*
 max-width: 900px
------------------------------------------------------------*/
@media only screen and (max-width: 900px){
#member-detail-logo .svg svg{
	width: 93px;
}

#contact-content.in-navi h2{
	width: 40%;
}
#contact-content.in-navi #contact-info{
	width: 40%;
}
#contact-content.in-navi #contact-form{
	width: 60%;
	margin-left: 40%;
}

.main .main-overlay .message-body br.sm{
	display:inherit;
}
.portfolio-message p span{
	margin-bottom:1em;
}

}
/*
 max-width: 850px
------------------------------------------------------------*/
@media only screen and (max-width: 850px){
.gnavi-list ul li{
	width:45%;
	font-size: 60px;
	line-height: 60px;
}

#member .member-item a{
	display: table;
	width: 100%;
}
#member .member-item .grid{
	display: table-cell;
	vertical-align: middle;
}
#member .member-item .grid .grid-item{
	height:auto;
}
#member .member-item-name{
	padding-left: 14%;
}
#member .member-item-logo{
	padding-left: 15%;
	padding-right: 0;
	margin-top:20px;
	text-align: left;
}

}

/*
 max-width: 768px
------------------------------------------------------------*/
@media (max-width: 768px){

/*
 #wrap
---------------------------------------------------*/
#header{
    display: block;
    position: fixed;
    width: 100%;
    height: 50px;
    top: 0;
    left: 0;
    background-color: #fff;
    z-index:899;
}
#header-logo{
	width: 110px;
	height: 50px;
	left: 0;
	top: 0;
	margin-left: 0;
}
#header-logo a{
	width: 100%;
	padding-top: 50px;
	background: url("../img/logo3.png") no-repeat 50% 50%;
	background-size: 90px;
}



#header .header-btn{
	position:fixed;
	display: block;
	left: 0;
	top:0;
	width: 50px;
	height: 50px;
	background-color: #fff;
	z-index:901;
	-webkit-transform: translate3d(-50px, 0, 0);
       -moz-transform: translate3d(-50px, 0, 0);
         -o-transform: translate3d(-50px, 0, 0);
            transform: translate3d(-50px, 0, 0);
	-webkit-transition-property: -webkit-transform;
	   -moz-transition-property: -moz-transform;
	     -o-transition-property: -o-transform;
	        transition-property: transform;
	-webkit-transition-duration: .8s;
	   -moz-transition-duration: .8s;
	     -o-transition-duration: .8s;
	        transition-duration: .8s;
	-webkit-transition-timing-function: cubic-bezier(.6,0,.3,1);
	   -moz-transition-timing-function: cubic-bezier(.6,0,.3,1);
	     -o-transition-timing-function: cubic-bezier(.6,0,.3,1);
	        transition-timing-function: cubic-bezier(.6,0,.3,1);
}
#header .header-btn.show{
	-webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
         -o-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
}

#header .header-btn a{
	display:block;
	width: 100%;
	height: 100%;
	position:relative;
	-webkit-transition: opacity .25s ease-in-out;
	   -moz-transition: opacity .25s ease-in-out;
	     -o-transition: opacity .25s ease-in-out;
	        transition: opacity .25s ease-in-out;
}

#header .header-btn a:hover{
	opacity:0.4;
}

#header .header-btn a span{
	display:none;
}

#header .header-btn .icon{
	width: 100%;
	height: 100%;
}
#header .header-btn .icon-check{
	background-size: 15px;
}


/*
 #gnavi-btn
---------------------------------------------------*/
#gnavi-btn{
    top:0;
    left:auto;
    right:0;
    margin-top:0;
    z-index:900;
    -webkit-transition-property: right, opacity;
       -moz-transition-property: right, opacity;
         -o-transition-property: right, opacity;
            transition-property: right, opacity;
	-webkit-transition-delay: 0s, 0s;
	   -moz-transition-delay: 0s, 0s;
	     -o-transition-delay: 0s, 0s;
	        transition-delay: 0s, 0s;
}

.index #gnavi-btn{
    left:auto;
    right:-50px;
}
.trans #gnavi-btn{
    left:auto;
    right:0;
    opacity:1;
}



#gnavi-btn a span{
	-webkit-animation: none;
	     -o-animation: none;
	        animation: none;
	-webkit-transform-origin: 50% 50%;
	   -moz-transform-origin: 50% 50%;
    	 -o-transform-origin: 50% 50%;
        	transform-origin: 50% 50%;
	-webkit-transition: opacity 0.2s, -webkit-transform 0.2s;
	   -moz-transition: opacity 0.2s,    -moz-transform 0.2s;
	     -o-transition: opacity 0.2s,      -o-transform 0.2s;
	        transition: opacity 0.2s,         transform 0.2s;
}

#gnavi-btn a:before,
#gnavi-btn a:after{
	-webkit-animation: none;
	     -o-animation: none;
	        animation: none;
	-webkit-transform-origin: 50% 50%;
	   -moz-transform-origin: 50% 50%;
    	 -o-transform-origin: 50% 50%;
        	transform-origin: 50% 50%;
	-webkit-transition: -webkit-transform 0.2s;
	   -moz-transition:    -moz-transform 0.2s;
	     -o-transition:      -o-transform 0.2s;
	        transition:         transform 0.2s;
}
.nav-open #gnavi-btn a span{
	opacity:0;
	-webkit-transform: scale(0);
	   -moz-transform: scale(0);
	     -o-transform: scale(0);
	        transform: scale(0);
}
.nav-open #gnavi-btn a:before,
.nav-open #gnavi-btn a:after{
}
.nav-open #gnavi-btn a:before{
	-webkit-transform: rotate(45deg) translate3d(25%, 150%, 0);
	   -moz-transform: rotate(45deg) translate3d(25%, 150%, 0);
	     -o-transform: rotate(45deg) translate3d(25%, 150%, 0);
	        transform: rotate(45deg) translate3d(25%, 150%, 0);

}
.nav-open #gnavi-btn a:after{
	-webkit-transform: rotate(-45deg) translate3d(25%, -200%, 0);
	   -moz-transform: rotate(-45deg) translate3d(25%, -200%, 0);
	     -o-transform: rotate(-45deg) translate3d(25%, -200%, 0);
	        transform: rotate(-45deg) translate3d(25%, -200%, 0);
}

/*
 #gnavi
---------------------------------------------------*/
#gnavi-wrap{
    padding-top:0;
}

.gnavi-content{
	top:30px;
	left:30px;
	right:30px;
	bottom:30px;
}

.gnavi-list ul li{
	width:70%;
	font-size: 80px;
	line-height: 75px;
}
#logo,
#gnavi-btn-close{
	display:none;
}

/*
 .frame-bar
---------------------------------------------------*/
.frame-bar{
	display:none;
	-webkit-transition: none;
	   -moz-transition: none;
		 -o-transition: none;
			transition: none;
}

/*
 class
-----------------------------------------------------------*/
/*
 .container
-------------------------------------------------*/

/*
 main / side / grid item
-------------------------------------------------*/
.main-fluid{
	padding:0;
}


.main .slide-container{
	padding:50px 0 0;
}
.main .slide-container .slide-content{
	padding:50px 0 0;
}


.main .main-overlay .message-body br.sm{
	display:none;
}

.portfolio-message p span{
	margin-bottom:0;
}

/*
 .local-navi
-------------------------------------------------*/
.local-navi ul,
.local-navi dl{
	padding-left: 12%;
}

/*
 page styles
-------------------------------------------------------------*/

/*
 index
---------------------------------------------------*/
#top-logo{
	display:none;
}
#top-menu .gnavi-content{
	
}
#top-menu .show-contact .gnavi-content{
	top: 0;
	bottom: 110px;
}
/*
 company
---------------------------------------------------*/
#company-head{
	height: 0;
	padding-top:60%
}

#company .section-title{
	text-align:center;
}


/*
 portfolio / works
---------------------------------------------------*/
#portfolio-detail,
#member-works{
	padding:0;
}
#portfolio-detail .close,
#member-works .close{
	right: 0;
	top: 60px;
}

#portfolio-detail.overlay .close,
#member-works.overlay .close{
	left: auto;
	right: 0;
	top: 0;
	margin-top: 0;
}

#portfolio-detail .photo-info,
#member-works .photo-info{
	position:absolute;
	right: 20px;
	left: 20px;
	bottom: 30px;
	color:#fff;
	text-align: center;
	z-index:1;
}

#portfolio-detail .photo-info .credit,
#member-works .photo-info .credit{
	line-height:1.5;
}

/*
 member
---------------------------------------------------*/
#member .member-item{
	border: solid #fff;
	border-width:0px 15px 10px;
}

#member .member-item a,
#member .member-item .grid{
	display: block;
}
#member .member-item .grid .grid-item{
	height:100%;
}
#member .member-item-name{
	padding-left: 80px;
}
#member .member-item-logo{
	padding-left: 0;
	padding-right: 80px;
	margin-top: 0;
	text-align:right

}
/*
 contact
---------------------------------------------------*/
#contact #contact-content{
	padding: 100px 0 0;
}
#contact-content.in-navi{
	padding: 10% 30px;
}

#contact-content.in-navi #contact-btn-close{
	right: 50%;
	margin-right:-25px;
	top: 10%;
	display: block;
}
#contact-content.in-navi #contact-btn-close a:before,
#contact-content.in-navi #contact-btn-close a:after{
	width:15px;
}
#contact-content.in-navi #contact-btn-close a:before{
	-webkit-transform: translate3d(5px,0,0) rotateZ(45deg);
	   -moz-transform: translate3d(5px,0,0) rotateZ(45deg);
	     -o-transform: translate3d(5px,0,0) rotateZ(45deg);
	        transform: translate3d(5px,0,0) rotateZ(45deg);
}
#contact-content.in-navi #contact-btn-close a:after{
	-webkit-transform: translate3d(-5px,0,0) rotateZ(-45deg);
	   -moz-transform: translate3d(-5px,0,0) rotateZ(-45deg);
	     -o-transform: translate3d(-5px,0,0) rotateZ(-45deg);
	        transform: translate3d(-5px,0,0) rotateZ(-45deg);

}

#contact-content.in-navi #contact-btn-close a:hover:before{
	-webkit-transform: translate3d(5px,-5px,0) rotateZ(45deg);
	   -moz-transform: translate3d(5px,-5px,0) rotateZ(45deg);
	     -o-transform: translate3d(5px,-5px,0) rotateZ(45deg);
	        transform: translate3d(5px,-5px,0) rotateZ(45deg);
}
#contact-content.in-navi #contact-btn-close a:hover:after{
	-webkit-transform: translate3d(-5px,-5px,0) rotateZ(-45deg);
	   -moz-transform: translate3d(-5px,-5px,0) rotateZ(-45deg);
	     -o-transform: translate3d(-5px,-5px,0) rotateZ(-45deg);
	        transform: translate3d(-5px,-5px,0) rotateZ(-45deg);

}

}

/*
 max-width: 736px
------------------------------------------------------------*/
@media (max-width: 736px){
.gnavi-list ul li{
	font-size: 75px;
	line-height: 70px;
}
}

/*
 max-width: 667px
------------------------------------------------------------*/
@media (max-width: 667px){
.gnavi-list ul li{
	width: 75%;
	font-size: 70px;
	line-height: 68px;
}


/*
.row
-------------------------------------------------*/
.row .col{
	float:none;
}
.row.col-2 .col{
	width:100%;
}
.row.col-2 .col:first-child{
	padding-right:0;
}
.row.col-2 .col:last-child{
	padding-left:0;
}

/*
 .section
-------------------------------------------------*/
.section.bordered .section-title{
	border-top-width:2px;
}


/*
 company
---------------------------------------------------*/
#company .section-content{
	line-height:2;
}

#company .mb-only{
	display:inherit;
}

}

/*
 max-width: 568px
------------------------------------------------------------*/
@media (max-width: 568px){
.gnavi-list ul li{
	width:70%;
	font-size: 60px;
	line-height: 58px;
}

.main .main-overlay .message-body br.sm{
	display:inherit;
}
.portfolio-message p span{
	margin-bottom:1em;
}

/*
 member
---------------------------------------------------*/
#member .member-item-name{
	padding-left: 10%;
}
#member .member-item-logo{
	padding-left: 10%;
	padding-right: 0;
	text-align: left;
}
#member-detail-logo .svg svg{
	width: 93px;
}

/*
 member-detail
---------------------------------------------------*/
#member-detail-head{
	height: 300px;
}


/*
 topics
---------------------------------------------------*/
#topics .topics-item{
	display: block;
	height: auto;
	margin-bottom:10px;
}
#topics .grid .grid-item{
	width:100%;
	display: block;
}
#topics .topics-item .topics-image{
	display: table;
	height:300px;
}
#topics .topics-item .topics-image span{
	display:table-cell;
	height:100%;
	vertical-align:middle;
}
#topics .topics-item .topics-body{
	padding: 40px 10%;
}

}

/*
 max-width: 480px
------------------------------------------------------------*/
@media (max-width: 480px){
.gnavi-list ul li{
	width:70%;
	min-width: 250px;
	font-size: 50px;
	line-height: 50px;
}

/*
 company
---------------------------------------------------*/
#company-head{
	height: 0;
	padding-top:70%
}

#company-head h2{
	-webkit-transform: scale3d(0.8, 0.8, 1);
	   -moz-transform: scale3d(0.8, 0.8, 1);
	     -o-transform: scale3d(0.8, 0.8, 1);
	        transform: scale3d(0.8, 0.8, 1);
}

/*
 member
---------------------------------------------------*/
#member .member-item a{
	display: table;
	width: 100%;
}
#member .member-item a:hover{
	color: #000b4c;
}

#member .member-item a:hover:after{
	display: none;
}
#member a:hover .member-item-logo path{
	fill: #c3c7ca;
}
#member .member-item .grid{
	display: table-cell;
	vertical-align: middle;
}
#member .member-item .grid .grid-item{
	width:100%;
	float:none;
	height:auto;
	text-align:center;
}
#member .member-item-name{
	padding-left: 0;
	margin-bottom: 2em;
}
#member .member-item-logo{
	padding-left: 0;
}
#member .member-item-logo .svg svg{
	width: 104px;
}

/*
 member-detail
---------------------------------------------------*/
#member-detail-head{
	height: auto;
	padding: 2em 10%;	
	text-align:center;
}
#member-detail-name{
	width:100%;
	height: auto;
	padding-left: 0;
	margin-bottom: 1em;
	float:none;
}

#member-detail-name .division{
	font-size:24px;
	margin-top:0.2em;
}

#member-detail-logo{
	width:100%;
	height: auto;
	float:none;
	background:none !important;
}


/*
 contact
---------------------------------------------------*/
#contact h2{
	text-align:center;
	margin-bottom: 0.5em;
}
#contact #contact-info{
	margin-bottom:3em
}
#contact #contact-info .info{
	text-align:center;
	font-size: 2.5em;
	margin-bottom: 1em;
}
#contact #contact-info .info a.mail{
	display:inline-block;
	margin-right:0;
}
#contact #contact-info .info .tel{
	display:block;
	margin-left:0;
	line-height:1;
}
#contact #contact-info .info .slash{
	display:none;
}

#contact #contact-info .form-msg{
	padding:0 5%;
	text-align: center;
}
#contact-content.in-navi{
	padding: 30px;
}
#top-menu #contact-content.in-navi{
	padding-top:80px;
}
#contact-content.in-navi:after{
	content:'';
	display:block;
	position:absolute;
	top: 30px;
	left: 30px;
	right: 30px;
	bottom: 30px;
	border:1px solid rgba(255,255,255,0.5);
	z-index: 1;
	opacity: 0.5;
}
#top-menu #contact-content.in-navi:after{
	top: 80px;
}

#contact-content.in-navi h2{
	display:none;
}

#contact-content.in-navi #contact-info{
	position:relative;
	top: auto;
	width: 100%;
	max-width: 100%;
	text-align: center;
	margin-bottom: 0;
	padding-right: 0;
}
#contact-content.in-navi #contact-info .info{
	font-size:3em;
	margin-bottom: 0;
}
#contact-content.in-navi #contact-info .info .mail{
	margin-bottom: 0.4em;
}
#contact-content.in-navi #contact-info .info-msg{
	display:block;
}
#contact-content.in-navi #contact-info .form-msg{
	display:none;
}

#contact-content.in-navi #contact-form{
	display:none;
}

#contact-content.in-navi #contact-btn-close{
	top: 40px;
	margin-top: 0;
}
#top-menu #contact-content.in-navi #contact-btn-close{
	top: 90px;
}

}

/*
 max-width: 320px
------------------------------------------------------------*/
@media (max-width: 320px){
.gnavi-list ul li{
	width:75%;
	min-width: 200px;
	font-size: 45px;
	line-height: 42px;
}


.local-navi ul,
.local-navi dl{
	padding-left: 30px;
}
}