/*-------------------------

	BASE                    

--------------------------*/
/*rgba(233,180,74,1.00)rgba(30,80,142,1.00)rgba(207,93,56,1.00)*/

body {
	letter-spacing: 0.2em;
	color: #333333;
	font: 85% YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
	border-top:3px solid #ddd; 
}

#content .follow {position: fixed;/*スクロールで付加されるclass*/ top: 0;}
.clear {clear: both;}

/*-font----------*/
strong {color: rgba(30,80,142,1.00);}
i{letter-spacing:0.6em}
a{text-decoration:none;}
.form_must{color:rgba(233,180,74,1.00)}

/*-MODAL----------*/
.bg_onetime_popup {
    position: fixed;
    top: 0px; left: 0px;
    z-index: 9999;
    width: 100vw; height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: 0.5s;
}
.bg_onetime_popup.js_active {
    opacity: 1;
    visibility: visible;
}
.onetime_popup {
    position: absolute;
    top: 50%; left: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: 90%; max-width: 500px;
    background-color: #fff;
    cursor: pointer;
    border-radius: 10px;
}
.onetime_popup_title {
    position: relative;
    padding: 30px 90px; margin: 0px;
    background-color: #3388dd;
    color: #fff;
    font-size: 1.5em; font-weight: bold;
    text-align: center; 
    line-height: 1.5;
    border-radius: 10px 10px 0 0;
    
}
.onetime_popup_title span{
    font-size:13px; font-weight: normal;
}
.onetime_popup_title::before,
.onetime_popup_title::after {
    position: absolute;
    top: 50%; right: 30px;
    transform: translateY(-50%);
    width: 30px; height: 4px;
    background-color: #fff;
    content: "";
}
.onetime_popup_title::before {
    transform: rotate(45deg);
}
.onetime_popup_title::after {
    transform: rotate(-45deg);
}
.onetime_popup_content {
    padding: 30px 30px;
    text-align: center;
}


/*-------------------------

	HEADER                    

--------------------------*/
header {
	margin-right: auto;margin-left: auto; margin-top:-3px;
	padding-right:5%;padding-left:5%;
    position:relative;
	display: flex; justify-content:space-between; align-items: center;
}

#logo  {
	width: 200px;
	display: block;
}
/*#selectLang_top{position: absolute;top:90px;right:5%;z-index: 99;}*/

/* -767 */
@media screen and (max-width:767px){
header{
	height:70px;
}
#logo {
	height:70px; width: 160px;margin:35px 0 0;
}

}

/*-------------------------

	SLIDER                    

--------------------------*/
.slider-pro{
	position:relative;
	margin:0 auto;
	overflow: hidden;
	z-index: 1;
}
.slider-pro:after{
	content: "";
	display: block;
	clear: both;
}
.slider-pro p{
	padding:1.1em 1.4em;
	border-radius: 6px;
	line-height: 180%!important;
}
.slider-pro .t-effect01{
	text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
	color:white;
}
.slider-pro .t-effect02{
	text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
	color:black;
}

/* -767 */
@media screen and (max-width:767px){
.slider-pro h2,.slider-pro p,.slider-pro{
	display:none;
}
}

/*-------------------------

	TOP PAGE                    

--------------------------*/
#mainTop {
	margin:0px auto;
}

/*-紹介----------*/
#intro {
	padding: 5% 0; margin:0 auto 2em;
}
#intro_m{
	display: flex; justify-content: space-between;
}
#intro_l{
	width:98%;
	height:auto;
	background: url(img_d/slide_top02.jpg) no-repeat;
	background-size: cover; background-position: center;
	position:relative;
}
#intro_r {
	width:98%;
	height:auto;
	background: url(img_d/slide_top01.jpg) no-repeat;
	background-size: auto 100% ; background-position: left;
}
#intro h2 {
	text-align: center;
	font-size:130%; font-weight:normal;
	color: #333;
	margin-bottom:3%; padding-bottom:6px;
	border-bottom: 2px solid #ccc;
}
#intro h2 span{
	font:120% 'Roboto', sans-serif;
	border-bottom: 3px solid rgba(30,80,142,1.00); border-radius: 1px;
	padding-bottom:6px;
}
#intro h3{
	color:#fff;
	text-shadow: 0px 0px 15px #000;
	font-size:120%;
	letter-spacing:0.2em;
	padding:90px 20px;/*s用に修正する*/
	text-align: center;
}

