@import "../js/nav/styles.css";
@media only screen and (max-width:730px){
#device { display:block;}
#device p.pc_btn { display:none;}
#device p.sp_btn {display:block; }
}
@media only screen and (max-width:750px){

body { min-width:100%; font-size:100%;}
#header { display:none;}
#content{ width:100%;}
#footer { width:100%;}
#wrapper { background:#FFF; border-top:none; overflow:hidden;}
#base { width:100%; margin:0 !important;}

.pc { display:none;}
.sm { display:block;}

#device p.pc_btn { display:block !important;}
#device p.sp_btn { display:none !important;}

/*====================================================================================================
  HEADER
====================================================================================================*/

#header {}

/*====================================================================================================
  CONTENT
====================================================================================================*/

#content {}

/*====================================================================================================
  FOOTER
====================================================================================================*/

#footer {
	clear:both;
	margin:0;
	width:100%;
	color:#FFF;
	background:#082068;
}


#footer .f-all{ padding:0 2%; width:96%;}
#footer .f-all .access{ float:none;}
#footer .f-all .access .f-logo{ font-size:150%; font-weight:bold;}

#footer .f-all .f-nav{ float:none; padding:10px 0 0;}
#footer .f-all .f-nav p{ display:none;}
#footer .f-all .f-nav .copy{ float:none; margin:40px 0 0; text-align:left;}


/* PAGE */
#page,
#page a { display:none !important;}

#page_sm {
	position:fixed;
	right:20px;
	bottom:20px;
	z-index:9999;
}
#page_sm,
#page_sm a {
	display:block !important;
	width:50px;
	height:50px;
}
#page_sm a {
	text-indent:-9999px;
	background:url(../image/page-top.gif);
	background-size:100% auto;
}

/*====================================================================================================
  TOP PAGE
====================================================================================================*/

/* MAINIMG */
#mainimg {
	margin:0;
	padding:0;
	width:100%;
	height:150px;
	background-size:cover;
	background-position:bottom center;
}

#toppage { width:100%; margin:0;}

/* ABOUT */
#toppage .infomation{ width:80%; margin:50px auto;}
#toppage .infomation .info{ float:none; width:100%;}
#toppage .infomation .info h2{ padding-bottom:15px; text-align:left; font-size:110%; font-weight:bold;}
#toppage .infomation .info .news{}
#toppage .infomation .info .news dl{ width:100%;}
#toppage .infomation .info .news dt{ width:100%;}
#toppage .infomation .info .news dd{ width:100%;}
#toppage .infomation .contact{ float:none; margin:60px 0 0; width:100%;}
#toppage .infomation .contact:after {
	width:70px;
	height:65px;
	background-size:100% auto;
}

#toppage .technology{
	padding:30px 0;
	background-size: contain;
	background:url(../image/tec-bk.jpg);
}
#toppage .technology .all{ width:100%;}
#toppage .technology .all dl{
	padding:5px 0 20px;
	float:none;
	width:100%;
	text-align:center;
}


#toppage .recruit{
	width:100%;
	clear:both;
	position:relative;
	padding: 75px 0 100px;
	height:auto;
	background:url(../image/rec-bk3.jpg) no-repeat center bottom;
	background-size:300px auto;
}
#toppage .recruit:before,
#toppage .recruit:after{ display:none;}	
#toppage .recruit .title2 img{
	margin:0 8%;
	width:86%;
	min-width:50%;
}
#toppage .recruit .title2 p{ margin: 0 10% 30px; width:80%;}
#toppage .recruit .title:before{ display: none;}
#toppage .recruit .botton a{
	margin: 20px 5% 0;
	padding: 10px 0 0;
	width:90%;
	height:40px;

}



/*====================================================================================================
  SUB PAGE
====================================================================================================*/

#subpage { 
	margin:0 auto !important;
	padding:50px 0 0;
	width:90%;
    box-sizing:border-box;
}

/* TITLE */
h2 {
	display:block;	
	margin:0 auto;
	padding:25px 0 20px;
	height:auto;
	font-size:150%;
	line-height:90%;
	text-align:center;
	color:#FFF;
	background:url(../image/h2.jpg) no-repeat center bottom;
	background-size:auto;
	box-sizing:border-box;
}
h2 .small { display:block; font-size:50%;}


/* MIDASHI */
#subpage h3 {
	margin:0 2% 20px;
	padding:15px;
	font-size:100%;
	line-height:130%;
	text-align:center;
	background:url(../image/h3.png) no-repeat center top;	
}
#subpage h4 { margin:0 2% 5px; font-size:100%;}

/* CATCH COPY */
#subpage .catch { margin:0 2% 20px; font-size: 120%;}

/* COMMON */
#subpage .comment1 { margin:0 2% 20px;}
#subpage .comment2 { margin:0 2% 20px; padding:5%;}
#subpage .comment3 { margin:0 2% 20px; padding:5%;}

/* HYOU */
#subpage table.hyou { margin:10px 2%; width:96%;}
#subpage table.hyou2,
#subpage table.hyou3,
#subpage table.hyou4,
#subpage table.hyou5 {margin:0 2%; width:96%;}

#subpage table.hyou2 {}
#subpage table.hyou2 th,
#subpage table.hyou2 td {
	table-layout:auto !important;
	display:block !important;
	padding:5px 5% !important;
	width:90% !important;
	height:auto !important;
	text-align:left;
	font-weight:normal;
}
#subpage table th div.altop { top:10px;}
#subpage table th div.almid { position:relative;}
#subpage table th div.albottom { bottom:10px;}

/* vertical */
#subpage table th { position:static;}
#subpage table th div.altop,
#subpage table th div.almid,
#subpage table th div.albottom {position:static;}

