/*-------------------------------------------------------------------
　common
-------------------------------------------------------------------*/
#wrapper{
	width:100%;
	margin:100px 0 0 0;
	overflow: hidden;
	border:0px solid #000;
}

#wrapper img{
	width:100%;
	height:auto;
	backface-visibility:hidden;
}

#wrapper a:hover img{
	opacity:0.8;
}

.contents{
	width: 1200px;
	margin: 0 auto 100px auto;
	border:0px solid #000;
}

#rec_btn{
	position:fixed;
	z-index: 99;/*ボタンを最前面に*/
	bottom:20px;
	right: 20px;
	cursor: pointer;
	width: 100px;
	height:100px;
}

#rec_btn img {
    width: 100px;
		height: 100px;
    transition: 1.0s;
    transform: rotateY(0deg );
}

#wrapper a:hover img{
	opacity:1;
}

#rec_btn:hover img {
	transform: rotateY( 360deg );
	opacity:1;
}

/* ---- pc 1200px ---------- */
@media only screen and (max-width:1200px){
.contents{width: 90%;}
}

/* ---- sp 767 ------------- */
@media only screen and (max-width:767px){
#wrapper{margin:70px 0 0 0;}
.contents{margin:0 auto 70px auto;}

#rec_btn{
	bottom:35px;
	right: 20px;
	width: 80px;
	height:80px;
}

#rec_btn img {
    width: 100%;
		height: auto;
}
}

/* ---- sp 480 ------------- */
@media only screen and (max-width:480px){
#wrapper{margin:50px 0 0 0;}
.contents{width: 85%;margin:0 auto 60px auto;}

#rec_btn{
	width: 70px;
	height:70px;
	bottom:40px;
}
}


/*-------------------------------------------------------------------
　pageVisual
-------------------------------------------------------------------*/
.vsWrap{
	flex: 1;
	border:0px solid #171AC0;
}

.vsBox{
	width: 100%;
	height: 620px;
	position: relative;
}

.vsBox::before{
	content: "";
	position: absolute;
	top:0;
	bottom: 0;
	right: 0;
	width: 90%;
	height: 100%;
	background: #054270;
	display: block;
	z-index: -1;
}

.visual{
	position: absolute;
	width: 100%;
	height: 550px;
	top:0;
	left: 0%;
	z-index: 2;
	background-position: center center;
}

.vsTit{
	position: absolute;
	width: 100%;
  top: 45%;
  transform: translateY(-45%) translateX(-0%);
	z-index: 2;
	text-align: center;
}

.vsTit h2{
	font-family: 'Cinzel Decorative', cursive;
	line-height: 1.5;
	font-size: 90px;
	font-weight: bold;
	color: #FFE04D;
	text-shadow: 0 0 15px #3C3C3C,0 0 15px #3C3C3C,
            	 0 0 15px #3C3C3C,0 0 15px #3C3C3C,
            	 0 0 15px #3C3C3C,0 0 15px #3C3C3C;
}

.vsTit h2 span{
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 25px;
	display: block;
}

.pvBg{background-image: url(../images/pv_service.jpg);}

/* ---- pc 1200px ---------- */
@media only screen and (max-width:1200px){
.vsBox{height: 520px;}
.visual{height: 450px;}

.vsTit h2{
	line-height: 1.5;
	font-size: 70px;
}

.vsTit h2 span{font-size: 23px;}
}

/* ---- sp 767 ------------- */
@media only screen and (max-width:767px){
.vsBox{height: 400px;}
.visual{height: 350px;}

.vsTit h2{font-size: 60px;}
.vsTit h2 span{font-size: 20px;}
}

/* ---- sp 480 ------------- */
@media only screen and (max-width:480px){
.vsBox{height: 280px;}
.visual{height: 250px;}

.vsTit{
  top: 50%;
  transform: translateY(-50%) translateX(-0%);
}

.vsTit h2{font-size: 45px;}
.vsTit h2 span{font-size: 18px;}
}