#intro h4{
	color:#fff;
	font-size:100%;
	font-weight:bold;
	padding:15px 15px 7px 20px;/*s用に修正する*/
	background:rgba(50,50,50,.8) ;
	width: 100%;
}
#intro p {
	color:#fff;
	line-height:150%;
	padding:0px 15px 10px 20px;/*s用に修正する*/
	background:rgba(50,50,50,.8) ;
	width: 100%;
}
#intro p.syosai{padding-bottom:15px;text-align:right}
#intro p.syosai a{color:#fff;text-align:right}
#intro p.syosai a:hover{text-decoration:underline}

#intro a{
	display: block;
	transition: 0.5s;
}
#intro a:hover{
	opacity: 0.8;
}

/* -767 */
@media screen and (max-width:767px){
#intro_m{
	display: block;
}
#intro h3{
	padding:60px 20px;/*s用に修正する*/
}
#intro h4{
	margin-right:0;
	padding:10px 15px 5px 20px;/*s用に修正する*/
	background-size:100% auto;
	width:100%;
}
#intro p {
	margin-right:0;
	padding:0px 15px 5px 20px;/*s用に修正する*/
	width:100%;
}
#intro_l{
	width:100%;
	margin-right:0;
	margin-bottom:20px;
	height:auto;
	background-size: 120% auto;
}
#intro_r {
	width:100%;
	height:auto;
	background-size: 120% auto;
}
}

/*-ニュース----------*/
#news {
	padding:40px 0; margin:0 auto;
}
#news {
  background-color: #eee;
}
#recruit_news {
	padding:40px 0; margin:0 auto;
    max-width: 1000px;
}
 #news section,#recruit_news section {
	border: 1px solid #eee; border-radius: 6px;
	box-shadow: 0px 0px 5px 0px rgba(200,200,200,.5);
    position:relative;
    color:#666;
    background-color: #fff;
	padding:1.5em;
	display: flex;
	margin:5%;
}
#recruit_news section{
    background-color: #FAFAFA;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='5' height='5' viewBox='0 0 100 100'%3E%3Crect x='0' y='0' width='50' height='50' fill-opacity='0.5' fill='%23FFFFFF'/%3E%3C/svg%3E");
}
#news .newsCampaign,#recruit_news .newsCampaign{
    border-left:2px solid #3F90F2;
    top:0px;
    position:relative;
    margin:10px 0;
    padding:0 0 0 20px;
}
#news h2,#recruit_news h2 {
	min-width: 100px;
	color:rgba(30,80,142,1.00);font-family:'Roboto', sans-serif; font-size:150%; font-weight:normal;
}
#news h3,#recruit_news h3{
    font-size:1em; font-weight: normal;
	border-left: 1px dotted #ccc;
	padding:0 0 0 1em;
}
#news h3 span{
	color:#999; font-size:.8rem;
}
#news #newsText,#recruit_news #newsText {
	line-height: 1.2em;
	padding-right:2%
}
#news #newsText span,#recruit_news #newsText span  {
	font-size: x-small;
	color: #888;
}
#news #newsText a,#recruit_news #newsText a {
	color: #0B8FE8;
}
#news #newsText a:hover,#recruit_news #newsText a:hover {
	color: #333333;
}

/* -767 */
@media screen and (max-width:767px){
#news,#recruit_news{padding:20px 0}
#news section,#recruit_news section{display: block}
#news .newsCampaign,#recruit_news .newsCampaign{padding:0 0 0 15px;}
}

/*-------------------------

	FOOTER                    

--------------------------*/
footer {
	border-top:2px solid #eee;
	background: #fff;
}
footer  div {
	margin:0 5%;
	padding:1.6em 0;
}

