@charset "utf-8";
/* CSS Document */

/*-------------------------------------
top
-------------------------------------*/
.topvisual { width: 100%; position: relative; overflow: hidden; color:}
.topvisual .arrow { position: absolute; z-index: 1; bottom: 15px; left: 50%; }
.topvisual .arrow a { display: block; padding: 0px 20px 20px; margin-left: -42px; border: 2px solid rgb(255,255,255); }
.topvisual .arrow a:hover { background: rgba(255,255,255,.3); }
.topvisual .arrow a:after{ display: block; width: 30px; height: 30px; border-bottom: 4px solid rgb(255,255,255); border-left: 4px solid rgb(255,255,255); content: ""; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); }
.topvisual .bxslider li {
    width: 100%;
/*    height: 100%;*/
    padding: 6vh 0;
    color: rgb(255,255,255);
    font-size: 6em;
    font-family: "Oswald";
    font-weight: 400;
    line-height: 1.2;
    text-shadow: 0px 0px 10px #000;
}
.topvisual .bxslider small { display: block; font-size: 24px; margin-top: 20px; }
.topvisual .bxslider .visual1 { background: url(../images/cover_seo.jpg) no-repeat center top; background-size: cover; }
.topvisual .bxslider .visual2 { background: url(../images/cover_stream.jpg) no-repeat center top; background-size: cover; }
.topvisual .bxslider .visual3 { background: url(../images/cover_music.jpg) no-repeat center top; background-size: cover; }
.topvisual .bxslider .visual4 { background: url(../images/cover_logistics.jpg) no-repeat center top; background-size: cover; }
.topvisual .bxslider .visual5 { background: url(../images/cover_starting.jpg) no-repeat center top; background-size: cover; }
.topvisual .bxslider .visual6 { background: url(../images/cover_offshore.jpg) no-repeat center top; background-size: cover; }

.toplist { background-color: rgb(255,255,255); padding: 30px; position: relative; overflow: hidden; }
.toplist .block { width: 33.3333%; float: left; position: relative; overflow: hidden; }
.toplist .block a { width: 100%; height: 100%; display: block; }
.toplist .block h2 { width: 100%; padding: 20px 30px; text-align: left; font-size: 18px; color: rgb(255,255,255); background: rgba(0,0,0,.7); position: absolute; top: 0; left: 0; }
.toplist .block .caption { width: 100%; height: 100%; background: rgba(0,0,0,.6); position: absolute; top: -100%; left: 0; transition: .3s; opacity: 1; }
.toplist .block:hover .caption { top: 0; left: 0; }
.toplist .block h3 { padding: 20px 30px; text-align: left; font-size: 18px; color: rgb(0,0,0); font-family: Oswald; font-weight: 500; line-height: 1.2; background: rgb(255,255,255); }
.toplist .block p { padding: 15px 30px; text-align: left; color: rgb(255,255,255); }

.topnews { background-color: rgb(0,0,0); padding: 0px 30px 30px; position: relative; overflow: hidden; }
.topnews h2 { font-size: 36px; color: rgb(255,255,255); text-align: left; }
.topnews h2 span { position: absolute; left: 320px; top: 0; font-size: 16px; line-height: 1.2; }
.topnews h2 span a { display: block; padding: 10px 20px; color: rgb(0,0,0); background: rgb(255,255,255); }
.topnews h2 span a:hover { text-decoration: none; color: rgb(255,255,255); background: rgb(180,0,0); }
.topnews .content { margin-left: -2%; }
.topnews .block { width: 23%; margin: 20px 0px 0px 2%; float: left; text-align: left; background: rgb(240,240,240); }
.topnews .block a { display: block; color: rgb(0,0,0); }
.topnews .block a:hover { text-decoration: none; }
.topnews .thum { display: block; position: relative; }
.topnews .thum .type { padding: 10px; position: absolute; left: 0; bottom: 0; color: rgb(255,255,255); background: rgb(180,0,0); font-family: "Oswald"; font-weight: 500; line-height: 1.2; }
.topnews .info { display: block; min-height:126px; padding: 15px; position: relative; }
.topnews .info .date { padding: 10px; position: absolute; left: 0; top: 0; color: rgb(255,255,255); background: rgb(0,0,0); font-family: "Oswald"; font-weight: 500; line-height: 1.2; }
.topnews .info h3 { font-size: 16px; margin-top: 40px; font-weight: 300; }