/*-------------------------------------------------------------------
　MAIN TITLE
-------------------------------------------------------------------*/
.mainTit{
	font-family: 'Montserrat Subrayada', sans-serif;
	font-size: 60px;
	font-weight: bold;
	color: #054270;
	margin: 0 auto;
	text-align: center;
	line-height: 1;
}

.subTit{
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 25px;
	font-weight: bold;
	color: #054270;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 50px;
}

.subTit:before, .subTit:after {
  border-top: 1px solid #054270;
  content: "";
  width: 2em; /* 線の長さ */
}

.subTit:before {margin-right: 0.8em; /* 文字の右隣 */}
.subTit:after  {margin-left: 0.8em; /* 文字の左隣 */}

/* ---- tablet ------------- */
@media only screen and (max-width:1024px){
.mainTit{font-size: 50px;}
.subTit{font-size: 20px;}
}

/* ---- sp 767 ------------- */
@media only screen and (max-width:767px){
.mainTit{font-size: 35px;}
.subTit{font-size: 18px;}
}

/* ---- sp 480 ------------- */
@media only screen and (max-width:480px){
.mainTit{font-size: 35px;}
.subTit{font-size: 18px;margin-bottom: 30px;}
}


/*-------------------------------------------------------------------
　service 業務内容
-------------------------------------------------------------------*/
#service_wrap{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	align-items: top;
	border:0px solid red;
}

.serBox{
	width: 32%;
	box-sizing: border-box;
	border:5px solid #054270;
	border-radius: 60px;
	background: #FFF;
}

.serBox:not(:nth-child(3n+3)) {
  margin-right: 2%;
}

.serBox:nth-child(n+4) {
  margin-top: 50px;
}

.serBox img{
	border-radius: 55px 55px 0 0;
}

.serBox h4{
	font-size: 25px;
	text-align: center;
	color: #054270;
	margin: 12px 0;
}

.under{background: linear-gradient(transparent 70%, #FCE88B 70%);}

.serDet{
	padding: 0 20px 30px 30px;
	border:0px solid #000;
}

/* ---- tablet ------------- */
@media only screen and (max-width:1024px){
#service_wrap{
	justify-content: space-between;
}

.serBox{width: 48%;}
.serBox:not(:nth-child(3n)) {margin-right: 0%;}
.serBox:nth-child(n+4) {margin-top: 0px;}
.serBox:nth-child(n+3) {margin-top: 50px;}

.serBox h4{
	font-size: 22px;
	margin: 12px 0;
}
}

/* ---- sp 767 ------------- */
@media only screen and (max-width:767px){
#service_wrap{
	justify-content: space-between;
	flex-direction: column;
}

.serBox{width: 100%;}
.serBox:nth-child(n+3) {margin-top: 0px;}
.serBox:nth-child(n+2) {margin-top: 40px;}
}

/* ---- sp 480 ------------- */
@media only screen and (max-width:480px){
.serBox h4{
	font-size: 20px;
	margin: 12px 0;
}
}


/*-------------------------------------------------------------------
　company 会社概要
-------------------------------------------------------------------*/
.comTB {
	width: 100%;
	border: 1px solid #707070;
	border-collapse: collapse;
	border-spacing: 0;
	margin:0 auto 0;
	box-sizing: border-box;
}

.comTB th {
	width: 240px;
	font-weight: bold;
	color: #FFF;
	padding: 15px 15px 15px 15px;
	border-width: 1px 1px 1px 0px;
	border-style: solid;
	border-color: #707070 #707070 #CCC #707070;
	background-color: #054270;
	text-align: center;
	box-sizing: border-box;
}

.comTB td {
	padding: 15px 30px 15px 30px;
	border-width:1px 0px 1px 0px;
	border-style:solid;
	border-color: #707070;
	background: #FFF;
	text-align:left;
	box-sizing: border-box;
}

ul.comList{
	margin-left: 30px;
	padding: 0;
}

ul.comList li{
	list-style-type: disc;
}

