/* CSS Document */
/* layout */

/*=================================
	media screen
===================================*/
@media screen and (min-width: 769px) {

.pn{
	display:none;
}

.sdb{
	display:none;
}
#closebtn{
	display: none;
}

/* tablet only */


}

@media screen and (max-width: 1024px) {



}

/*-------------------------*/
/* 1200以下*/
/*-------------------------*/

@media screen and (max-width: 1000px) {


}

/*-------------------------*/
/* 1024以下*/
/*-------------------------*/

@media screen and (max-width: 1024px) {


.gnav > ul > li > a {
    display: block;
    width: 80px;
}

/* 1024以下 ここまで*/
}

/*-------------------------*/
/* 900以下*/
/*-------------------------*/


@media screen and (max-width: 900px) {




/* 900以下 ここまで*/
}


/*-------------------------*/
/* TAB SP共通レイアウト 768px*/
/*-------------------------*/
@media screen and (max-width: 768px) {

.pn{
	display:block;
}
.sn{
	display:none;
}

/*header -------------------------*/



/*gnav -------------------------*/

.gnav{
	display:none;
}
@keyframes slidecatch {
    0% {opacity: 0;letter-spacing: 5px;}
    100% {opacity: 1;letter-spacing: 0px;}
}


/*
	LAYOUT
*/

header{
	position: fixed;
}

header .logo {
    float: none;
    text-align: left;
    margin-bottom:10px;
    padding-left:20px;
}
header .logo img{
    width: 140px;
    height: auto;
}
header article {
    padding: 10px 0 0px;
}
header .logo span {
    margin-left: 10px;
    font-size:12px !important;
}

/*ボタンなど -------------------------*/

.contactbtn{
	display: none;
}
.mm-opened .contactbtn{
	display: none;
}

#menubtn{
	position: fixed;
	right:15px;
	top:15px;
	z-index: 110;
}
#entrybtn{
	position: fixed;
	right:65px;
	top:15px;
	z-index: 110;
}
.mm-panels > .mm-panel.mm-hasnavbar{
	margin-top:80px;
}
.mm-menu{
	text-align:left;
	z-index: 110;
}
#closebtn{
	display: none;
	position: fixed;
	right:15px;
	top:15px;
	z-index: 110;
}
.mm-opened #closebtn{
	display: block;
}
.mm-opened #menubtn{
	display: none;
}
.mm-opened #totop{
	display: none;
}
/*container -------------------------*/

.container{
	width: 100%;
	box-sizing: border-box;
}


/*mainimg -------------------------*/
.mainimg .catch{
	height: 100px;
	bottom: 15% !important;
}
.mainimg .catch:before{
	font-size:24px;
	margin-bottom:10px;
	width: 320px;
}
.mainimg .catch div {
    left: 20px;
    top: 20px;
}
.mainimg li:nth-child(4) .catch div {
    left: 0px;
    right: 20px;
}
@keyframes slidecontainer {
    0% {opacity: 0;width:0px;}
    100% {opacity: 1;width: 320px;}
}
.mainimg .catch h2{
	font-size:22px;
}
.mainimg .catch p{
	font-size:14px;
}


/*topsettings -------------------------*/

#topAboutus .flex li{
	width: 100%;
	min-height: 300px;
}
#topAboutus .flex li:first-child{
	width: 100%;
	background: url(../images/top/img_top_message.jpg) -200px center no-repeat;
	background-size:cover;
}
#topAboutus .flex li:first-child figure{
	height:300px;
}
#topAboutus .flex li:first-child figure img{
	display: none;
}

#topAboutus .flex li a{
	display: block;
	min-height: 300px;
}
#topAboutus li a:before {
	content:none;
}
#topStaff ul li{
	width: 47%;
	margin-bottom:20px;
}
#topStaff figcaption {
	font-size:12px;
}

#topStaff .btn a {
	width: 90%;
	font-size: 1em;
	box-sizing: border-box;
}

#topRecruitment li{
	width: 100%;
}
#topRecruitment figcaption{
	display: none;
}
#topAboutus figcaption{
	display: none;
}
.aside-wrap .flex li {
    width: 94%;
    margin:0px auto 15px;
}

/*table -------------------------*/

.defTable01 {
	margin:1%;
	width: 98%;
}
	.defTable01 th,
	.defTable01 td{
		display: block;
		width: 100%;
		box-sizing: border-box;
	}

	.tbl-guide.defTable01 th{
		background:#eee;
	}

.shops .cap {
    float: none;
    width: 100%;
    margin:15px 0;
}


.bread_crumb_list {
	top:57px;
}


/* -------------------------*/
/* sub */
/* -------------------------*/

#content-sub .container > article{
	padding-left:2%;
	padding-right:2%;
	box-sizing: border-box;
	width: 100%;
}
#content-sub .container > article h2{
	font-size:20px;
}
#content-sub .container h3{
	font-size: 22px;
}

.submainimg li{
	height: 320px;
}
.submainimg li .subcatch h2 {
    font-size: 28px;
}