/*-------------------------------------
pages-cover
-------------------------------------*/
.cover { padding: 160px 0; color: rgb(255,255,255); text-shadow: 0px 0px 10px #000; }
.cover-seo { background: url(../images/cover_seo.jpg) no-repeat center top; background-size: cover; }
.cover-web { background: url(../images/cover_web.jpg) no-repeat center top; background-size: cover; }
.cover-human { background: url(../images/cover_human.jpg) no-repeat center top; background-size: cover; }
.cover-car { background: url(../images/cover_car.jpg) no-repeat center top; background-size: cover; }
.cover-starting { background: url(../images/cover_starting.jpg) no-repeat center top; background-size: cover; }
.cover-offshore { background: url(../images/cover_logistics.jpg) no-repeat center top; background-size: cover; }
.cover-other { background: url(../images/cover_other.jpg) no-repeat center top; background-size: cover; }
.cover-recruit { background: url(../images/cover_recruit.jpg) no-repeat center top; background-size: cover; }
.cover-company { background: url(../images/cover_company.jpg) no-repeat center top; background-size: cover; }
.cover-news { background: url(../images/cover_news.jpg) no-repeat center top; background-size: cover; }
.cover-sitemap { background: url(../images/cover_sitemap.jpg) no-repeat center top; background-size: cover; }
.cover-privacy { background: url(../images/cover_privacy.jpg) no-repeat center top; background-size: cover; }
.cover-contact { background: url(../images/cover_contact.jpg) no-repeat center top; background-size: cover; }

/*-------------------------------------
pages-common
-------------------------------------*/
.inner { width: 90%; padding: 0 5%; }
.headline { display: block; padding-top: 80px; padding-bottom: 80px; }
.headline h2 { display: block; }
.headline h2 span { display: block; margin-top: 15px; }
.headline h3 { color: rgb(200,0,0); margin-top: 20px; }
.headline p { max-width: 800px; margin: 20px auto 0px; }
.content { display: block; }
.media { display: block; }
.media .headline { padding-top: 80px; padding-bottom: 40px; }
.media .headline h2 { color: rgb(255,255,255); }
.media .headline h3 { color: rgb(255,255,255); }
.media .headline p { color: rgb(255,255,255); }
.media .content { padding-bottom: 80px; }
.media .content figure { max-width: 980px; margin: 0px auto; }
.media .content figure img { text-align: center; }
.media1 { background: rgb(200,0,0); }
.media2 { background: rgb(0,0,0); }

/*-------------------------------------
recruit
-------------------------------------*/
.recruit { max-width: 980px; margin: 0px auto; padding-bottom: 80px; }

/*-------------------------------------
news
-------------------------------------*/
.news { max-width: 980px; margin: 0px auto; padding-bottom: 80px; }
.news .content dl { width: 100%; }
.news .content dt { width: 30%; padding: 30px 0; float: left; text-align: left; border-top: 1px dotted rgb(150,150,150); font-family: "Oswald"; font-weight: 500; }
.news .content dd { width: 70%; padding: 30px 0; float: left; text-align: left; border-top: 1px dotted rgb(150,150,150); }

/*-------------------------------------
company
-------------------------------------*/
.company { max-width: 980px; margin: 0px auto; padding-bottom: 80px; }
.company .content dl { width: 100%; }
.company .content dt { width: 30%; padding: 30px 0; float: left; text-align: left; border-top: 1px dotted rgb(150,150,150); }
.company .content dd { width: 70%; padding: 30px 0; float: left; text-align: left; border-top: 1px dotted rgb(150,150,150); }
.company .content dt span { margin-left: 15px; font-size: 14px; color: rgb(200,0,0); }
.company .content dd span { margin-left: 15px; font-size: 14px; color: rgb(150,150,150); }

/*-------------------------------------
contact
-------------------------------------*/
.contact { max-width: 880px; margin: 0px auto; padding-bottom: 80px; }
.contact .content dl { width: 100%; }
.contact .content dt { width: 30%; padding: 30px 0; float: left; text-align: left; border-top: 1px dotted rgb(150,150,150); }
.contact .content dd { width: 70%; padding: 30px 0; float: left; text-align: left; border-top: 1px dotted rgb(150,150,150); }
.contact .content dt span { margin-left: 15px; font-size: 14px; color: rgb(200,0,0); }
.contact .content dd span { margin-left: 15px; font-size: 14px; color: rgb(150,150,150); }
.contact .content input { max-width: 100%; }
.contact .content textarea { max-width: 100%; }
.contact .content .submit { padding: 15px 50px; border: 2px solid rgb(0,0,0); background: rgb(255,255,255); cursor: pointer; transition: all 0.2s ease-in-out 0s; }
.contact .content .submit:hover { color: rgb(255,255,255); border: 2px solid rgb(0,0,0); background: rgb(0,0,0); }

.hearing { margin-left: 0 !important; font-size: 14px; color: rgb(150,150,150); }

/*-------------------------------------
sitemap
-------------------------------------*/
.sitemap { max-width: 980px; margin: 0px auto; padding-bottom: 80px; }
.sitemap .content h3 { margin: 40px 0 10px; padding-top: 40px; border-top: 1px dotted rgb(150,150,150); font-family: "Oswald"; font-weight: 500; }
.sitemap .content h3:first-child { margin-top: 0px; }

/*-------------------------------------
privacy
-------------------------------------*/
.privacy { max-width: 980px; margin: 0px auto; padding-bottom: 80px; }
.privacy .content h3 { margin: 40px 0 10px; padding-top: 40px; text-align: left; font-size: 18px; font-weight: normal; border-top: 1px dotted rgb(150,150,150); }
.privacy .content h3:first-child { margin-top: 0px; }
.privacy .content p { text-align: left; font-size: 14px; color: rgb(150,150,150); }
.privacy .content li { text-align: left; font-size: 14px; color: rgb(150,150,150); }



#agency, #web, #movie {
    padding-top: 20px;
}
#services .row > div {
    margin: 20px;
}