.accessMap {
	position: relative;
	height: 0;
	overflow: hidden;
	padding-top: 45%;
}

.accessMap iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* ---- tablet ------------- */
@media only screen and (max-width:1024px){
.accessMap {
	position: relative;
	height: 0;
	overflow: hidden;
	padding-top: 65%;
}
}

/* ---- sp 767 ------------- */
@media only screen and (max-width:767px){
.comTB {
	border: 0px solid #707070;
	border-top:0px solid #707070;
}

.comTB th {
	display: block;
	width: 100%;
	border-width: 0px 0px 0px 0px;
	padding: 15px 15px 15px 20px;
}

.comTB td {
	display: block;
	padding: 15px 20px 15px 20px;
	border-width:0px 0px 0px 0px;
}

.accessMap {
	position: relative;
	height: 0;
	overflow: hidden;
	padding-top: 100%;
}
}


/*-------------------------------------------------------------------
　recruit 採用情報　
-------------------------------------------------------------------*/
.recBox{
	display: flex;
	justify-content: space-between;
	flex-direction: row-reverse;
}

.recBox:not(:last-child){
	margin-bottom: 100px;
}

.recBox:nth-child(even){
	flex-direction: row;
}

.recPh{width: 485px;}
.recPh img{border-radius: 20px;}

.recDet{
	width: 650px;
	text-align: justify;
	text-justify: inter-ideograph;
}

.recMi{
	font-family: 'Niconne', cursive;
	font-size: 25px;
	color: #054270;
}

.recMi span{
	background: #FFE04D;
	padding: 5px 20px;
	border-radius: 10px;
}

.recDet h4{
	font-size: 30px;
	font-weight: bold;
	color: #054270;
	line-height: 1.5em;
	margin: 10px 0;
}

.environment_wrap{
	display: flex;
	justify-content: space-between;
}

.environmentBox{
	width: 48%;
	background: #FFF;
	border:4px solid #054270;
}