footer ul {
	list-style-type: none;
	margin:0 0 1.2em;
}
footer li {
	margin: 10px 0;
	font-size: 80%;
	color: #999999;
}
footer li span {
	font-weight: bold;
	color: #333333;
	text-transform: uppercase;
}
footer li a {
	text-decoration: none;
	color: #555555;
}
footer  li a:hover {
	background-color: #FFFFFF;
}

#copyright {
	text-align: right; text-decoration: none;
	line-height: 130%;
}
#copyright #copy {
	font-size: x-small; 
}
h1{
	font-size:1em;
	margin:0 0 0.5em 0;
	line-height: 180%;
	text-align: center;
	display: inline-block;
}
h1 img{
	width:40px;
	display: inline;
}

#up {
	position: fixed;
	bottom: 5%; right: 5%;
}
#up a{
	width: 50px; height: 50px;
	border-radius: 50%;
	display: block;
 	background:rgba(207,93,56,1.00);
 	color:#fff;
 	padding:1em;
	filter:alpha(opacity=90);
 	opacity: 0.9;
 	transition: all .3s ease;
}
#up a:hover {
	filter:alpha(opacity=100);
	-moz-opacity: 1;
	opacity: 1;
}
.up_arrow {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin: 5px;
  border-top: 3px solid #fff;
  border-left: 3px solid #fff;
  transform: rotate(45deg);
}

/* -767 */
@media screen and (max-width:767px){
footer {padding:20px 2%;}
footer ul {float: none;}
footer li {font-size: x-small;}
#up {bottom: 5%;right: 5%;}
}

/*-------------------------

	SUB PAGE COMMON                   

--------------------------*/
.coverImg{
	background-size: cover; background-position: center center;
	height:352px;
	position: relative;
}
.coverImg::before{
	background-color: rgba(0,0,0,0.2);
	position: absolute; top: 0; right: 0; bottom: 0; left: 0;
	content: ' ';
}
#coverImg_com{
	background-image: url(img_d/h2_company.jpg);
}
#coverImg_rec{
	background-image: url(img_d/h2_recruit.jpg);
}
#coverImg_ser{
	background-image: url(img_d/h2_service.jpg);
}
#coverImg_con{
	background-image: url(img_d/h2_contact.jpg);
}
.coverImg h2{
	color: #fff; font-size: 2em; letter-spacing: .2em; text-shadow: 0px 0px 5px #666;
	position: absolute; left: 50%; top: 50%;
	transform: translate(-50%,-50%);
}
/* -767 */
@media screen and (max-width:767px){
.coverImg{height:200px;}
.coverImg h2{font-size:1.8em;}
}

#main {
	margin:0px auto;padding:2%;
}

/*///////////////////////
 box common             
 //////////////////////*/
/*リンク*/
.box01 a, .box01_b a, .box02 a, .box03 a {
	color: rgba(207,93,56,1.00);
	border-bottom: 1px dashed rgba(207,93,56,1.00);
}
.box01 a:hover, .box01_b a:hover, .box02 a:hover, .box03 a:hover {
	color: rgba(207,93,56,1.00);
	border-bottom: 1px solid;
}

/*装飾した見出し*/
.midashi01 {
  border-bottom: solid 3px #ccc;
  position: relative;
  padding:1em 0 0 0; margin:0 0 .5em 0;
  font-weight: bold;
}
.midashi01 span{
 padding:0 1em 0 .5em; color:rgba(30,80,142,1.00); 
}

.midashi01:after {
  position: absolute;
  content: " ";
  display: block;
  border-bottom: solid 3px rgba(30,80,142,1.00);
  bottom: -3px;
  width: 2em;
}

/*///////////////////////
 box01-02              .5
 //////////////////////*/
.box01,.box02 {
	/*padding: 0px 36px 36px;*/ margin: 5em auto 8em;
	display: flex; justify-content:flex-start; align-items:flex-start;
}
.box01_rightCnt,.box02_rightCnt{
	margin:1.5em 0;width:100%;
}