@media (min-width: 992px){
	.col-md-4 {
		width: 33.33333%;
	}
	.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11 {
		float: left;
	}
}
.box_market {
    background: #fefefe;
    padding: 20px 0;
    border-radius: 10px;
    border: 3px solid#f0f0f0;
	margin: 8%;
}
.center {
    text-align: center;
}
#agency, #web, #movie img {
    vertical-align: middle;
}
.box h4 {
    font-size: 28px;
    color: #666;
}
.row {
    margin-right: -15px;
    margin-left: -15px;
}
.logo img {
    vertical-align: initial;
}

a:hover{
　text-decoration: none;
}

@media screen and (min-width: 768px) {
	#nav_header{
		display: flex;
		justify-content: space-between;
		align-items: center;
		background:#FFF;
		color:#000;
		text-align: center;
	}

	#nav_header .fixed{
		position: fixed;
		z-index: 999;
		top:0;
		left:0;
	}

	nav ul{
		list-style: none;
		display: flex;
		justify-content: center;
	}

    nav ul li a {
        text-decoration: none;
        color: #666;
        padding: 10px 10px;
        font-size: 1.2em;
/* 
        border-bottom: 2px solid #00643D;
        border-right: 2px solid #00643D;
*/
        margin: 0 10px 0 0 ;
        background:
        linear-gradient(-110deg, transparent 1rem, #FFF 3rem calc(100% - 2rem), transparent calc(100% - 0.1rem)),
        repeating-linear-gradient(45deg, #f4f22e 0px 4px, transparent 4px 8px),
        repeating-linear-gradient(-45deg, #aab400 0px 4px, transparent 4px 8px);
        border-radius: 20px;
    }

    nav ul li a:hover{
        text-decoration: none;
    }

    nav li {

	}
}

@media only screen and (max-width: 767px) {
	#nav_header{
		justify-content: space-between;
		align-items: center;
		background:#FFF;
		color:#000;
		text-align: center;
	}

	#nav_header .fixed{
		position: fixed;
		z-index: 999;
		top:0;
		left:0;
	}

	nav ul{
		list-style: none;
		justify-content: center;
	}

	nav ul li a{
		text-decoration: none;
        color: #FFF;
        font-size: 1.8em;
        font-weight: bold;
        padding: 30px;
        text-shadow: 0px 0px 10px #000;
        line-height: 1.8;
    }
	nav li{
        width: 200px;
        height :45px;
    }
    
    .li_1 {
        background: url(../images/toplist_seo.jpg) no-repeat center; background-size: cover;
        padding: 10px 0px;
        margin: 5px auto;
        width: 95%;
        clip-path: polygon(5% 0%, 95% 0%, 100% 50%, 95% 100%, 5% 100%, 0% 50%);
        border: 2px solid #C5E5EC;
    }
    .li_2 {
        background: url(../images/toplist_logistics.jpg) no-repeat center; background-size: cover;
        padding: 10px 0px;
        margin: 5px auto;
        width: 95%;
        clip-path: polygon(5% 0%, 95% 0%, 100% 50%, 95% 100%, 5% 100%, 0% 50%);
        border: 2px solid #C5E5EC;
    }
    .li_3 {
        background: url(../images/toplist_stream.jpg) no-repeat center; background-size: cover;
        padding: 10px 0px;
        margin: 5px auto;
        width: 95%;
        clip-path: polygon(5% 0%, 95% 0%, 100% 50%, 95% 100%, 5% 100%, 0% 50%);
        border: 2px solid #C5E5EC;
    }
    .li_4 {
        background: url(../images/toplist_music.jpg) no-repeat center; background-size: cover;
        padding: 10px 0px;
        margin: 5px auto;
        width: 95%;
        clip-path: polygon(5% 0%, 95% 0%, 100% 50%, 95% 100%, 5% 100%, 0% 50%);
        border: 2px solid #C5E5EC;
    }
    .li_5 {
        background: url(../images/toplist_company.jpg) no-repeat center; background-size: cover;
        padding: 10px 0px;
        margin: 5px auto;
        width: 95%;
        clip-path: polygon(5% 0%, 95% 0%, 100% 50%, 95% 100%, 5% 100%, 0% 50%);
        border: 2px solid #C5E5EC;
    }
    .li_6 {
        background: url(../images/toplist_recruit.jpg) no-repeat center; background-size: cover;
        padding: 10px 0px;
        margin: 5px auto;
        width: 95%;
        clip-path: polygon(5% 0%, 95% 0%, 100% 50%, 95% 100%, 5% 100%, 0% 50%);
        border: 2px solid #C5E5EC;
    }
}