/* LIST */
#subpage ul.list-ul { margin:20px 2%;}

/* LINK */
#subpage .link-box { width:100%; margin:0 2%;}
#subpage .link-box:after { display:none;}
#subpage .link2 .link {width:auto;}
#subpage .link3 .link {width:auto;}
#subpage .link4 .link {width:auto;}
#subpage .file-box { width:100%; margin:0 2%;}
#subpage .file-box:after { display:none;}
#subpage .file-box .file img {padding-right:10px;}
#subpage .file2 .file {width:auto;}
#subpage .file3 .file {width:auto;}
#subpage .file4 .file {width:auto;}

/* EMBEDDED */
#subpage .embedded { margin:0 2% 20px;}

/* PHOTO BOX */
#subpage .photo-box { margin:0 2%; padding:0; width:96%;}
#subpage .photo-box:after { display:none;}
#subpage .photo-box  ul { float:none; margin:15px 0; width:100%; text-align:center;}
#subpage .g1 ul li,
#subpage .g2 ul li,
#subpage .g3 ul li,
#subpage .g4 ul li,
#subpage .g5 ul li{ width:100%; }
#subpage .g1 ul li.photo img,
#subpage .g2 ul li.photo img,
#subpage .g3 ul li.photo img,
#subpage .g4 ul li.photo img,
#subpage .g5 ul li.photo img { max-width:220px; height:auto;}

/* BOX */
#subpage .temple-box { margin:0 2%; width:96%;}
#subpage .temple-box:after { display:none;}
#subpage .box1,
#subpage .box2 { float:none;margin: 0 2% 20px; width:96%;}
#subpage .box1:after,
#subpage .box2:after { display:none;}
#subpage .box1 .catch { margin:0 0 20px !important;}
#subpage .box1 h4,
#subpage .box2 h4 { margin:10px 0; font-size:100%;}
#subpage .photo-c { float:none; padding:0; width:100%;}
#subpage .photo-c img { max-width:220px; height:auto; margin:0 0 20px; padding:0;}
#subpage .photo-l,
#subpage .photo-r { float:none; padding:0; width:100%; text-align:center;}
#subpage .photo-l img,
#subpage .photo-r img { max-width:220px; height:auto; margin:0 0 20px; padding:0;}

/* LINE */
#subpage .line {
	margin:0 2% 20px;
	height:50px;
	background-size:100% auto;
}

/* BUTTON */
#subpage .button-box { margin:0 2% !important; padding:0; width:96%;}
#subpage .button-box:after { display:none;}
#subpage .button-box .bo { float:none; margin:0 2% 20px;}
#subpage .b1 .bo { width:96%;}
#subpage .b2 .bo { width:96%;}
#subpage .b3 .bo { width:96%;}

/* BUTTON */
#subpage ul.anchor { margin:20px 2% !important; padding:0; width:96%;}
#subpage ul.anchor:after { display:none;}
#subpage ul.anchor li{ float:none; margin:0 2% 10px;}
#subpage ul.anchor li a{ font-size:100%;}
#subpage .b1 li { width:96%;}
#subpage .b2 li { width:96%;}
#subpage .b3 li { width:96%;}


/*====================================================================================================
  ABOUT
====================================================================================================*/
#about {}
#about:before {
	top:-80px;
	left:0;
	width:80px;
	height:80px;
	background-size:100% auto;
}


/*====================================================================================================
  ACHIVEMENYS
====================================================================================================*/
#achivemenys {}
#achivemenys:before {
	top:-80px;
	left:0;
	width:60px;
	height:60px;
	background-size:100% auto;
}


/*====================================================================================================
  FACILITY
====================================================================================================*/
#facility {}
#facility:before {
	top:-80px;
	left:0;
	width:60px;
	height:60px;
	background-size:100% auto;
}
#facility .list_hyou table.hyou { border:none; margin-bottom:15px; background:#F6F6F6;}
#facility .list_hyou table.hyou th,
#facility .list_hyou table.hyou td {
	table-layout:auto !important;
	display:block !important;
	padding:2px 5% !important;
	width:90% !important;
	height:auto !important;
	text-align:left !important;
	font-weight:normal;
	border:none;
}
#facility .list_hyou table.hyou td b.sm { display:inline !important;}
#facility .list_hyou table.hyou td:nth-child(1) { font-weight:bold; padding:10px 5% !important; color:#082068; border-bottom:1px solid #DDD;}


/*====================================================================================================
  CHAREERS
====================================================================================================*/

#chareers {}
#chareers h2 {
	margin:0;
	padding:0;
	width:100%;
	height:200px;
	background-size:cover;
	background-position:center center;
}
#chareers h2 b {
	width:100%;
	height:200px;
	background-size:250px auto;
}

#chareers #subpage { padding:0;}
#chareers .message { padding:20px 0;}
#chareers .staff {
	padding:20px 0 150px;
	height:auto;
	background:#333 url(../../image/chareers_staff_sm.jpg) no-repeat;
	background-position:center bottom;
	background-size:100% auto;
	color:#FFF;
}
#chareers .banner { margin:50px auto; width:80%;}
#chareers .banner:after { display:none;}
#chareers .banner .photo { float:none; margin-right:0; text-align:center;}
#chareers .banner .come { float:none; padding-top:25px;}
#chareers .banner .come b { display:block; font-size:100%; }
#chareers .banner .come a {}
#chareers .banner .kiji { float:none; padding:10px 0 0;}
#chareers .banner .kiji a {
	padding:5px 0;
	width:100%;
}
#chareers .entry { margin:50px auto; width:85%;}
#chareers .entry .entry_btn a {
	margin:50px auto;
	padding:10px 0;
	width:70%;
	color:#FFF;
	font-size:100%;
}