@charset "utf-8";

/* reset */
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:98%;vertical-align:baseline;background:transparent}

body{line-height:1; /*overflow:hidden;*/}

article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}

nav ul,ul,li{list-style:none}

blockquote,q{quotes:none}

blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}

a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent}

ins{background-color:#ff9;color:#000;text-decoration:none}

mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold}

del{text-decoration:line-through}

abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}

table{border-collapse:collapse;border-spacing:0}

hr{display:block;height:1px;border:0;border-top:1px solid #cccccc;margin:1em 0;padding:0}

input,select{vertical-align:middle}

input[type="button"],input[type="submit"]{-webkit-appearance:none}

.fl{float:left}

.fr{float:right}

.mt5{margin-top:5px}.mt10{margin-top:10px}.mt15{margin-top:15px}.mt20{margin-top:20px}.mt25{margin-top:25px}.mt30{margin-top:30px}.mt35{margin-top:35px}.mt40{margin-top:40px}

.fz8{font-size:8px}.fz10{font-size:10px}.fz12{font-size:12px}.fz14{font-size:14px}.fz16{font-size:16px}.fz18{font-size:18px}.fz20{font-size:20px}.fz24{font-size:24px}

.ta-c{text-align:center}.ta-r{text-align:right}.ta-l{text-align:left}

body{color:#333;font-family:"Hiragino Kaku Gothic Pro",Meiryo,Osaka,"MS PGothic",sans-serif;font-size:16px;line-height:1.2}

.container{box-sizing:border-box}

.cf,.grid-col2,.grid-col4,.grid-col5,.grid-col6,.tabItem>li .lpWrap .inner-item-wrap dl,.tabItem>li .profileWrap .greeting,.tabItem>li .profileWrap .blog .blogItem{zoom:1}

.cf:before,.grid-col2:before,.grid-col4:before,.grid-col5:before,.grid-col6:before,.tabItem>li .lpWrap .inner-item-wrap dl:before,.tabItem>li .profileWrap .greeting:before,.tabItem>li .profileWrap .blog .blogItem:before,.cf:after,.grid-col2:after,.grid-col4:after,.grid-col5:after,.grid-col6:after,.tabItem>li .lpWrap .inner-item-wrap dl:after,.tabItem>li .profileWrap .greeting:after,.tabItem>li .profileWrap .blog .blogItem:after{content:"\0020";display:table}

.cf:after,.grid-col2:after,.grid-col4:after,.grid-col5:after,.grid-col6:after,.tabItem>li .lpWrap .inner-item-wrap dl:after,.tabItem>li .profileWrap .greeting:after,.tabItem>li .profileWrap .blog .blogItem:after{clear:both}

.tabItem>li .profileWrap .blog .blogItem .headline-blog{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.grid-col2{width:100%}

/* grid */
.grid-col2>div,.grid-col2>li{float:left;width:50%}

.grid-col2.grid-blog{margin-top:10px}

.grid-col2.grid-blog li{width:94%;margin-bottom:20px;padding:20px 3%;background-color:#eee;transition:ease-in-out 0.3s}

.grid-col2.grid-blog li:nth-child(odd){margin-right:2%}

.grid-col2.grid-blog li:hover{background-color:#ccc}

.grid-col2.grid-blog li:hover a{text-decoration:none}

.grid-col2.grid-firstView{width:600px;margin:0 auto}

.grid-col2.grid-footer{width:450px;margin:0 auto}

.grid-col4{width:100%}

.grid-col4 h3 img {width:80%;height:auto}

.grid-col4>div,.grid-col4>li{float:left;width:25%}
#description .grid-col4 li{margin: 0 1%;}

.grid-col4.grid-firstView{width:160px;margin:0 auto}

.grid-col5{width:100%}

.grid-col5>div,.grid-col5>li{float:left;width:20%}

.grid-col6{width:100%}

.grid-col6>div,.grid-col6>li{float:left;width:16.66666%}

/* btn */
.btn a{display:block;height:22px;margin:20px 10px;padding:10px;color:#fff;line-height:22px;text-align:center;text-decoration:none;border:2px solid #fff;transition:ease-in-out 0.3s}

.btn a:hover{color:#363947;background-color:rgba(255,255,255,0.6)}

.btn.btn-black a{color:#333;border-color:#333}

.btn.btn-black a:hover{color:#fff;background-color:rgba(0,0,0,0.6)}

.btnGray{width:100%}

.btnGray span,.btnGray a{display:block;height:22px;margin:10px;padding:10px;background-color:#ccc;color:#fff;line-height:22px;text-align:center;text-decoration:none;border:2px solid #fff}

.btnGray span:before,.btnGray a:before{font-size:0.8em;font-family:FontAwesome;vertical-align:middle;content:"\f057";margin-right:6px;font-weight:normal}

.btnGray.btnGray-able span,.btnGray.btnGray-able a{margin:10px;background-color:#fff;color:#333;border-color:#333;transition:ease-in-out 0.3s}

.btnGray.btnGray-able span:before,.btnGray.btnGray-able a:before{content:"\f05d"}

.btnGray.btnGray-able span:hover,.btnGray.btnGray-able a:hover{color:#fff;background-color:rgba(0,0,0,0.6)}

.btn-top {margin: 30px 0;display: block;text-align: right; position: fixed;bottom: 0; right: 15px; z-index:1000;}
.btn-top a {line-height:26px;font-size:20px;padding:10px;color: #fff;text-decoration: none; background:rgba(0,0,0,0.8); border-radius:26px;}
.btn-top a:before{font-family:FontAwesome;content:"\f077"; }

/*
.btn-top {height: 22px;margin: 30px 0;display: block;text-align: right; position: fixed;bottom: 0; right: 15px}
.btn-top a {padding: 10px;color: #aaa;line-height: 22px;text-decoration: none;border: 2px solid #aaa;transition: ease-in-out 0.3s;  background: rgba(255,255,255,0.8)}
*/

/* social */
.social{font-family:FontAwesome}

.social ul{list-style-type:none}

.social a{font-size:30px;color:#fff;text-decoration:none;transition:ease-in-out 0.3s}

.social a:hover{color:rgba(255,255,255,0.6)}.social a:after{font-family:FontAwesome}

.social .social-facebook:after{content:"\f082"}

.social .social-twitter:after{content:"\f081"}

.social .social-googlep:after{content:"\f0d4"}

.social .social-email:after{content:"\f199"}

.social.social-black a{color:#999}

.social.social-black a:hover{color:rgba(0,0,0,0.6)}

.social.social-black a.social-facebook:hover{color:#4e73ae}

.social.social-black a.social-twitter:hover{color:#3cafef}

.social.social-black a.social-googlep:hover{color:#e43a17}

.social.social-black a.social-email:hover{color:#55c860}

.social.social-small a{font-size:16px;margin-right:4px}

/* title */
.block_title{padding:50px 0;color:#fff;text-align:center}

.block_title.block_title-description{background-color:#363947}

.block_title.block_title-portfolio{background-color:#58be89}

.block_title.block_title-team{background-color:#fba848}

.block_title.block_title-profile{background-color:#40aaef}

.block_title.block_title-contact{background-color:#a683c1}

.block_title h2{font-size:22px;font-weight:normal}

.block_title .js_border{width:0;height:1px;margin:5px auto;background-color:#fff}

.block_title .block_subtitle{font-size:12px}

.headline{margin-bottom:20px;font-size:28px;line-height:1.5}

.headline-mid{margin:10px auto;font-size:28px;font-weight:normal;line-height:1}

.headline-small{font-size:20px}

.headline-footer{font-size:28px}

/* contentsnav */
.selectContents{width:100%;margin-bottom:10px;border-bottom:2px solid #000}

.selectContents .tabUI{max-width:640px;width:100%;margin:0 auto}

.selectContents .tabUI li{position:relative;padding:20px 0;text-align:center;cursor:pointer}

.selectContents .tabUI li h3 img{position:relative;z-index:10;top:20px;vertical-align:bottom;opacity:0.6;transition:ease-in-out 0.3s}

.selectContents .tabUI li h3 span{display:block;padding-top:5px;font-size:12px;font-weight:bold;opacity:0;transition:ease-in-out 0.4s}

.selectContents .tabUI li .fukidashi{position:absolute;z-index:1;left:50%;bottom:-23px;margin-left:-18px;opacity:0}

.selectContents .tabUI li.current{cursor:default}

.selectContents .tabUI li.current h3 img,.selectContents .tabUI li.active h3 img{top:0;opacity:1}

.selectContents .tabUI li.current span,.selectContents .tabUI li.current .fukidashi,.selectContents .tabUI li.active span,.selectContents .tabUI li.active .fukidashi{opacity:1}

.slide_area {
	width:100%;
	position:relative;
}
.slide_area .tabUI {
	width:84%;
}
.slide_area .arrow {
	width:6%;
	height:80px;
	margin:1%;
	position:absolute;
	top:5px;
}
.slide_area .prev {
	background:url(../images/prev_sp.gif) no-repeat;
    background-size: contain;
	left:0;
}
.slide_area .next {
	background:url(../images/next_sp.gif) no-repeat;
    background-size: contain;
	right:0;
}



#team .slide_area .arrow {
	top:18px;
}

.tabItem{max-width:640px;width:90%;margin:0 auto}

.tabItem>li{display:table;width:100%;padding:40px 0 30px;background:no-repeat right bottom}

.tabItem>li:not(:first-of-type){display:none}

.tabItem>li:not(:first-of-type) .js_fadeIn{opacity:0}

.tabItem>li .js_fadeIn{display:block;vertical-align:middle}

.tabItem>li .lpWrap .team-job{font-size:20px;font-weight:bold;margin-bottom:10px}

.tabItem>li .lpWrap h4{width:100%;margin:0 auto 10px auto}

.tabItem>li .lpWrap h4 span{margin:10px 0 0 15px;font-size:16px;font-weight:normal;color:#999;font-style:italic}

.tabItem>li .lpWrap h4.headline-team{width:100%}

.tabItem>li .lpWrap p{width:100%;margin:0 auto 20px auto;line-height:1.6}

.tabItem>li .lpWrap .btnHelper{width:100%; margin:0 auto}

.tabItem>li .lpWrap .social-helper{float:right;margin-top:6px;}

.tabItem>li .lpWrap .social-helper+p{clear:both}

.tabItem>li .lpWrap .inner-item-wrap dl{margin-top:8px;line-height:1}

.tabItem>li .lpWrap .inner-item-wrap dt{float:left;margin-right:10px}

.tabItem>li .lpWrap .inner-item-wrap .skillWrap{width:100%;margin-top:3px}

.tabItem>li .lpWrap .inner-item-wrap .skillWrap p{display:inline-block;width:auto;margin-top:5px;margin-bottom:0;padding:2px 5px;border:1px solid #333}

.tabItem>li .inner-img-wrap{display:block;vertical-align:middle;width:100%;}

.tabItem>li .inner-img-wrap img {width:100%;height:auto}

.tabItem>li .inner-img-wrap .inner-img-link{width:100%;margin-top:5px;color:#999;}

.tabItem>li .inner-img-wrap .inner-img-link:before{font-family:FontAwesome;content:"\f08e";margin-right:5px}

.tabItem>li .inner-img-wrap .inner-img-link a{color:#999;}

.tabItem>li .inner-img-wrap .inner-img-link a:hover{color:#333;text-decoration:none}

.tabItem>li .profileWrap{width:100%;line-height:1.6}

.tabItem>li .profileWrap dl{display:table;width:100%;}

.tabItem>li .profileWrap dl:last-of-type{border:none}

.tabItem>li .profileWrap dt,.tabItem>li .profileWrap dd{padding:10px 0;vertical-align:middle;border-bottom:1px solid #ccc}

.tabItem>li .profileWrap dt{width:100%;border-bottom:1px solid #eee}

.tabItem>li .profileWrap .mapWrap{margin-top:20px;}
.mapWrap{
	margin:0;
	padding-top:50%;
	border:1px solid #ddd;
	overflow:hidden;
	height:0;
	position:relative;
	display:block;
}
.mapWrap::before{
	content:"\9577\62BC\3067\64CD\4F5C\304C\3067\304D\307E\3059";
	/*「長押しすると地図が操作できます」と生成*/
	display:block;
	z-index:100;
	color:#000;
	width:100%;
	position:absolute;
	top:50%;
	left:0;
	margin:-0.5em 0 0 0;
	line-height:1;
	text-align:center;
	font-weight:bold;
	text-shadow:1px 1px 0 #fff;
}
.mapWrap::after{
	content:"";
	display:block;
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:rgba(255,255,255,0.5);
}
.mapWrap.release::before,
.mapWrap.release::after{
	display:none !important;
}
.mapWrap > iframe,
.mapWrap > div{
	/* レスポンシブデザイン想定 */
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}
.tabItem>li .profileWrap .btn-helper{width:100%;margin:0 auto}

.tabItem>li .profileWrap .btn-helper a{margin:20px 0 5px}

.tabItem>li .profileWrap .greeting #pregidentImg,.tabItem>li .profileWrap .companyImg{width:100%;height:auto}

#contact .tabItem .profileWrap {margin:20px auto 30px auto}

.tabItem .profileWrap .mailForm dt { margin:10px 0;}

.tabItem .profileWrap .mailForm input[type="text"],.tabItem>li .profileWrap .mailForm textarea{width:94%;padding:20px 3%;font-size:18px;background-color:#f6f6f6;border:none}

.tabItem .profileWrap .mailForm input[type="text"]:focus,.tabItem>li .profileWrap .mailForm textarea:focus{background-color:#fff}

.tabItem .profileWrap .mailForm input[type="radio"]{display:none}

.tabItem .profileWrap .mailForm input[type="radio"]+label{display:inline-block;width:100%; margin-bottom:5px; box-sizing:border-box;padding:10px 0;color:#999;text-align:center;border:1px solid #ccc}

.tabItem .profileWrap .mailForm input[type="radio"]:checked+label{font-weight:bold;color:#fff;background-color:#40aaef;border-color:#40aaef}

.tabItem .profileWrap .mailForm textarea { width:100%;height:auto; box-sizing:border-box;}

.tabItem .profileWrap .mailForm .submitBtn{width:100%;margin:20px 0 0 0;padding:8px 0;font-size:20px;color:#333;text-align:center;background-color:#fff;border:2px solid #333;transition:ease-in-out 0.3s}

.tabItem .profileWrap .mailForm .submitBtn:hover{color:#fff;background-color:rgba(0,0,0,0.6)}.

tabItem>li .profileWrap .recruit{margin-top:20px}

.tabItem>li .profileWrap .recruit dt{width:100%}

.tabItem>li .profileWrap .blog .blogItem img{float:left;width:120px;margin-right:20px}

.tabItem>li .profileWrap .blog .blogItem .headline-blog a{color:#333}

/*.tabItem.tabItem-description li{background-image:url(images/desc-image-1.jpg)}*/

.inner-item-wrap {margin-bottom:20px;}

/* nav */

.menuBtn{position:fixed;top:20px;left:20px;width:40px;height:40px;border:1px solid #fff;border-radius:5px;line-height:40px;cursor:pointer;box-shadow:0 0 2px rgba(0,0,0,0.3),0 0 2px rgba(0,0,0,0.3) inset; background:rgba(0,0,0,0.3); z-index:999}

.menuBtn:before{color:#fff;font-size:20px;font-family:FontAwesome;content:"\f0c9"; text-align:center; width:40px;display:block}

.menuBtn div{position:absolute;top:19px;left:8px;width:24px;height:2px;background-color:#fff;transition:0.4s;box-shadow:0 0 2px rgba(0,0,0,0.3)}

/*
.menuBtn .b1{top:10px}

.menuBtn .b2{top:16px}

.menuBtn .b3{top:22px}

.menuBtn .b4{top:28px}
*/
.closeBtn{position:fixed;z-index:101;display:none;top:20px;left:20px;width:40px;height:40px;border:1px solid #fff;border-radius:5px;line-height:40px;cursor:pointer;box-shadow:0 0 2px rgba(0,0,0,0.3),0 0 2px rgba(0,0,0,0.3) inset}

.closeBtn div{position:absolute;top:19px;left:8px;width:24px;height:2px;background-color:#fff;transition:ease-in-out 0.4s;box-shadow:0 0 2px rgba(0,0,0,0.3)}.closeBtn .b1{top:15px;left:7px;width:12px;transform:rotate(-45deg)}

.closeBtn:before{color:#fff;font-size:20px;font-family:FontAwesome;content:"\f00d"; text-align:center; width:40px;display:block}

/*
.closeBtn .b3{top:23px;left:7px;width:12px;transform:rotate(45deg)}
*/
.navMenu{position:fixed;top:0;left:0;z-index:-100;display:table;color:#fff;opacity:0}

.navMenu .navMenu-list{width:100%;height:20%;background:no-repeat center center;display:inline-table;text-align:center;vertical-align:middle;transition:ease-in-out 0.6s}

.navMenu .navMenu-list:first-child{background-color: #363947}

.navMenu .navMenu-list:nth-child(2){background-color: #58be89}

.navMenu .navMenu-list:nth-child(3){  background-color: #fba848}

.navMenu .navMenu-list:nth-child(4){  background-color: #40aaef}

.navMenu .navMenu-list:last-child{background-color: #a683c1}

.navMenu .navMenu-list a {color:#fff;text-decoration:none;display:table-cell; height:100%;width: 100%;vertical-align: middle;}

.navMenu .navMenu-list h2 span{display:block;font-size:12px}

.navMenu .navMenu-list h2 .line{width:100px;max-width:80%;height:1px;margin:4px auto;background-color:#fff}

.navMenu .navMenu-list .message{display:none;margin:40px auto 50px;width:60%}

.navMenu .navMenu-list .button{display:none;margin:0 auto}

.navMenu .navMenu-list .button a{padding:10px 80px;color:#fff;text-decoration:none;border:2px solid #fff;transition:ease-in-out 0.3s}

.firstView{display:table;width:100%;height:100%;color:#fff;text-align:center;background:url(../images/bg1.jpg) no-repeat center center;background-size:cover}

.firstView-wrap{display:table-cell;vertical-align:middle}

.firstView-wrap h1{font-size:30px}

.firstView-wrap h1 img{display:block;width:120px;height:auto;margin:0 auto}

.firstView-wrap .animateArrow{position:relative}

.firstView-wrap .animateArrow:after{content:"\f107";font-family:FontAwesome;font-size:40px;color:#fff;line-height:1;vertical-align:middle}

.footer{padding:30px 0;background-color:#0e7ac4;color:#fff;text-align:center}

.footer .btn-helper a{display:block;height:22px;margin:20px 10px;padding:10px;color:#fff;line-height:22px;text-align:center;text-decoration:none;border:2px solid #fff;transition:ease-in-out 0.3s}

.footer .btn-helper a:hover{color:#363947;background-color:rgba(255,255,255,0.6)}

.footer .twitter {
	margin:20px auto;
}
/*#profile .grid-col4 li {
    margin: 0 1%;
}*/