@charset "utf-8";
/* ===================================================================

 file name  :responsive.css
 style info :共通のレスポンシブスタイル指定（ストラクチャ、ヘッダー、フッター）

=================================================================== */

/* ==========================================================================
   smartPhone
   ========================================================================== */
@media screen and (max-width: 640px){


	/* ---------------------------------------------------------------------------
	
			structure
				ストラクチャ：基本設定、リンクカラーなど
	
	--------------------------------------------------------------------------- */






	/* ---------------------------------------------------------------------------
			#wrapper
				全体
	--------------------------------------------------------------------------- */
	#wrapper{
		padding:0;
		min-width:100%;
	}
	#wrapper img{
		width:100%;
		height:auto;
	}
	#wrapper > .spfix{
		width:100%;
		position:fixed;
		bottom:0;
		z-index:10000;
	}
	#wrapper > .spfix li{
		width:50%;
		float:left;
	}
	#wrapper > .spfix li a{
		display:block;
		padding:12px 0 0;
		height:37px;
		color:#fff;
		font-size:13px;
		text-align:center;
		text-decoration:none;
	}
	#wrapper > .spfix li.btn-request a{
		background:#ea7722;
	}
	#wrapper > .spfix li.btn-contact a{
		background:#4a4a4a;
	}
	/* ---------------------------------------------------------------------------
			#header	
				ヘッダー
	--------------------------------------------------------------------------- */
	#header{
		min-width:100%;
		height:50px;
		padding:0;
		z-index:100000;
		position:relative;
	}
	#header.fixed{
		position:relative;
	}
	#header .head-inner{
		width:100%;
	}
	#header:before{
		content:"";
		width:100%;
		height:100vh;
		position:fixed;
		background:rgba(0,0,0,0.7);
		display:none;
		-webkit-transition:all ease 0.3s;
		-moz-transition:all ease 0.3s;
		transition:all ease 0.3s;
	}
	.dialogIsOpen #header:before{
		display:block;
		opacity:1;
	}
	#header .head-inner{
		width:auto;
	}
	#logo{
		width:54px;
		margin:0 0 0 15px;
		padding:8px 0 0;
		float:none;
		background:none;
	}
	#menuBtn{
		width:51px;
		position:absolute;
		top:0;
		left:calc(100vw - 51px);
		background:#fff url(../../images/common/btn_close.png) no-repeat;
		background-size:100% auto;
		-webkit-transition:all ease 0.3s;
		-moz-transition:all ease 0.3s;
		transition:all ease 0.3s;
	}
	#menuBtn img{
		-webkit-transition:all ease 0.3s;
		-moz-transition:all ease 0.3s;
		transition:all ease 0.3s;
	}
	.dialogIsOpen #menuBtn{
		right:auto;
		left:0;
	}
	.dialogIsOpen #menuBtn img{
		opacity:0;
	}
	.gnav-wrap{
		width:calc(100vw - 51px);
		position:absolute;
		top:0;
		right:calc(-100vw + 51px);
		background:#fff;
		-webkit-transition:all ease 0.3s;
		-moz-transition:all ease 0.3s;
		transition:all ease 0.3s;
	}
	.dialogIsOpen .gnav-wrap{
		top:0;
		right:0;
	}
	#gnav{
		float:none;
		margin:0;
	}
	#gnav > ul > li{
		float:none;
		padding:0;
		font-size:13px;
		border-bottom:solid 1px #c7c7c7;
	}
	#gnav > ul > li >a{
		padding:15px 0 15px 32px;
		color:#000;
		text-decoration:none;
		position:relative;
	}
	#gnav > ul > li >a:before{
		width:11px;
		height:1px;
		top:0;
		left:auto;
		right:12px;
		bottom:0;
		margin:auto 0;
	}
	#gnav > ul > li.gnavMaking >a:after,
	#gnav > ul > li.gnavWorks >a:after,
	#gnav > ul > li.gnavCompany >a:after{
		content:"";
		display:block;
		width:1px;
		height:11px;
		background:#000;
		position:absolute;
		top:0;
		right:16px;
		bottom:0;
		margin:auto 0;
		-webkit-transition:all ease 0.3s;
		-moz-transition:all ease 0.3s;
		transition:all ease 0.3s;
	}
	#gnav > ul > li >a:hover:before{
		width:10px;
	}
	.index #gnav > ul > li.gnavTop >a,
	.making #gnav > ul > li.gnavMaking >a,
	.interview #gnav > ul > li.gnavInterview >a,
	.works #gnav > ul > li.gnavWorks >a,
	.event #gnav > ul > li.gnavEvent >a,
	.company #gnav > ul > li.gnavCompany >a{
		background:#e9e9e9;
	}
	#gnav > ul > li.gnavMaking >a:before,
	#gnav > ul > li.gnavWorks >a:before,
	#gnav > ul > li.gnavCompany >a:before{
		width:10px !important;
	}
	
	#gnav > ul > li.gnavTop >a:before,
	#gnav > ul > li.gnavInterview >a:before,
	#gnav > ul > li.gnavEvent >a:before{
		content:none;
	}
	#gnav > ul > li.spDown> a:after{
		opacity:0;
	}

	#gnav > ul > li > ul{
		min-height:0;
		overflow:hidden;
		-webkit-transition:all ease 0.3s;
		-moz-transition:all ease 0.3s;
		transition:all ease 0.3s;
	}
	#gnav > ul > li > ul{
		max-height:0;
		overflow:hidden;
	}
	#gnav > ul > li.spDown > ul{
		max-height:250px;
		overflow:hidden;
	}
	#gnav > ul > li > ul > li{
		border-top:solid 1px #c7c7c7;
	}
	#gnav > ul > li > ul > li a{
		display:block;
		padding:15px 0 15px 47px;
		color:#000;
		text-decoration:none;
		background:#f6f6f6;
	}
	
	#gnav > ul > li > ul > li a:before{
		content:"";
		display:inline-block;
		width:10px;
		height:1px;
		margin:0 5px 0 0;
		background:#000;
		vertical-align:middle;
	}
	
	
	#hnav{
		position:static;
		text-align:center;
	}
	#hnav li{
		width:100%;
		float:none;
		margin:0;
	}
	#hnav li a{
		padding:15px 0 15px 32px;
		height:auto;
		font-size:13px;
		font-weight: bold;
		text-align:left;
	}
	#hnav li.btn-request a{
		background:#ea7722;
	}
	#hnav li.btn-contact a{
		background:#4a4a4a;
	}
	#hnav li.btn-request a:hover{
		background:#ea7722;
	}
	#hnav li.btn-contact a:hover{
		background:#4a4a4a;
	}
	#hnav li.btn-sns{
		display:inline-block;
		width:17px;
		margin:15px 0 30px 30px;
	}
	#hnav li.btn-contact + li.btn-sns{
		margin-left:0;
	}
	#hnav li.btn-sns a{
		padding:0;
	}


	
	/* ---------------------------------------------------------------------------
			#content		
				コンテンツ
	--------------------------------------------------------------------------- */
	#pageHeader .page-inner{
		margin:0;
		padding:30px 0;
		background-repeat: no-repeat;
		background-position:50% 50%;
		background-size:cover;
	}
	#pageHeader .page-inner h1 img{
		width:auto;
		height:69px;
	}
	#pageHeader .pankuzu{
		max-width:100%;
		margin:5px 0 30px;
		padding:0 15px;
		box-sizing:border-box;
	}
	#pageHeader .pankuzu li{
		display:inline;
		font-size:9px;
		color:#4e4d4d;
	}
	#pageHeader .pankuzu li a{
		color:#4e4d4d;
		text-decoration:none;
	}
	#pageHeader .pankuzu li a:hover{
		text-decoration:underline;
	}


	/* ---------------------------------------------------------------------------
			#main
				メイン
	--------------------------------------------------------------------------- */

	/* ---------------------------------------------------------------------------
			#side		
				サイド
	--------------------------------------------------------------------------- */
	#side{
		width:100%;
		min-width:100%;
		position:static;
	}
	#side #copyright{
		padding:12px 0 50px;
		transform:none;
		position:static;
		margin:0;
		text-shadow:none;
		text-align:center;
	}
	#side #copyright small{
		font-size:9px;
	}
	#side .side-sns{
		display:none;
	}
	

	/* ---------------------------------------------------------------------------
			#footer
				フッター
	--------------------------------------------------------------------------- */
	#footer .contact-area{
		padding:48px 0 25px;
		background:url(../../images/common/bg_foot_sp.jpg) no-repeat 50% 0;
		background-size:cover;
	}
	#footer .contact-area .foot-inner{
		width:100%;
		padding:0;
	}
	#footer .contact-area .foot-inner .contact-txt{
		width:100%;
		float:none;
		margin:0 0 20px;
		padding:0;
		text-align:center;
	}
	#footer .contact-area .foot-inner .contact-txt dl dt{
		width:117px;
		margin:0 auto 13px;
	}
	#footer .contact-area .foot-inner .contact-txt dl dt span{
		margin:7px 0 0;
		font-size:9px;
	}
	#footer .contact-area .foot-inner .contact-txt dl dd{
		font-size:9px;
		line-height:1.8;
		letter-spacing:-0.05em;
	}
	#footer .contact-area .foot-inner .btn-wrap{
		width:78.125%;
		float:none;
		margin:0 auto;
	}
	#footer .contact-area .foot-inner .btn-wrap li{
		margin:0 0 10px;
	}
	#footer .contact-area .foot-inner .btn-wrap li a{
		display:block;
		font-size:13px;
		text-align:center;
		text-decoration:none;
		color:#fff;
		letter-spacing:2px;
	}
	#footer .contact-area .foot-inner .btn-wrap li.btn-request a,
	#footer .contact-area .foot-inner .btn-wrap li.btn-contact a{
		height:auto;
		padding:14px 0;
	}
	#footer .contact-area .foot-inner .btn-wrap li.tel{
		padding:9px 0 12px;
		text-align:center;
	}
	#footer .contact-area .foot-inner .btn-wrap li.tel span{
		width:175px;
		font-size:11px;
	}
	#footer .contact-area .foot-inner .btn-wrap li.tel img{
		width:175px;
	}
	
	#footer .foot-inner02{
		width:100%;
		margin:0 auto;
		padding:0;
	}
	#footer .fnav-wrap .btn-sns{
		position:static;
		padding:23px 0;
		font-size: 0;
		text-align:center;
	}
	#footer .fnav-wrap .btn-sns li{
		display:inline-block;
		width:30px;
		float:none;
		margin:0 0 0 9px;
		font-size:12px;
	}
	#footer .fnav-wrap .btn-sns li:first-child{
		margin-left:0;
	}
	#fnav{
		padding:0;
		position:static;
		border-top:solid 1px #d9d9d9;
	}
	
	#fnav li{
		display:block;
		font-size:14px;
		border-bottom:solid 1px #d9d9d9;
	}
	#fnav li:before{
		content:none;
	}
	#fnav li a{
		display:block;
		padding:15px 0;
		font-size:13px;
		text-align:center;
	}
	#fnav li a:hover{
		text-decoration:none;
	}
	#footer .foot-info{
		width:100%;
		padding:38px 0;
	}
	#footer .foot-info .bp{
		display:none;
	}
	#footer .foot-info address{
		background:none;
	}
	#footer .foot-info address .flogo{
		width:86%;
		margin:0 auto 20px;
		text-align:center;
		background:url(../../images/common/bg_foot.png) no-repeat right 0;
		background-size:auto 100%;
	}
	#footer .foot-info address .flogo img{
		width:72px;
	}
	#footer .foot-info address dl{
		font-size:10px;
		text-align:center;
	}
	#footer .foot-info .p-nav{
		position:static;
		margin:20px 0 0;
		text-align:center;
	}
	#footer .foot-info .p-nav li{
		display:inline;
		margin:0 8px;
		font-size:9px;
	}
	#footer .foot-info .p-nav li a{
		color:#656464;
		text-decoration:none;
	}
	#footer .foot-info .p-nav li a:hover{
		text-decoration:none;
	}
	
	#footer .f-bnr{
		padding:15px 0;
	}
	#footer .f-bnr ul{
		width:299px;
		min-width:auto;
		margin:0 auto;
	}
	
	#footer .f-bnr ul li{
		width:32.6086956521%;
		margin:0;
	}
	#footer .f-bnr ul li:nth-child(2),
	#footer .f-bnr ul li:nth-child(5){
		margin:0 0.66889632107%;
	}
	#footer .f-bnr ul li:nth-child(1),
	#footer .f-bnr ul li:nth-child(2),
	#footer .f-bnr ul li:nth-child(3){
		margin-bottom:9px;
	}
	
	#pagetop{
		width:47px;
		position:fixed;
		right:5px;
		bottom:42px;
	}
	
	
	
}