.environmentBox h4{
	font-size: 30px;
	font-weight: bold;
	text-align: center;
	color: #FFF;
	background: repeating-linear-gradient(-45deg,#054270 0%,#054270 25%,#06538C 25%, #06538C 50%);
	background-size:10px 10px;
	padding: 2px 0 7px;
}

.environmentBox p{
	padding: 30px 40px;
}

.typeA{
	display: flex;
	flex-wrap: wrap;
}

.typeA::after {
	content: '';
	width: 100%;
	height: 0px;
	order: -1;
	display: block;
	background: rgba(0,137,167,.7);
}

.typeA .tabLabel {	/* タブ */
	font-size: 30px;
	font-weight: bold;
	margin-right: 25px;
	padding: 5px 25px;
	/*flex: 1;*/
	order: -1;
	border-radius: 0px 0px 0 0;
	color: #054270;
	background: rgba(226,226,226,1);
	transition: .5s ;
	cursor: pointer;
}

.typeA .tabLabel:nth-last-of-type(1){ margin-right: 0; }
.typeA input {		/* ラジオボタン非表示 */
	display: none;
}

.typeA .rec_content {	/* 本文 */
	width: 100%;
	height: 0;
	overflow: hidden;
	opacity: 0;
}

/*アクティブ設定*/
.typeA input:checked + .tabLabel {
	color: #fff;
	background: rgba(5,66,112,1);
}

.typeA input:checked + .tabLabel + .rec_content {
	padding: 40px 0 0;
	height: auto;
	overflow: auto;
	box-shadow: 0 0 0px rgba(0,0,0,.2);
	transition: .5s opacity;
	opacity: 1;
}

.recTB {
	width: 100%;
	border: 0px solid #707070;
	border-collapse: collapse;
	border-spacing: 0;
	margin:0 auto 0;
	box-sizing: border-box;
}

.recTB th {
	width: 240px;
	font-weight: bold;
	color: #054270;
	padding: 15px 15px 15px 15px;
	border-width: 1px 1px 1px 0px;
	border-style: solid dotted solid solid;
	border-color: #707070;
	background-color: #FBF6DE;
	text-align: center;
	box-sizing: border-box;
}

.recTB td {
	padding: 15px 30px 15px 30px;
	border-width:1px 0px 1px 0px;
	border-style:solid;
	border-color: #707070;
	background: #FFF;
	text-align:left;
	box-sizing: border-box;
}

.recLinkBtn{
	margin: 20px 0;
}

.recLinkBtn a{
	padding: 15px 30px;
	background-color: #054270;
	color: #FFF;
	border-radius: 5px;
}

.recLinkBtn a:hover{
	background-color: #054270;
	text-decoration: none;
	color: #FFE04D;
}

/* ---- pc 1200px ---------- */
@media only screen and (max-width:1200px){
.recDet h4{font-size: 26px;}
.recPh{width: 46%;}
.recDet{width: 50%;}
.environmentBox h4{font-size: 26px;}

.typeA .tabLabel {	/* タブ */
	font-size: 26px;
	margin-right: 25px;
	padding: 5px 25px;
}
}

/* ---- tablet ------------- */
@media only screen and (max-width:1024px){
.recBox{flex-direction: column;}
.recBox:nth-child(even){flex-direction: column;}
.recBox:not(:last-child){margin-bottom: 70px;}

.recPh{width: 100%; margin-bottom: 20px;}
.recDet{width: 100%;}
}

/* ---- sp 767 ------------- */
@media only screen and (max-width:767px){
.recBox:not(:last-child){margin-bottom: 50px;}
.environment_wrap{flex-direction: column;}
.environmentBox{width: 100%;}
.environmentBox:not(:last-child){margin-bottom: 50px;}
.environmentBox h4{font-size: 22px;}

.typeA .tabLabel {	/* タブ */
	font-size: 20px;
	margin-right: 15px;
	padding: 10px 15px;
	flex: 1;
	line-height: 1.4;
	text-align: center;
}

.recTB {
	width: 100%;
	border-width: 0 0 1px 0;
	border-style: solid;
	border-color: #707070;
}

.recTB th {
	width: 100%;
	display: block;
	padding: 15px 15px 15px 15px;
	border-width: 1px 0px 0px 0px;
	border-style: solid dotted solid solid;
	border-color: #707070;
}

.recTB td {
	width: 100%;
	display: block;
	padding: 15px 20px 15px 20px;
	border-width:1px 0px 0px 0px;
	border-style:solid;
	border-color: #707070;
	background: #FFF;
}

.recLinkBtn{
	margin: 20px 0;
}

.recLinkBtn a{
	display: block;
	width: 70%;
	padding: 20px 15px;
	margin: 5px 0;
	color: #FFF;
	border-radius: 5px;
	text-align: center;
}
}

/* ---- sp 480 ------------- */
@media only screen and (max-width:480px){
.recMi{font-size: 20px;}
.recMi span{padding: 3px 20px;}
.recDet h4{font-size: 20px;}
.environmentBox h4{font-size: 20px;}
.environmentBox p{padding: 20px 20px;}

.typeA .tabLabel {	/* タブ */
	text-align: left;
}

.recLinkBtn a{
	display: block;
	width: 100%;
}
}


/*-------------------------------------------------------------------
　contact お問い合わせ
-------------------------------------------------------------------*/
.contTx{
	width: 1000px;
	margin: 0 auto;
	text-align: center;
}

.contText_s{
	font-size: 18px;
}

.contMi{
	font-size: 30px;
	font-weight: bold;
	text-align: center;
	color: #054270;
	margin-bottom: 30px;
}

/* ---- pc 1200px ---------- */
@media only screen and (max-width:1200px){
.contTx{
	width: 90%;
	text-align: left;
}

.contMi{font-size: 26px;}
}

/* ---- tablet ------------- */
@media only screen and (max-width:1024px){
}

/* ---- sp 767 ------------- */
@media only screen and (max-width:767px){
.contMi{font-size: 20px;}
}

/* ---- sp 480 ------------- */
@media only screen and (max-width:480px){
}