@charset "utf-8";

@font-face {
  font-family: YuGothicM;
  src: local(Yu Gothic Medium);
}
/* --------------
 reset
-------------- */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}
ol,ul{list-style:none}
caption,th{text-align:left}

img {max-width:100% !important; height:auto;vertical-align: bottom;}
iframe {max-width:100% !important; border:0;}

/* --------------
 clearfix
-------------- */
div:after,ul:after,ol:after,dl:after,
header:after,footer:after,
nav:after,section:after,article:after {
	content: ""; 
	display: block;
	clear: both;
}

/* --------------
 base
-------------- */
body {
	color: #222;
	font: 500 1em/1.4 "Yu Gothic Medium", "游ゴシック Medium", YuGothic,YuGothicM, 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
	word-wrap: break-word;
	overflow-wrap: break-word;
}
@media all and (-ms-high-contrast:none){
    body {font-family: "メイリオ",Meiryo,"游ゴシック",YuGothic,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック","MS PGothic",sans-serif;}
}

.serif {
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}

.sans-serif {
	font-family:  YuGothic,YuGothicM, 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
}

body * {
	box-sizing: border-box;
}

h1,h2,h3,h4,h5,h6 {
	line-height: 1.2;
	word-break: break-word !important;
}
h1 {font-size: 1.5em;}
h2 {font-size: 1.3em;}
h3 {font-size: 1.1em;}
h4 {font-size: 1.0em;}
h5 {font-size: 1.0em;}
h6 {font-size: 1.0em;}

	
/* link */
a {
	color: #06F;
	text-decoration: none;
}
a:hover {
	color: #000;
	text-decoration: underline;
}
a:hover img {
	-moz-opacity:0.8;
	opacity:0.8;
}

/* --------------
 modules css
-------------- */
/* ---------- font weight */
.thin {	font-weight: 100 !important;}
.demilight {	font-weight: 300 !important;}
.normal {	font-weight: 400 !important;}
.medium {	font-weight: 500 !important;}
.bold {	font-weight: 700 !important;}
.black {	font-weight: 900 !important;}

/* ---------- align */
.alc { text-align: center !important;}
.alr { text-align: right !important;}
.all { text-align: left !important;}

.alt { vertical-align: top !important;}
.alb { text-align: bottom !important;}

/* ---------- float */
.noFloat { float: none !important;}

/* ---------- Cancele */
.both { clear: both;}

/* ---------- margin,padding */
.mb0 {	margin-bottom: 0px !important;}
.mb3 {	margin-bottom: 3px !important;}
.mb5 {	margin-bottom: 5px !important;}
.mb10 {	margin-bottom: 10px !important;}
.mb15 {	margin-bottom: 15px !important;}
.mb20 {	margin-bottom: 20px !important;}
.mb25 {	margin-bottom: 25px !important;}
.mb30 {	margin-bottom: 30px !important;}
.mb35 {	margin-bottom: 35px !important;}
.mb40 {	margin-bottom: 40px !important;}
.mb45 {	margin-bottom: 45px !important;}
.mb50 {	margin-bottom: 50px !important;}
.mb55 {	margin-bottom: 55px !important;}
.mb60 {	margin-bottom: 60px !important;}
.mb70 {	margin-bottom: 70px !important;}
.mb80 {	margin-bottom: 80px !important;}
.mb90 {	margin-bottom: 90px !important;}
.mb100 {margin-bottom: 100px !important;}

.ml0 {	margin-left: 0px !important;}
.ml5 {	margin-left: 5px !important;}
.ml10 {	margin-left: 10px !important;}
.ml20 {	margin-left: 20px !important;}
.ml30 {	margin-left: 30px !important;}

.mr0 {	margin-right: 0px !important;}
.mr5 {	margin-right: 5px !important;}
.mr10 {	margin-right: 10px !important;}
.mr20 {	margin-right: 20px !important;}
.mr30 {	margin-right: 30px !important;}

.mt0 {	margin-top: 0px !important;}
.mt3 {	margin-top: 3px !important;}
.mt5 {	margin-top: 5px !important;}
.mt10 {	margin-top: 10px !important;}
.mt15 {	margin-top: 15px !important;}
.mt20 {	margin-top: 20px !important;}
.mt30 {	margin-top: 30px !important;}
.mt50 {	margin-top: 50px !important;}

.pb0 {	padding-bottom: 0px !important;}
.pb3 {	padding-bottom: 3px !important;}
.pb5 {	padding-bottom: 5px !important;}
.pb10 {	padding-bottom: 10px !important;}
.pb20 {	padding-bottom: 20px !important;}
.pb30 {	padding-bottom: 30px !important;}

.pt0 {	padding-top: 0px !important;}
.pt3 {	padding-top: 3px !important;}
.pt5 {	padding-top: 5px !important;}
.pt10 {	padding-top: 10px !important;}
.pt15 {	padding-top: 15px !important;}
.pt20 {	padding-top: 20px !important;}
.pt30 {	padding-top: 30px !important;}

.pl0 {	padding-left: 0px !important;}
.pl3 {	padding-left: 3px !important;}
.pl5 {	padding-left: 5px !important;}
.pl10 {	padding-left: 10px !important;}
.pl20 {	padding-left: 20px !important;}

.pr0 {	padding-right: 0px !important;}
.pr3 {	padding-right: 3px !important;}
.pr5 {	padding-right: 5px !important;}
.pr10 {	padding-right: 10px !important;}
.pr20 {	padding-right: 20px !important;}


/* ----- text */
.txtS {
	color: #666;
	font-size: 85%;
}
.HL1 {
	text-align: center;
	font-weight: 500;
	position: relative;
	margin-bottom: 30px;
}
.HL1:after {
	content: "";
	width: 80px;
	height: 2px;
	background: #38beef;
	position: absolute;
	bottom: -10px;
	left: 0;
	right: 0;
	margin: auto;
}
.HL2 {
	text-align: center;
	font-weight: 500;
	margin-bottom: 30px;
}
.HL2 span.ttlJP {
	color: #087fab;
	display: block;
}
.ttlH2 {
	position: relative;
	margin-top: 20px;
	margin-bottom: 20px;
	padding-bottom: 8px;
}
.ttlH2:after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 5px;
	background: linear-gradient(-70deg,transparent 35%,#38beef 45%, #38beef 55%,transparent 65%);
	background-size: 5px 5px;
}
.ttlH2.grayH2:after {
	background: linear-gradient(-70deg,transparent 35%,#ccc 45%, #ccc 55%,transparent 65%);
	background-size: 5px 5px;
}
.ttlH3 span {
	position: relative;
	padding-left: 25px;
	font-weight: bold;
	margin-bottom: 10px;
	display: inline-block;
}
.ttlH3 span::before {
	content: '';
	height: 12px;
	width: 12px;
	display: block;
	background: #38beef;
	box-shadow: 0 0 5px rgba(255, 255, 255, 0.3) inset;
	position: absolute;
	top: -0px;
	left: 5px;
	transform: rotate(-50deg);
}
.ttlH3 span::after {
	content: '';
	height: 8px;
	width: 6px;
	display: block;
	background: #38beef;
	box-shadow: 0 0 5px rgba(255, 255, 255, 0.3) inset;
	position: absolute;
	top: 13px;
	left: 2px;
	transform: rotate(-90deg);
}
.clRed {
	color: #cd1d1d;
}
.clBlue {
	color: #087fab;
}
/* ----- background */
.bgA {
	background: #eaf0ee;
}
/* ----- list */
.ulDisc {
	margin-left: 22px;
	line-height: 1.4;
	list-style: outside disc;
}

.olDecimal {
	margin-left: 22px;
	list-style: outside decimal;
}

.ulDisc li, .olDecimal li {
	margin-bottom: 10px;
}

/* ----- decoration (button, etc...) */

/* ----- button */
.dtlBtn1 a {
	background: #38beef;
	color: #fff !important;
	font-weight: bold;
	text-align: center;
	border-radius: 7px;
	border-bottom: 3px solid #087fab;
	display: inline-block;
}
.dtlBtn2 {
	text-align: center;
	margin-top: 20px;
}
.dtlBtn2 a {
	border: 1px solid #087fab;
	color: #087fab;
	transition: all .3s ease;
	position: relative;
}
.dtlBtn2 a::after {
	content: "";
	width: 6px;
	height: 6px;
	border: 2px solid;
	border-color: #087fab #087fab transparent transparent;
	transform: rotate(45deg);
	position: absolute;
	top: 0;
	bottom: 0;
	right: 10px;
	margin: auto;
}
/* ----- img */
.ofi {
	width: 100%;
	height: 100%;
  object-fit: cover;
  font-family: 'object-fit: cover;'
}
/* --------------
 common
-------------- */

/* =header
-------------------------------------------------------------- **/
#header a {
	color: #222;
}
#home .headerCont {
	background: rgba(255,255,255,.8);
}
/* =siteHeader
---------------------------------------------------- */
#siteHeader .siteHeadR .headTel {
	text-align: center;
}
#siteHeader .siteHeadR .headTel p:first-child {
	font-weight: bold;
	padding-bottom: 3px;
}
#siteHeader .siteHeadR .headTel p:last-child {
	font-size: 90%;
	padding-top: 3px;
}
/* =globalNav
---------------------------------------------------- */
#globalNav li a {
	display: block;
	padding: 3px 10px;
}
#globalNav li a span {
	font-size: 75%;
	color: #888;
	display: block;
}

