@charset "utf-8";


/* トップメインイメージ ------------------------ */


#topimg {
	width: 100%;
	height: 620px;
	position: relative;
}


#topimg .slide_box {
	height: 620px;
	background-color: transparent;
	background-repeat: no-repeat;
	background-position: center center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

#topimg #frames {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 200;
}

#topimg #frames #frames_inner {
	position: relative;
    width: 1080px;
    margin: 0 auto;
    text-align: left;
    padding-top: 50px;
}

#topimg #frames #frames_inner .frame_box {
	position:absolute;
}

#frames_inner h2 {
font-size:40px;
font-weight:700;
letter-spacing:0.1em;
color:#fff;
line-height:1.6;
text-shadow:1px 1px 1px #333;
}

#frames_inner p {
font-size:24px;
font-weight:normal;
margin:0 0 0.5em 0;
color:#fff;
text-shadow:1px 1px 1px #333;
}


#topimg p {
margin:0;
}

#topimg img {
vertical-align:bottom;
}

.logoposi {
	text-align:right;
}

@media screen and (max-width: 768px) {
	#topimg {
	height: 200px;
	}
	#topimg .slide_box {
	height: 200px;
	}
	#topimg #frames #frames_inner {
	max-width: 90%;
	height: 140px;
	top: 30px;
	}
	#topimg #frames #frames_inner .frame_box {
	position: absolute;
	top: 0;
	left: 10px;
    right:10px; 
	width:90%;
	margin:0 auto;
	}
	#topimg #frames #frames_inner .frame_box img{
	width:100%;
	}
	#frames_inner h2 {
	font-size:18px;
	font-weight:700;
	margin-top:15px;
	}
	#frames_inner p {
	font-size:14px;
    line-height: 1.8;
    padding-top: 6px;
    text-align: left;
	}
}

.flexslider {
  margin: 0 0 0;
  border: 0px solid #000;
  position: relative;
  zoom: 1;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
  -webkit-box-shadow: "" 0 0 0 transparent;
  -moz-box-shadow: "" 0 0 0 transparent;
  -o-box-shadow: "" 0 0 0 transparent;
  box-shadow: "" 0 0 0 transparent;
}




/* 一段目：ご挨拶
----------------------------------------------------- */
.index01 {
}

.index01box {
overflow:hidden;
width:960px;
margin: 0 auto;
padding:5em 0;
}

.index01box h3 {
font-size:24px;
margin:0 0 2em 0;
}

.index01box p {
text-align:left;
}

.index01box img {
float:left;
margin:0.5em 2em 1em 0;
vertical-align:bottom;
}

p.name {
font-size:18px;
font-weight:700;
text-align:right;
}

.name span {
font-size:24px;
}


	
@media screen and (max-width: 768px) {
	.index01 {
	}
	.index01box {
	width:90%;
	padding:3em 0;
	}
	.index01box h3 {
	font-size:18px;
	line-height:1.6;
	margin:0 0 1em 0;
	text-align:left;
	}
	.index01box img {
	float:none;
	display:block;
	margin:0 auto 1em auto;
	}
	p.name {
	font-size:16px;
	}
	.name span {
	font-size:20px;
	}
}



/* 二段目：会社概要
----------------------------------------------------- */
.index02 {
background-color:#F8F6F1;
}

.index02box {
width:800px;
margin: 0 auto;
padding:5em 0;
}

.index02box h3 {
font-size:36px;
font-weight:normal;
letter-spacing:0.2em;
margin:0 0 1.5em 0;
}

.index02box table {
width:100%;
margin:0 0 1em 0;
}

.index02box th {
width:26%;
text-align:left;
padding:0.5em 1.5em;
border-bottom:1px dotted #444;
}

.index02box td {
width:74%;
text-align:left;
padding:0.5em 1.5em;
border-bottom:1px dotted #444;
}

.index02box a {
color:#333;
}

.index02box span a {
color:#FFF;
font-size:14px;
text-decoration:none;
padding:0.2em 1em;
margin:0 0 0 1em;
background-color:#00a1e9;
}

.index02box span a:hover {
background-color:#666;
}


@media screen and (max-width: 768px) {
	.index02box {
	width:90%;
	padding:3em 0;
	}
	.index02box h3 {
	font-size:26px;
	margin:0 0 0.5em 0;
	}
	.index02box th {
	width:100%;
	display:block;
	padding:0.5em 0 0 0;
	border:none;
	}
	.index02box td {
	width:100%;
	display:block;
	padding:0 0 1em 0;
	}
	.index02box span a {
	width:80px;
	display:block;
	margin:0;
	padding:0;
	text-align:center;
	}
}