/*h3*/
.box01 h3, .box02 h3, .box01_b h3{
	min-width: 160px;
	text-align: center;
	color:#fff;
	font-size: large;
	padding:2.5em 1em; margin:0 3em 0 0;
	border-radius: 6px;
	line-height: 120%;
}
.box01 h3{
	background:rgba(30,80,142,1.00);
}
.box02 h3{
	background:#8C8E94;
}
.box01 h3 span,.box02 h3 span,.box02_b h3 span{
	font-family: 'Roboto', sans-serif;
	font-size:x-small;
	font-weight: normal;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}
/*h4*/
.box01_rightCnt h4{
	margin-bottom: 1em;
	font-size: 130%;
	line-height: 160%;
}

.box02_rightCnt h4{
	margin-bottom: 10px;
	color: rgba(30,80,142,1.00);
	font-size: 120%;
	font-weight: normal;
	letter-spacing: 0.3em;
	border: 1px solid rgba(30,80,142,1.00); border-radius: 3px;
	padding: 3px 10px;
}
/*p*/
.box01 p,.box02 p{padding-bottom:5px;}
/*dl*/
.box02 dl{border-bottom:#BFC1C4 1px solid;}
.box02 dt,dd{
	padding-top: 7px;
	padding-bottom: 7px;
	line-height: 160%;
}
.box02 dt{
	float:left;clear:both;
	width:20%;
	padding-left:1%;
	border-top:#BFC1C4 1px solid;
}
.box02 dd{
	 margin-left:20%;padding-right:1%;padding-left:1%;
	 border-top:#BFC1C4 1px solid;
}
.box02 dt.bn,.box02 dd.bn{border-top:none}
.box02 dd img {
	height: auto; width: 50%;
}
.box02_rightCnt dl{margin-bottom:40px}

/*///////////////////////
 box03              
 //////////////////////*/
 .box03 {
	margin:4em auto;
	padding: 0 36px 36px;
}
 /*h3*/
.box03 h3{
	text-align: left;
	color:#666;
	line-height: 200%;
	font-size: large;
	font-weight: bold;
}
.box03 h3 {
  position: relative;
  padding:0 1em .2em;
  border-bottom: 3px solid #ccc;
  margin:0 0 1em 0;
}
.box03 h3::after {
  position: absolute;
  bottom: -3px;
  left: 0;
  z-index: 2;
  content: '';
  width: 30%;
  height: 3px;
  background-color: rgba(30,80,142,1.00);
}
.box03 h3 span{
	letter-spacing: 0.1em;
	text-transform: uppercase;
	border-bottom:3px solid #888B93;
	color: #938c88;
	font-family: 'Roboto', sans-serif;
	font-style: italic;
	font-weight: bold;
}
/*h4*/
.box03 h4{
	margin-bottom: 0.5em;
	font-size: 130%;
	line-height: 160%;
}

/*フォーム*/
table.formTable{
	width:100%;
	margin:0 auto;
	border-collapse:collapse;
}
table.formTable td,table.formTable th{
	border:1px solid #ccc;
	padding:1em;
}
table.formTable th{
	width:30%;
	font-weight:normal;
	background:#eee;
	text-align:left;
}
.submitBtn{
	padding:1em 0; margin:0 0 2em 0;
	text-align: center;
}
form input,form textarea,form select{
 border:2px solid #ccc; border-radius: 3px;
 padding:3px;
}
form input:focus,form textarea:focus {
border:2px solid rgba(44,80,138,1.00);
outline:0;
}
form input[type="submit"], form input[type="reset"], form input[type="button"] {
 padding:5px 10px;
 font-size:1rem;
 background:#ccc;
 border:1px solid #999;
}
form input[type="submit"]:hover, form input[type="reset"]:hover, form input[type="button"]:hover{
 background:#666;
 color:#fff;
 transition: 0.3s;
}
/*　簡易版レスポンシブ用CSS（必要最低限のみとしています。ブレークポイントも含め自由に設定下さい）　*/
@media screen and (max-width:768px) {

table.formTable th, table.formTable td {
	width:auto;
	display:block;
}
table.formTable th {
	margin-top:5px;
	border-bottom:0;
}
form input[type="text"], form textarea {
	width:100%;
	padding:5px;
	display:block;
}
form input[type="submit"], form input[type="reset"], form input[type="button"] {
	display:block;
	width:100%;
	height:40px;
}
}
/*フォームの規約*/
.box03 #kiyaku {
	height: 200px;
	overflow: scroll;
	background-color: #eeeeee;
	border: 1px dotted #CCCCCC;
	padding: 10px;
}
/*p*/
.box03 p{
	padding-bottom:5px;
	line-height: 160%;
	margin-top: 10px;
}
/*ul*/
.box03 li {
	margin-top: 3px;
	margin-bottom: 3px;
	line-height: 160%;
	list-style-type: none;
}
.box03_Cnt li{
    padding:3px;
    border-bottom:1px dotted #aaa;
    font-size:1.1em;
}
.box03_Cnt i{
    font-size:0.8em;
    color:rgba(30,80,142,1.00);
}
/*dl*/
.box03_Cnt dt{
    margin:1em 0 0 0;
    padding:3px;
    border-bottom:1px dotted #aaa;
    font-size:1.1em;
}
.box03_Cnt dd{
    margin:0.3em 0 1em 1em;
    padding:0.5em;
    background:#efefef;
}
/*制作例*/
.box03 .ex {
	padding: 1em; margin:2em 0 0;
	border: 1px solid #989BA3; border-radius: 6px;
}
.box03 .ex h4 {
	font-size: 110%;
}
.box03 .ex h5 {
	font-weight: normal;
	border-top: 1px dotted #A4A7AE;
	font-size: 100%;
	padding: .7em 0 0;
	margin-top: .7em;
}
.box03 .ex p{
	margin:0 0 0 1em;
}