/* =container
-------------------------------------------------------------- */
.inConts:last-child {
	margin-bottom: 0;
}
/* =breadcrumb
---------------------------------------------------- */
#breadCont {
	background: #38beef;
	padding: 3px 0;
}
#breadcrumb li {
	color: #fff;
	font-size: 85%;
	display: inline-table;
}
#breadcrumb li a {
	color: #fff;font-weight: bold;
	padding-right: 5px;
}
#breadcrumb li a:after {
	content: "　>"; 
}
#breadcrumb li a:hover {
	color: #eee;
}

/* =headline / titles
---------------------------------------------------- */


/* =sidebar
---------------------------------------------------- */
/* =aside
------------------------------------------ */


/* =footer
-------------------------------------------------------------- */
#footer {
	background: #087fab;
}
#footTop h2 {
	margin-bottom: 15px;
}
/* =siteFooter
---------------------------------------------------- */

/* =copyright
---------------------------------------------------- */
#copyright {
	margin-top: 20px;
	text-align: center;
}
#copyright a {
	color: #FFF;
}

/* =pageTop
---------------------------------------------------- */
#pageTop {
	display: block;
	position: fixed;
}

#pageTop a {
	text-indent: -9999px;
	background: url(../img/pageTop.png) no-repeat;
	display: block;
}