/* 三段目：人材紹介事業部
 --------------------------------------------- */

.index03 {
background-image:url(../images/index03bg.jpg);
background-size:cover;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center bottom;
}

.index03 h3 {
font-size:44px;
line-height:1.5;
padding:2em 0 1em 0;
}

.index03 p {
font-size:18px;
}

.index03box {
overflow:hidden;
width:1080px;
margin:0 auto ;
padding:2em 0 4em 0;
}

.index03box section {
width:32%;
float:left;
padding:2em 1em 0 1em;
margin:0 2% 0 0;
border:1px solid #bbb;
background: rgba(255,255,255,0.7);
}

.index03box section:nth-of-type(3n) {
margin:0 ;
}

.index03box dl {
overflow:hidden;
}

.index03box dt {
font-size:24px;
font-weight:700;
line-height:1.5;
color:#00a1e9;
height:90px;
display:inline-block;
vertical-align:middle;
}

.index03box section:not(:nth-of-type(3n)) dt {
padding-top:.8em;
}

.index03box dd {
font-size:15px;
line-height:1.8;
text-align:left;
height:280px;
}


@media screen and (max-width: 768px) {
	.index03 h3 {
	font-size:26px;
	margin:0 1em;
	}
	.index03 p {
	margin:0 1em;
	font-size:16px;
	text-align:left;
	}
	.index03box {
	width:90%;
	margin: 0 auto;
	}
	.index03box section {
	width:100%;
	float:none;
	margin:0 0 1em 0;
	}
	.index03box dd {
	height:auto;
	padding:0 0 2em 0;
	}
}


/* 四段目：取扱業種・職種
 --------------------------------------------- */

.index04 {
}

.index04box {
width:1080px;
padding:5em 0;
margin:0 auto;
overflow:hidden;
}

.index04 h3 {
font-size:32px;
line-height:1.5;
margin:0 0 2em 0;
}

.index04box_l {
width:48%;
float:left;
margin:0 2% 0 0;
text-align:left;
}

.index04box_r {
width:48%;
float:right;
margin:0 0 0 2%;
text-align:left;
}

.index04box h4 {
font-size:22px;
margin:0 0 1.5em 0;
text-align:center;
color:#D99E38;
border:2px solid #D99E38;
}

@media screen and (max-width: 768px) {
	.index04box {
	width:90%;
	margin: 0 auto;
	padding:5em 0 2em 0;
	}
	.index04 h3 {
	font-size:24px;
	margin:0 0 2em 0;
	}
	.index04box_l {
	width:100%;
	float:none;
	margin:0 0 4em 0;
	}
	.index04box_r {
	width:100%;
	float:none;
	margin: 1em 0;
	}
	.index04box h4 {
	font-size:18px;
	}
}



/* 五段目：コンテンツ事業部
 --------------------------------------------- */

.index05 {
background-image:url(../images/wf_6998.JPG);
background-size:cover;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right bottom;
}

.index05 h3 {
font-size:48px;
line-height:1.5;
padding:2em 0 0.3em 0;
}

.index05 h4 {
font-size:26px;
font-weight:normal;
color:#00a1e9;
padding:0.4em 0 0 0;
margin:0 0 2em 0;
border-top:1px solid #444;
display:inline-block;
}

.index05box {
width:1080px;
margin:0 auto;
padding:0 0 4em 0;
overflow:hidden;
}

.index05box dl {
overflow:hidden;
}

.index05box dt {
width:20%;
float:right;
}

.index05box dd {
width:76%;
float:left;
text-align:left;
font-weight:700;
}


.index05box section {
width:32%;
float:left;
padding:2em 0;
margin:0 2% 0 0;
}

.index05box section:nth-of-type(3n) {
margin:0 ;
}

@media screen and (max-width: 768px) {
	.index05 h3 {
	font-size:26px;
	margin:0 1em;
	}
	.index05 h4 {
	font-size:16px;
	}
	.index05box {
	width:90%;
	margin: 0 auto;
	}
	.index05box dt {
	float:none;
	width:100%;
	margin:0 0 1em 0;
	}
	.index05box dt img {
	width:200px;
	}
	.index05box dd {
	float:none;
	width:100%;
	}
	.index05box section {
	width:100%;
	padding:0 0 1em 0;
	}
}

.index05box section h5 {
font-size:18px;
}

.index05box section h5.fw01 {
padding:40px 0 0 0;
background-image:url(../images/img_profile.png);
background-repeat:no-repeat;
background-position:center top;
}