/* -767 */
@media screen and (max-width:767px){
.box01,.box01_b,.box02{display: block;}
/*box01-02 h3*/
.box01 h3,.box01_b h3,.box02 h3{padding:1em 0; width: 130px;}
/*box01-02 rightCnt*/
.box01_rightCnt,.box02_rightCnt{margin-bottom: 20px;}
/*box02 dl*/
.box02 dt{float:none;clear:both;width:auto;padding:7px 3px 0px 3px;font-weight:bold;color:#938C88;}
.box02 dd{width:auto;padding:0 3px 7px 3px;margin-left:0%;border-top:none}
.box02 dd img {height: auto;width: 100%;}
}

/*サービス例*/
.box03 h4{margin-bottom: 0.5em; font-size: 120%;line-height: 160%;}


/*お仕事の流れ*/
#workflow{
	margin-top: 3em;
	border-top: 3px dotted #eee;
	padding: 3em 2% 0;
}
#workflow h4 {
	text-align: center;
	padding: 3px;
	font-size: 120%;
	color:#777;
}
#workflow p {
	font-size: 20px;
	padding: 5px;
	text-align: center;
	color: #999;
}
#workflow dl {
	clear: both;
	float: none;
	display: block;
	border-radius: 6px;
	overflow:hidden;
}
#workflow  dl:after {
	content: "";
	display: block;
	clear: both;
}
#workflow dt {
	margin-right: 10px;
	width: 100px;
	clear: both;
	float: left;
	padding:1em;
	text-align: center;
}   
#workflow dd {
	padding: 1em;
	margin-left:130px;
	color: #777777;
	background: #fff;
}
dl.wf01  {
	border:2px solid #8C8E94;background: #8C8E94;
}
dl.wf02 {
	border:2px solid rgba(233,180,74,1.00);background: rgba(233,180,74,1.00);
}
.wf01 dt{
	color: #fff;
	font-weight: bold;
	text-align: center;
	vertical-align: middle;
}
.wf02 dt{
	font-weight: bold;
	color: #fff;
	vertical-align: middle;
}
.wf01 span {
	font-weight: bold;
}
.wf02 span {
	font-weight: bold;;
}


