@charset "utf-8";

*{
	margin: 0;
	padding: 0;
	border: 0;
	font-weight: normal;
	font-size:100%;
	vertical-align:baseline;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	font-style: normal;
}
article, header, footer, aside, figure, figcaption, nav, section { 
	display:block;
}
body {
	font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
	font-family: "Noto Sans Japanese";
	color:#333333;
	background: url(img/bg.jpg) repeat;
} body.service{
	background: url(img/service/bg.jpg) repeat !important;
}
ol, ul {
	list-style: none;
	list-style-type: none;
}

img{
	outline:none;
	border-style:none;
	width:auto;
	height:auto;
	max-width:100%;
	max-height:100%;
}

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

a, a:visited{
	color:#313131;
	text-decoration: none;
}a:hover {
	opacity: 0.8;
	cursor: pointer;
	text-decoration: none;
}

html{
	font-size: 20px;
	overflow-x: hidden;
}
@media screen and (max-width: 1400px){
	html{
		font-size: 19px;
	}

}
@media screen and (max-width: 1000px){
	html{
		font-size: 18px;
	}

}
@media screen and (max-width: 900px){
	html{
		font-size: 17px;
	}
}
@media screen and (max-width: 800px){
	html{
		font-size: 16.5px;
	}
}
@media screen and (max-width: 768px){
	html{
		font-size: 16px
	}
}
@media screen and (max-width: 480px){
	html{
		font-size: 15px;
	}
}
@media screen and (max-width: 360px){
	html{
		font-size: 14px;
	}
}

body{
	width: 100%;
	overflow-x: hidden;
}

.wf{
	width: 100%;
}.w90{
	width: 90%;
}.w80{
	width: 80%;
}


.lh2{
	line-height: 2;
}

.p5{
	padding: 5rem;
}.p1{
	padding: 1rem;
}

.pt2{
	padding-top: 2rem;
}.pt5{
	padding-top: 5rem;
}.pb5{
	padding-bottom: 5rem;
}.pb2{
	padding-bottom: 2rem;
}.pl10{
	padding-left: 10rem;
}
@media screen and (max-width: 768px){
	.sp-p0{
		padding: 0;
	}.sp-pt2{
		padding-top: 2rem;
	}.sp-pb2{
		padding-bottom: 2rem;
	}
}

.mt2{
	margin-top: 2rem;
}.mt5{
	margin-top: 5rem;
}.ml2{
	margin-left: 2rem;
}.mt-5{
	margin-top: -5rem;
}
@media screen and (max-width: 768px){
	.sp-m0{
		margin: 0;
	}
}

.tac{
	text-align: center;
}.tar{
	text-align: right;
}.tal{
	text-align: left;
}.vac{
	margin: 0 auto;
}.vam{
	vertical-align: middle;
}

.font-raleway{
	font-family: 'Raleway', sans-serif;
}

@media screen and (max-width: 768px){
	.sp-tac{
		text-align:center;
	}.sp-tal{
		text-align:left;
	}
}


.fs4{
	font-size: 4rem;
}.fs2h{
	font-size: 2.5rem;
}.fs2{
	font-size: 2rem;
}.fs1h{
	font-size: 1.5rem;
}.fs1{
	font-size: 1rem;
}.fsmini{
	font-size: 0.8rem;
}

@media screen and (max-width: 768px){
	.sp-fs4{
		font-size: 4rem;
	}.sp-fs2{
		font-size: 2rem;
	}.sp-fs1h{
		font-size: 1.5rem;
	}.sp-fs1{
		font-size: 1rem;
	}
}

.fw-bold{
	font-weight: bold;
}

.bg-white{
	background-color: white;
}.bg-orange{
	background-color: #F7931E;
}.bg-red{
	background-color: #D2223E;
}
.fc-white{
	color: white !important;
}.fc-orange{
	color: #F7931E !important;
}.fc-red{
	color: #D2223E !important;
}.fc-gray{
	color: #808080 !important;
}.fc-black{
	color: #000000 !important;
}