/* =#social
---------------------------------------------------- */
.fb_iframe_widget > span {
	vertical-align: baseline !important;
}
#social {
	margin-top: 10px;
}
#social > div {
	display: inline-block;
	margin-right: 10px;
}

/* --------------
 home contents
-------------- */
/* =visual
---------------------------------------------------- */
#visual {
	position: relative;
}
#visual .txtBox {
	width: 100%;
	color: #fff;
	text-align: center;
	text-shadow: 0 0 5px #087fab, 0 0 10px #0a9fd6, 0 0 10px #0a9fd6;
	position: absolute;
}
#visual .imgBox,
#visual .txtBox {
	opacity: 0;
	transition: opacity 3s ease;
}
#visual .imgBox.display,
#visual .txtBox.display {
	opacity: 1;
}

/* =homeService
---------------------------------------------------- */
.serviceBox a {
	color: #222;
}
.serviceBox {
	border: 1px solid #000;
	margin-bottom: 20px;
}
.serviceBox:last-child {
	margin-bottom: 0;
}
.serviceBox a .txtBox .cateMark {
	width: 150px;
	background: #38beef;
	color: #fff;
	font-size: 90%;
	text-align: center;
	padding: 5px 10px;
	border-radius: 25px;
	display: inline-block;
}
.serviceBox .imgBox {
	height: 0;
	position: relative;
}
.serviceBox .imgBox img {
	position: absolute;
	top: 0;
	left: 0;
}
/* =homeAbout
---------------------------------------------------- */
#homeAbout {
  background: url(../img/home/bg_about.jpg) no-repeat center center / cover;
	text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 10px #fff
}
/* =homeCompany
---------------------------------------------------- */
.companyMap {
	margin-bottom: 20px;
}
.companyMap iframe {
	width: 100%;
}
/* =homeBnr
---------------------------------------------------- */
.bnrCont {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
/* --------------
 subpages contents
-------------- */
.subContact {
	padding: 15px;
	border: 5px double #ccc;
	background: #fdfdfd;
}
.subContact p {
	text-align: center;
}
.pTel a {
	font-weight: bold;
}
.subContact small {
	font-weight: normal;
	font-size: 70%;
}
.subContact i {
	margin-right: 10px;
}

/* ------------------------------------------------------------ company */
.tblType1 {
	width: 100%;
}

.tblType1 th {
	padding: 15px;
	font-weight: 500;
	line-height: 1.2em;
	vertical-align: middle;
	background: #E1F0FF;
}

.tblType1 td {
	padding: 15px;
	line-height: 1.5em;
	background: #FCFCFC;
}
.vAlignM {
	vertical-align: middle;
}

a.btnMap {
	padding: 5px 15px;
	color: #FFF !important;
	text-decoration: none !important;
	background: #0079B7;
	
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
	border-radius: 3px;
}
/* ------------------------------------------------------------ website */

/* ---------------------------------------- webIntro */

/* ---------------------------------------- webFlow */
.stepBox,.creBox {
	border: 1px solid #9f9e9c;
	box-sizing: border-box;
}
.tri {
	position: relative;
}
.stepBox h3 {
	margin-bottom: 15px;
}
.tri:after {
	width: 0;
	height: 0;
	position: absolute;
	margin: auto;
	z-index: 10;
}
/* ---------------------------------------- webOption */
.webOption {
	display: flex;
	flex-wrap: wrap;
}
.optionBox h3 {
	font-size: 120%;
	text-shadow: 0 2px 0 #fff, 2px 0 0 #fff, 0 -2px 0 #fff, -2px 0 0 #fff, -2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff, 2px 2px 0 #fff;
	margin-bottom: 30px;
}
#ex1 { background: rgba(56,190,239,.2) url(../img/website/ic_ex1.png) no-repeat right 15px top 15px;}
#ex2 { background: rgba(56,190,239,.2) url(../img/website/ic_ex2.png) no-repeat right 15px top 15px;}
#ex3 { background: rgba(56,190,239,.2) url(../img/website/ic_ex3.png) no-repeat right 15px top 15px;}
#ex4 { background: rgba(56,190,239,.2) url(../img/website/ic_ex4.png) no-repeat right 15px top 15px;}

.webOption h3 b {
	color: #31859c;
}
.webOption h3 span {
	color: #888;
	font-size: 85%;
}
.webOption p {
	padding: 10px 0 0;
	border-top: 3px solid #fff;
}

/* ------------------------------------------------------------ recruit */
.ulRecruit a {
	color: #222;
}
.ulRecruit a:hover {
	text-decoration: none;
}
.ulRecruit li a span {
	display: block;
	margin-bottom: 5px;
}
.ulRecruit li img {
	border: 1px solid #ccc;
}
.divShien li {
	background: url(../img/recruit/icCheck.png) no-repeat left 4px top 9px;
	padding: 5px 0 5px 25px;
	margin-bottom: 5px;
	border-bottom: 1px dotted #ccc;
}
.divShien li span {
	background: rgba(0, 0, 0, 0) linear-gradient(transparent 60%, #FFDFEF 0%) repeat scroll 0 0;
}
.contsListing .ulType1 {
	letter-spacing: -.5em;
}
.contsListing .ulType1 li {
	background: #087fab;
	color: #fff;
	letter-spacing: normal;
	display: inline-block;
	margin-right: 2%;
	margin-top: 10px;
	padding: 10px 15px;
	border-radius: 25px;
}
.contsListing .ulType1 li:last-child {
	margin-right: 0;
}
.boxListingR h3 {
	background: rgba(56,190,239,.2);
	margin-bottom: 10px;
	padding: 10px;
	border-radius: 3px;
}
.boxListingR .dlList1 dt,
.boxListingR .dlList1 dd {
	padding-left: 25px;
	padding-top: 5px;
}
.boxListingR .dlList1 dt {
	background: url(../img/recruit/icCheck.png) no-repeat left 4px top 9px;
	
}
.boxListingR .dlList1 dd {
	border-bottom: 1px dotted #ccc;
	padding-bottom: 5px;
}
/* ------------------------------------------------------------ contact */
.tblForm th b {
	display: inline-block;
	background: #fff;
	font-size: 80%;
	margin-left: 10px;
	padding: 0 5px;
	border-radius: 5px;
	border: 1px solid #cd1d1d;
	font-weight: 500;
}
.submit input,
.submit a {
	background: #fff;
	border: 1px solid #087fab;
	color: #087fab;
	margin-top: 10px;
}