@charset "utf-8";
body{font-family: "Yu Gothic", "Yu Gothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック";background:#fff;}

#wrapper {width:100%;margin:0 auto;overflow:hidden;}
.pc{display: block!important;}
.sp{display: none!important;}


@media screen and (max-width: 750px) {
.pc{display: none!important;}
.sp{display: block!important;}
}

a img:hover{opacity: 0.8; transition: 0.4s;}

/*================================================================================
	文字
=================================================================================*/

p,th,td{font-size: 16px;}
h3{font-size: 16px;}
h2{text-align: center;margin-bottom: 20px;}
h3{text-align: center;line-height:2em;font-weight: 500;margin-bottom: 50px;}
h4{text-align: center;font-size: 16pt;font-weight:600;}
h5{	
	margin-top:120px; 
	margin-bottom:50px; 
	text-align: center;
	font-size: 13pt;
	line-height:2em;
	text-indent: 20;
	font-weight: 500;
	width: 300px;
	overflow: hidden;
	margin:60px auto 25px auto; 
}

dl{display: none;}dt{display: none;}dd{display: none;}


/*================================================================================
情報
=================================================================================*/

@media screen and (max-width: 750px) {.direx, .storemap, .photo, .map{
	width: 100%;
	padding-top: 15%;
	padding-bottom: 15%;
	margin: 0 auto;
}
	
h2{margin-bottom: 100px;}
	
h2 img{width: 60%;}
	
.map >h2 >img{width: 90%;}

	
h3{
	width: 87%;
	font-size: 11pt;
    line-height: 2em;
    font-weight: 500;
	margin: 5% auto 8% auto;
}
}

@media screen and (max-width: 540px) {
	
h2{margin-bottom: 40px;}
h3{font-size: 9pt;}
h4 {font-size: 10pt;}
.direx, .storemap, .photo, .map {padding-top: 50px!important; padding-bottom: 50px!important;}
}

/*================================================================================
	頭
=================================================================================*/

header{
	padding: 20px;
	height: 50px;
}

h1{
	width: 159px;
	height: 51px;
	float: left;
	display: table-cell;
	vertical-align: middle;
	transition: 0.4s;
}

.left small{color: #000;}

.entry{
	display: flex;
	width: 124px;
	float: right;
	overflow: hidden;
}


.left{
	display: flex;
	width: 340px;
	overflow: hidden;
	vertical-align: middle;	
    float: left;
}

header div {
	margin:0 auto;
	width: 100%;
	justify-content: space-between;
	align-items: center;
}

header div a:hover {opacity: 0.6;}
header div a {transition: 0.4s;}
header div a img {transition: 0.4s;}

@media screen and (max-width: 750px) {
	
header{
    display: flex;
    vertical-align: middle;
    padding: 5px 4%;
}
}
@media screen and (max-width: 540px) {
.h1{
	width: 36%;
	float: left;
	display: block;
}
	
.h1 img{
	width: 100%;
	float: left;
	display: block;
	margin-top: 1%;
}
}

@media screen and (max-width: 750px) {	
.left {width: 75%;margin-left: 0;}
.left > small{width: 67%;text-align: left;}
h1{width: 33%; height: auto;}
.entry {width: 25%;margin-right: 0;}
}

@media screen and (max-width: 500px) {
h1{width: 40%; height: auto;}
.left > small{width: 60%;
}
}
/*================================================================================
ファーストビュー
=================================================================================*/

.mv{
	position: relative;
	width: 100%;
	height: 610px;
	margin: 0 auto;
	z-index: 0;
}

.mv i{
	width: 2000px;
	position: absolute;
	margin: 0 auto;
	left: -1000px;
    right: -1000px;
}

.copy{
	width: 410px;
	position: absolute;
	top:80px;
	left: 50%;
	margin-left: -460px;
	line-height: 2;
	z-index: 2;
}

.copy p{font-weight: bold;}

@media screen and (max-width: 1100px) {
.copy {
    top: 80px;
    left: 50%;
    margin-left: -45%;
}
}

@media screen and (max-width: 750px) {
.mv i{width: 100%; position: static;}	
.mv i img{width: 100%;}	
.mv{
	width: 100%;
    height: auto;
	margin: 0 auto;
	position: static;
}
}



/*================================================================================
ダイレックスの特徴
=================================================================================*/


.direx{
	padding-top: 120px;
	padding-bottom: 120px;
	margin: 0 auto;
}

.direx p{margin: 0 auto;}

.direx p img{
	margin: 0 auto;
	width: 100%;
}

.direx{width:980px; padding-top: 120px; padding-bottom: 120px; margin: 0 auto;}


@media screen and (max-width: 980px) {
.direx {width: 100%;}

.direx p{width: 100%;}
}

@media screen and (max-width: 750px) {
.direx h3{text-align: justify;
}
}

/*================================================================================
店舗見取り図
=================================================================================*/


.storemap {
    padding-top: 120px;
    padding-bottom: 120px;
    margin: 0 auto;
    background-color: #eff8fe;
}

.storemap p{
	width: 980px;
	display: block;
	margin: 0 auto;
}

.storemap p img{
	margin:90px auto 0px;
	width: 980px;
	display: block;
}

@media screen and (max-width: 1100px) {
.storemap p{width: 90%;}
}

@media screen and (max-width: 750px) {
.storemap p{width: 100%;}
	
.storemap p img{
	width: 100%;
	margin: 0 auto;
}
}

/*================================================================================
フォトギャラリー
=================================================================================*/

.photo{
	padding-top: 120px;
	padding-bottom: 120px;
	margin: 0 auto;
}
.photo p img{
	margin: 0 auto;
	width: 1039px;
	display: block;
}

@media screen and (max-width: 1000px) {
.photo{
	padding-top: 120px;
	padding-bottom: 120px;
	margin: 0 auto;
}

.photo p img{
	width: 100%;
	margin: 0 auto;
}
}


/*================================================================================
会社説明会情報
=================================================================================*/

.map{
	width: 100%;
	padding-top: 120px;
	padding-bottom: 120px;
	margin: 0 auto;
    background-color: #eff8fe;
}
.mapin{
	position: relative;
	width: 710px;
	margin: 0 auto 80px;
}

.map_1{position: absolute;top:190px; left: 123px;}
.map_2{position: absolute;top:297px; left: 123px;}
.map_3{position: absolute;top:255px; left: 301px;}
.map_4{position: absolute;bottom:64px; left: 0px;}
.map_5{position: absolute;bottom:66px; left: 301px;}
.map_6{position: absolute;bottom:260px; right: 0px;}

.map i img{
	margin: 0 auto;
	width: 100%;
}

@media screen and (max-width: 750px) {
.map h3{text-align: justify!important;}
	
.mapinsp{
	position: relative;
	width: 100%;
	margin: 0 auto 50px;
}

.mapinsp img{
	margin: 0 auto;
	width: 100%;
}
	
.map_1sp{position: absolute;top:35%; left: 31%; width: 20%;}
.map_2sp{position: absolute;bottom:0%; right: 32%; width: 25%;}
.map_3sp{position: absolute;top:12%; left: 41%; width: 20%;}
.map_4sp{position: absolute;top:6%; left: 7%; width: 30%;}
.map_5sp{position: absolute;bottom:0%; right: 7%; width: 20%;}
.map_6sp{position: absolute;bottom:25%; right: 7%; width: 20%;
}
}

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

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



/*================================================================================
	エントリー
=================================================================================*/


.botan{
	background-image: url(../image/entry_bg.jpg);
	background-size: cover;
	background-position: center;
	width:100%;
	background-color: #1654a2;
	padding: 100px 0;
}

.botan a img{
	margin: 0 auto;
}

@media screen and (max-width: 750px) {
.botan{
    background-image: none;
	width:100%;
	background-color: #1654a2;
}

.botan a img{
	width: 100%;
}
}

@media screen and (max-width:500px) {
.botan{
	padding: 50px 0;
}
}

/*================================================================================
	フッター
=================================================================================*/
footer{background-color: #666;}
footer >small {display: block;color: #FFF;padding: 20px 0 20px;text-align: center;}

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

footer{background-color: #666;}
small {display: block;color: #FFF;font-size: 9px;text-align: center; font-weight: 500;}
}

/*================================================================================
	ページトップへ
=================================================================================*/


#pageTop {
		position: fixed;bottom: 20px;right: 20px;
}
	
#pageTop a{
		background:url(../image/pagetop.png) no-repeat;
		width:79px;
		height: 0;
		padding-top:79px;
		overflow: hidden;
		z-index: 999;
}

#pageTop a:hover {text-decoration: none;opacity: 0.6;}


@media screen and (max-width: 750px) {
#pageTop {position: fixed;bottom: 40px;right: 16px; z-index: 999;}
#pageTop a{
		background:url(../image/sp/sp_pagetop.png) no-repeat;
		background-size: 100%;
		width:40px;
		height: 0;
		padding-top:40px;
		overflow: hidden;
		z-index: 999;
}
}