.dn{
	display: none;
}.df{
	display: flex;
}
.flex-horizontal{
	/*横に均等配置*/
	justify-content: space-between;
}
.flex1{
	flex: 1 1 0%;
}.align-item-center{
	align-items: center;
}.align-self-center{
	align-self: center;
}.row-reverse{
	flex-direction:row-reverse;
}.flex2{
	flex: 2 1 0%;
}.flex3{
	flex: 3 1 0%;
}

@media screen and (max-width: 768px){
	.sp-dn{
		display: none;
	}.sp-db{
		display: block;
	}.sp-df{
		display: flex;
	}.sp-di{
		display: inline;
	}
}
@media screen and (max-width: 480px){
	.ssp-db{
		display: block;
	}
}
@media screen and (max-width: 1195px){
	#tel{
		display: block;
	}
}

.posr{
	position: relative;
}.posa{
	position: absolute;
}


.button{
	padding: 1rem 2rem;
	border-radius: 18px;
	display:inline-block;
}.square-button{
	padding: 1rem 2rem;
	border-radius: 8px;
	display:inline-block;
}

@media screen and (max-width: 768px){
	.button, .square-button{
		padding: 0.8rem;
	}
}

.bg-white.button:hover{
	opacity:1 !important;
	color: lightgray;
}

.white-arrow:after{
	content : url('img/white.svg');
	width: 1rem;
	height: 1rem;
	margin-left: 1rem;
}.orange-arrow:after{
	content : url('img/orange.svg');
	width: 1rem;
	height: 1rem;
	margin-left: 1rem;
}.mynavi-button{
	border-radius: 40px;
	width: auto;
	display:inline-block;
	background: #00ABEB;
	margin: 2rem auto;
	font-weight: bold;
	line-height: 2.5rem;
}/* .mynavi-button:before{
	content: '';
	background: url(img/reqruit/mynavi.png) no-repeat center center;
	vertical-align: bottom;
	width: 10rem;
	height: 2.5rem;
	display: inline-block;
	background-size: contain;
} */


header{
	background: rgba(255,255,255, 0.6);
	padding: 2rem 3rem;
}header nav img{
	margin-right: 5px;
}


/*アイコンのスペース*/
#nav-open {
	display: inline-block;
	width: 30px;
	height: 22px;
	vertical-align: middle;
}

/*ハンバーガーアイコンをCSSだけで表現*/
#nav-open span, #nav-open span:before, #nav-open span:after {
	position: absolute;
	height: 3px;/*線の太さ*/
	width: 25px;/*長さ*/
	border-radius: 3px;
	background: #555;
	display: block;
	content: '';
	cursor: pointer;
}
#nav-open span:before {
  bottom: -8px;
}
#nav-open span:after {
  bottom: -16px;
}

/*閉じる用の薄黒カバー*/
#nav-close {
	display: none;/*はじめは隠しておく*/
	position: fixed;
	z-index: 99;
	top: 0;/*全体に広がるように*/
	right: 0;
	width: 100%;
	height: 100%;
	background: black;
	opacity: 0;
	transition: .3s ease-in-out;
}

/*中身*/
#nav-content {
	overflow: auto;
	position: fixed;
	top: 0;
	right: 0;
	z-index: 9999;/*最前面に*/
	width: 80%;/*左側に隙間を作る（閉じるカバーを表示）*/
	height: 100%;
	background: rgba(255,255,255,0.8);/*背景色*/
	transition: .3s ease-in-out;/*滑らかに表示*/
	-webkit-transform: translateX(105%);
	transform: translateX(105%);/*右に隠しておく*/
}

/*チェックが入ったらもろもろ表示*/
#nav-input:checked ~ #nav-close {
	display: block;/*カバーを表示*/
	opacity: 0.5;
}

#nav-input:checked ~ #nav-content {
	-webkit-transform: translateX(0%);
	transform: translateX(0%);/*中身を表示（右へスライド）*/
	box-shadow: 6px 0 25px rgba(0,0,0,.15);
}