.anchor li{
	margin: 0px 5px;
}

.anchor li a{
	font-size: 14px;
	padding:8px 2px;
}

#company01 p,#company02 p{
	font-size:13px !important;

}

#content-sub #topStaff ul li{
	width: 46%;
}


/*パララックス -------------------------*/

.palla{
	width:100%;
	background-attachment:scroll;
	background-position: center center !important;
	background-size: 100%;
    height: 200px;
    position: static;
}
.container#company01 .palla {
	background:url(../images/aboutus/bg_company.jpg) scroll 50% center no-repeat;
	background-size:120%;
	height: 280px;
}
.container#message03 .bg {
	background:url(../images/recruitment/bg_message.jpg) scroll 35% 50% no-repeat;
	background-size:140%;
	height: 280px;
}
.container#message03 h3 {
	padding-top:80px !important;
	padding-right:20px !important;
}


/* business */

.container#business02 .inner{
	width: 94%;
	margin: auto;
}
.container#business02 .inner {
	padding-bottom:40px;
}
.container#business02 figure{
	width: 90%;
	float: none;
	margin: 20px auto;
}
#business02.container h4{
	float: none;
	text-align: center;
	margin-bottom:20px;
}
#business02.container p{
	float: none;
	max-width: 100%;
}
#business02.container p.btn{
	text-align: center;
	width: 100%;
}
#business02 figure img{
	width: 100%;
}
#business02 h4{
	text-align: center;
}
#business02 .btn a{
	margin: 20px auto !important;
}

/* interview */


.interviewimg li{
	background-position:0px top ;
	background-size: auto 70%;
}

.interviewimg .subcatch {
	padding-top:500px;
    margin: auto;
    text-align: left;
}
.interviewimg .subcatch .inner{
	width: 100%;
	box-sizing: border-box;
	padding:20px;
}

.interviewimg .inner h2{
	font-size:20px;
}
.profile{
	padding:20px;
}
.profile table{
	margin-top:15px;
	line-height: 120%;
}
.profile table th{
	vertical-align: top;
	width:50px;
	font-size: 12px;
}
.profile table td{
	font-size: 12px;
}

.interview .inner{
	padding:15px;
}

#content-sub .interview.interviewL {
	background-size: 900px auto;
	background-position: 10% top;
}
#content-sub .interview.interviewR {
	background-size: 900px auto;
	background-position: 90% top;
}



/* 個別調整 */

#content-sub .interview.interviewR.r70{
	background-size: 900px auto;
	background-position: 70% top;
}
#content-sub .interview .inner .box{
	float: none !important;
	width:100% !important;
	padding:0px;
	box-sizing: border-box;
	background:transparent;
	border:none;
	margin-top:310px;
	margin-bottom:0px;
}
#content-sub .feature.flex{
	display: block;
}
#content-sub .feature.flex dl{
	width: 96% ;
	margin: 10px auto;
}

/*message*/

#sidemenu dt{
	position: static;
	display: block;
}
#sidemenu dd{
	width: 100%;
	top:100%;
}

/* aside */
#content-sub .container aside{
	width:100%;
	float:none;
	margin:0px auto 100px auto;
}
footer nav{
	display: block !important;
	padding:20px 0px;
}

footer nav > ul > li > a{
	padding:5px;
	display: block;
}

footer #footer-btm{
	text-align: center;
}
footer #footer-btm figure,
footer #footer-btm p{
	float: none;
	margin-right:0;
}

footer #footer-btm li:after{
	content:none;
}
#footer nav ul {
    width: 100%;
}
#footer nav ul li{
    width: 50%;
}
footer .mark{
	position: static;
}
#footer-btm .mark,#footer-btm #copyright{
	float: none;
	padding:0px 10px;
	text-align: center;
}
#footer-btm .mark{
	margin-bottom:15px;
}

/* TAB SP共通レイアウト ここまで*/
}


/*-------------------------*/
/* TBレイアウト 760px*/
/*-------------------------*/
@media  screen and (min-width: 481px) and (max-width: 768px) {


/* header
-------------------------*/



/* TABレイアウトここまで */
}


@media screen and (max-width: 660px) {

#number02 .numberinner li{
	width: 96%;
}

}


/*-------------------------*/
/* SPレイアウト 480px*/
/*-------------------------*/
@media screen and (max-width: 480px) {


.interviewimg li{
	background-position:-80px top ;
	background-size: auto 70%;
}
.masonry{
	height: auto !important;
	width: 100%;
	box-sizing: border-box;
	padding:2%;
}

.masonry li{
	width: 100%;
	margin-bottom:2%;
	position: static;
}

.masonry li.grid{
	height: auto !important;
}
.masonry li.grid2{
	height: auto !important;
}

#number02 .numberinner{
	width: 100% !important;
	box-sizing: border-box;
	padding:2%;
}
#number02 .numberinner li{
	width: 100% !important;
}

/* SPレイアウトここまで */
}