.index05box section h5.fw02 {
padding:40px 0 0 0;
background-image:url(../images/img_tv.png);
background-repeat:no-repeat;
background-position:center top;
}

.index05box section h5.fw03 {
padding:40px 0 0 0;
background-image:url(../images/img_piano.png);
background-repeat:no-repeat;
background-position:center top;
}

.index05box section ul {
text-align:left;
}

.index05box section ul li {
font-size:14px;
}


/* 六段目：お問い合わせ
----------------------------------------------------- */
.index06 {
}

.index06box {
width:940px;
margin: 0 auto;
padding:3em 0;
}

.index06 h3 {
font-size:40px;
font-weight:normal;
letter-spacing:0.2em;
margin:0 0 1.5em 0;
}

.index06box table {
width:100%;
margin:0 0 2em 0;
border-collapse: separate;
border-spacing: 4px;
}

.index06box th {
width:30%;
text-align:left;
padding:1em 1.5em;
border:1px solid #CCC;
background-color:#F2F2F2;
}

.index06box th span {
display:block;
font-size:14px;
font-weight:normal;
padding:0 0.5em;
float:right;
color:#FFF;
background-color:#00a1e9;
}

.index06box td {
width:70%;
text-align:left;
padding:1em 1.5em;
border-bottom:1px dotted #444;
border:1px solid #CCC;
}

.index06box td input {
width:60%;
}

.index06box td#checkbox input {
width:auto;
}

.index06box td textarea {
width:100%;
height:200px;
}

.formbt input {
width:300px;
height:60px;
}

.index06.topcontact .index06box {
padding: 5em 0;
}

.index06box .btn-contact a {
display: inline-block;
color: #fff;
background-color: #00a1e9;
font-weight: bold;
padding: 10px 20px;
text-decoration: none;
border: 2px solid #555;
border-radius: 5px;
}

.index06box .btn-contact a:hover {
background-color: #666;
}

.index06box .btn-contact a svg {
vertical-align: middle;
margin-bottom: 3px;
}

form.index06box {
padding: 30px 0 0;
}

form.index06box #checkbox input {
margin-right: 5px;
}

form.index06box button:not(.btn-back) {
color: #fff;
background-color: #00a1e9;
}

form.index06box button:hover {
opacity: 0.8;
}


@media screen and (max-width: 768px) {
	.index06box {
	width:90%;
	margin: 0 auto;
	padding:3em 0;
	}
	.index06 h3 {
	font-size:26px;
	margin:0 0 1em 0;
	}
	.index06 p {
	text-align:left;
	}
	.index06box th {
	width:100%;
	float:none;
	display:block;
	border:none;
	}
	.index06box td {
	width:100%;
	float:none;
	display:block;
	padding:1em 0;
	border:none;
	}
	.index06box td input {
	width:100%;
	}
	.index06box td#checkbox input {
	width:auto;
	}
	.formbt input {
	width:100%;
	}
	.index06.topcontact .index06box {
	padding: 3em 0;
	}
	form.index06box {
	width: 100%;
	padding: 20px 0 0;
	}
	form.index06box .formbt {
    text-align: center;
	}
	form.index06box button.btn-submit {
	margin-top: 20px;
	}
}

/* ----------------------------------------------------------
/*
/* モーダル
/*
------------------------------------------------------------- */

.modal-overlay {
    z-index:200; /*デモではheader,footerをz-index:1にしたので それより上げています*/
    display:none; /*jsでフェードインされるまでdisplay:none*/
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100vh; /*100vhでビューポートの高さいっぱいになります*/
    background-color:rgba(0,0,0,.7) /*これは好きな色・透明度で*/
	}

a.modal-open:hover {cursor:pointer} /*カーソルをポインタに*/

.modal-content {
    position:fixed;
    display:none; /*jsでフェードインされるまでdisplay:none*/
    z-index:250; /*オーバーレイより上に*/
    margin:10px;
    padding:40px 15px 30px 15px;
    border-radius:6px;
    background:#fff
	}

.modal-content img {width:auto;max-height:75vh}
.modal-content h3 {font-size:120%; margin-bottom:1em;}
.modal-content p {max-width:565px; text-align:left}

a.modal-close { /*クローズボタンは何でも好きなスタイルでOK*/
    position:absolute;
    top:6px;
    right:10px;
    color:#b29c33;
    font-size:35px;
    line-height:1;
    font-weight:bold;
    text-decoration:none
	}
a.modal-close:hover {cursor:pointer} /*カーソルをポインタに*/