#top_section{
	background: url(img/top/top.jpg) no-repeat center center;
	background-size: cover;
} #top_section div{
	padding: 10rem 2rem;
	text-shadow: 1px 1px 8px #808080;
} #top1{
	font-size: 8vw;
}#top2{
	font-size: 4vw;
}#top3{
	font-size: 1.8vw;
}
@media screen and (max-width: 768px){
	#top3{
		font-size: 1rem;
		margin-top: 0.8rem;
		font-weight: bold;
	}
	#top_section{
		background: url(img/top/sp-top.jpg) no-repeat center center;
		background-size: cover;
	}
	#top_section div{
		/*text-shadow: none;*/
	}
}

@media screen and (max-width: 768px){
	#reqruit_img{
		padding-top: 5rem;
	}
}


#top_ourservice{
	margin: -5rem auto 5rem auto;
}

@media screen and (max-width: 768px){
	#top_ourservice{
		margin: -3rem auto 5rem auto;
	}
}

.top_ourservice_top:before,
.top_ourservice_top:after,
.top_ourservice_bottom:before,
.top_ourservice_bottom:after,
.sp_top_ourservice_top:before,
.sp_top_ourservice_top:after,
.sp_top_ourservice_bottom:before,
.sp_top_ourservice_bottom:after{
	content: '';
	width: 2rem;
	height: 2rem;
	position: absolute;
}

.top_ourservice_top:before{
	top: 0;
	left: 0;
	border-top: gray 1px solid;
	border-left: gray 1px solid;

}.top_ourservice_top:after{
	top: 0;
	right: 0;
	border-top: gray 1px solid;
}.top_ourservice_top:last-child:after{
	top: 0;
	right: 0;
	border-right: gray 1px solid;
}

.top_ourservice_bottom:before{
	bottom: 0;
	left: 0;
	border-bottom: gray 1px solid;
	border-left: gray 1px solid;

}.top_ourservice_bottom:after{
	bottom: 0;
	right: 0;
	border-bottom: gray 1px solid;
}.top_ourservice_bottom:last-child:after{
	bottom: 0;
	right: 0;
	border-right: gray 1px solid;
}

.sp_top_ourservice_top:before{
	top: 0;
	left: 0;
	border-top: gray 1px solid;
	border-left: gray 1px solid;
}.sp_top_ourservice_top:after{
	top: 0;
	right: 0;
	border-top: gray 1px solid;
	border-right: gray 1px solid;
}.sp_top_ourservice_bottom:before{
	bottom: 0;
	left: 0;
	border-left: gray 1px solid;
}.sp_top_ourservice_bottom:after{
	bottom: 0;
	right: 0;
	border-right: gray 1px solid;
}.sp_top_ourservice_bottom:last-child:before{
	bottom: 0;
	left: 0;
	border-bottom: gray 1px solid;
}.sp_top_ourservice_bottom:last-child:after{
	bottom: 0;
	right: 0;
	border-bottom: gray 1px solid;
}



#top_shop{
	background:url(img/top/docomo_oomagari-ver2.jpg) no-repeat center center;
	background-size: cover;
}
@media screen and (max-width: 768px){
	#top_shop{
		padding: 140.78% 0 0 0;
		background:url(img/top/sp_docomo-ver2.jpg) no-repeat center bottom;
		background-size: 100%;
		height: 0;
	}
	#top_shop div{
		margin-top: -140.78%;
		padding: 5rem 1rem;
	}
}


#company_section{
	background: url(img/company/img.jpg) no-repeat center center;
	background-size: cover;
	padding: 10rem 1rem;
}
@media screen and (max-width: 768px){
	#company_section{
		background: url(img/company/sp-img.jpg) no-repeat center center;
		background-size: cover;
	}
}

#company-img img{
	/*原寸大を越えて拡縮*/
	width: 100%;
	height: auto;
}
@media screen and (max-width: 768px){
	#company-img{
		padding:2rem;
	}
}


#company-table{
	margin: 5rem auto 0 auto;
	min-width: 70%;
}#company-table tr:nth-child(even){
	background:white;
}#company-table th,#company-table td{
	padding: 1rem;
}#company-table th{
	font-weight: bold;
}