/*//////////-767//////////*/
@media screen and (max-width:767px){

img{max-width: 100%;height: auto;width /***/:auto;}
.s_none{display:none;}

#content{overflow:hidden;}
}

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

/*none*/
.p_none{display:none;}
footer li br{display:none}
}

/*//////////-889//////////メニューボタン用*/
@media screen and (max-width:889px){

/*メニューボタン*/
#menubtn{
padding:9px 12px; margin-bottom:2em;
border:solid 1px #ccc;
border-radius:3px;
background-color:#fff;
position:absolute;
top:16px; right:15px;
cursor:pointer;
line-height: 100%;
}
#menubtn span{display:inline-block;}
#menubtn:hover{background-color:#eee;}
#menubtn:focus{outline:none;}
#menubtn i{
	color:#666;
	font-size:18px;
	letter-spacing:0em;
}

nav{
	display:none;
	z-index: 3;
	position:absolute;
	left:0;top:70px;
	width:100%;
}
nav ul{
	margin:0;padding:0;
	list-style:none;
	background-color: rgba( 48, 44, 43, 0.9 );
}
nav li a{
	display:block;
	padding:.8em 2em;
	border-bottom:#aaa 1px solid;
	color:#fff;
	font-size:1em;
	text-decoration:none !important;
}
nav li a:hover{
	color:#fff;
	background-color: rgba( 120, 120, 120, 0.9 );
}
nav ul:after{
	content:"";display:block;
	clear:both;
}
}

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

/*none*/
#menubtn,.p_none{display:none;}

/*メインナビ*/
nav{
	border-left:1px solid #FFFFFF; border-right:1px solid #FFFFFF;
	margin-left:auto;
}
nav ul{
	display: flex;
}
nav li {
	width:7rem;
}
nav li a i{display: none!important;}
nav li a {
	display:block;
	color:#333;
	padding:2em 0;
	text-align: center; text-decoration:none;
	border-top: 3px solid #999;
	border-left:2px solid #FFFFFF;
	border-right:2px solid #FFFFFF;
}
nav li a:hover{
	color:#666;
	text-decoration:none;
	border-top:3px solid rgba(30,80,142,1.00);/*rgba(233,180,74,1.00)rgba(30,80,142,1.00)rgba(207,93,56,1.00)*/
}
nav li a#act {
	height: 65px;
	display:block;
	border-top:3px solid rgba(30,80,142,1.00);
}

/*box3*/
.box03_Cnt {
	width: 90%;
	margin:0 0 0 1.5em;
}

}

/*//////////-999//////////*/
@media screen and (max-width:999px) {

#intro_m,.box01,.box01_b,.box02,.box03{
width:auto;
padding-left:5%;padding-right:5%;
}

footer div{
width:auto;
padding-left:2%;padding-right:2%;
}

#intro h4,#intro p{margin-right:0;}

}

/*//////////-500//////////*/
@media screen and (max-width:500px){

h1{with:150px;height:auto}

.onetime_popup{
    width: 95%
}
.onetime_popup_title {
    padding: 15px 15px;
    font-size: 1em;
}
.onetime_popup_title span{
    font-size:0.7em;
}
.onetime_popup_title::before,
.onetime_popup_title::after {
    right: 20px;
    width: 15px;
    height: 3px;
    background-color: #fff;
    content: "";
}
.onetime_popup_content {
    padding: 15px 15px;
    text-align: center;
}

}
/*//////////-340//////////*/
@media screen and (max-width:340px){

.onetime_popup{
    width: 95%
}
.onetime_popup_title {
    padding: 10px 10px;
    font-size: 1em;
}
.onetime_popup_title span{
    font-size:0.7em;
}
.onetime_popup_title::before,
.onetime_popup_title::after {
    right: 20px;
    width: 15px;
    height: 3px;
    background-color: #fff;
    content: "";
}

.onetime_popup_content {
    padding: 10px 10px;
    text-align: center;
}

}

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

#intro_m,#news,.box01,.box01_b,.box02,.box03,#subNavi{
  padding-inline: calc((100vw - 1000px) / 2);
}

}