@media screen and (max-width: 900px){
	#company-table th,#company-table td{
		padding: 0.8rem;
	}#company-table th{
		width: 30%;
	}
}

@media screen and (max-width: 768px){
	#products_section img{
		padding: 2rem 5rem 1rem 5rem;
	}
}

@media screen and (max-width: 768px){
	#service-info{
		flex-wrap: wrap;
	}#service-info p {
		flex: 1 1 50%;
		margin-top: 2rem;
	}
}

.service-floorguide{
	flex-wrap: wrap;
	align-items: stretch;
}
.service-floorguide p{
	flex: 0 1 49%;
	margin-bottom: 1%;
	text-align: center;
	position: relative;
}
.service-floorguide span{
	position: absolute;
	left: 0px;
	right: 0px;
	bottom: 1.8rem;
	text-align: center;
	color: white;
	text-shadow: 0 0 6px rgba(0,0,0,0.5);
}


#reqruit_section{
	background: url(img/reqruit/1.jpg) no-repeat center center;
	background-size: 100%;
	/* 表示画像の高さ ÷ 表示画像の幅 × 100 */
	height: 0;
	padding-top: 84.72%;
}

@media screen and (max-width: 768px){
	#reqruit_section{
		background: url(img/reqruit/sp-1.jpg) no-repeat center center;
		background-size: 100%;
		/* 表示画像の高さ ÷ 表示画像の幅 × 100 */
		height: 0;
		padding-top: 167.81%;
	}
}


#reqruit2{
	background: url(img/reqruit/2.png) no-repeat bottom right;
	margin-bottom: -150px;
	background-size: contain;
}#reqruit3{
	background: url(img/reqruit/3.png) no-repeat bottom right;
	margin-bottom: -72px;
	background-size: contain;
}

#naname-top{
	border-style: solid;
	border-width: 7em 100vw 0 0;
	border-color: white #D2223E transparent transparent;
}#naname-bottom{
	border-style: solid;
	border-width: 7rem 0 0 100vw;
	border-color: #D2223E white;
}

@media screen and (max-width: 768px){
	#naname-top{
		border-width: 2em 100vw 0 0;
	}#naname-bottom{
		border-width: 2rem 0 0 100vw;
	}
}

.reqruit-training{
	display: inline-block;
	width: 45%;
	height: auto;
}

.reqruit-table{
	min-width: 70%;
}.reqruit-table th{
	text-align: center;
	font-weight: 700;
}.reqruit-table td{
	text-align: left;
}.reqruit-table tr:first-child th{
	padding: 1rem !important;
	border-bottom: 1rem solid white;
	background: #D2223E !important;
}.reqruit-table tr:nth-child(even) th{
	background: #F2F2F2;
	border-right: #F2F2F2 3px solid;
	background: white;
}.reqruit-table tr:nth-child(even) td{
	background: white;
}.reqruit-table tr:nth-child(odd) th{
	border-right: white 3px solid;
	background: #F2F2F2;
}.reqruit-table tr:nth-child(odd) td{
	background: #F2F2F2;
}.reqruit-table th, .reqruit-table td{
	padding: 1rem;
}

@media screen and (max-width: 768px){
	.reqruit-table th, .reqruit-table td{
		padding: 0.8rem;
	}
	.reqruit-table th{
		width: 30%;
	}

}

.footer-wrap {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	/* column-gap: 2rem; */
}
@media screen and (max-width: 768px){
	.footer-wrap {
		grid-template-columns: 1fr;
	}
}

.footer-img {
	width: 80%;
	height: auto;
	aspect-ratio: 3/2;
	margin-left: auto;
	margin-right: auto;
}
.footer-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	display: block;
}

.footer-logo {
	width: calc(227 / 16 * 1rem);
	margin-left: auto;
	margin-right: auto;
}
.footer-logo img {
	width: 100%;
	height: auto;
	display: block;
}


.footer-map {
	position: relative;
	width: 100%;
	height: 100%;
	min-height: 480px;
	iframe {
		position: absolute;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
	}
}