@charset "utf-8";

@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,500,700&display=swap&subset=japanese');

html {
	font-size: 62.5%;
	position: relative;
	min-height: 100%;
	min-width: 320px;
	background: #1a1a1a;
}

body {
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 1.6rem;
	background: #fff;
	min-width: 1000px;
}

a {
	text-decoration: none;
}

footer a:hover,
a.linkTxt:hover {
	opacity: .8;
}

.spOnly {
	display: none;
}
.pcOnly {
	display: block;
}

#toTop {
    position: absolute;
    top: 0px;
    right: 40px;
    width: 38px;
    height: 20px;
    text-indent: -9999px;
    cursor: pointer;
    z-index: 50;
    background: url("../images/marker_totop.svg") no-repeat;
    background-size: cover;
}

/* header */
header {
	background: #1a1a1a;
	color: #fff;
	font-weight: 400;
	height: 50px;
	padding-top: 16px;
	box-sizing: border-box;
	z-index: 2;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}
header a {
	color: #fff;
	font-size: 1.2rem;
}
header li.is-active > a,
header li > a:hover {
	color: #808080;
}
header ul.gNav {
	flex-basis: 47%;
	position: relative;
	zoom: 1;
}
header ul.gNav .service > a {
	display: inline-block;
	height: 32px;
}
header ul.gNav .service > div {
/*
	transition:.8s;
	opacity: 0;
	bottom: -56px;
*/
}
header ul li.service {
	position: relative;
}
header ul li.service .sNavWrap {
	position: absolute;
	top:38px;
	left: -33px;
	display: none;
	/*padding-top: 20px;*/
}
header ul.gNav .service.active .sNavWrap {
	/*opacity: 1;*/
}

header ul li.service .sNav {
	display: flex;
}
header ul li.service .sNav p {
	background: rgba(224,224,224, 0.9);
	margin-right: 5px;
}
header ul li.service .sNav p a {
	padding: 1em;
	width: 93px;
	display: block;
	text-align: center;
	color: #000;
}
header ul li.service .sNav p a:hover {
	background: rgba(33,93,126, 0.9);
	color: #fff;
}

/*#############################################*/
/* footer */
footer , footer a {
	color: #999999;
}
footer {
	background: #1a1a1a;
	padding: 2em 0;
	font-size: 1.2rem;
	padding: 40px 0 30px;
}
footer .InnerWrap {
	position: relative;
}

.fNav li {
	margin-right: 2em;
}




/*#############################################*/
/* layout */
.contentWrap {
	border: 1px solid; max-width: 1200px; margin: 0 auto; min-height: 1900px;
}
.InnerWrap {
	max-width: 1000px;
	margin: 0 auto;
	padding: 0 50px;
	box-sizing: border-box;
}
.flexWrap {
	display: flex;
	justify-content: space-between;
}
.flexWrap.split2 > div {
	flex-basis: 50%;
}
.basis60 {
	flex-basis: 60%;
}
section {
	padding: 70px 0 98px;
	line-height: 1.8;
	font-size: 1.4rem;
}

section.pageHeader {
	padding-bottom: 70px;
}
section#company {
	background: #ccc;
}
section#link {
	padding: 125px 0;
}

.mgt1em { margin-top: 1em; }
.mgt3em { margin-top: 3em; }
.mgb3em { margin-bottom: 3em; }
.txtCenter { text-align: center; }

/*#############################################*/
/* parts */
.ttlBase {
	background: #e5e5e5;
	text-align: center;
	position: relative;
	width: 284px;
	height: 58px;
	font-size: 2.0rem;
	margin: 0 auto;
}
.ttlBase:before {
	position: absolute;
	top: 0;
	left: 0;
	content: "";
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 58px 284px 0 0;
	border-color: #f0f0f0 transparent transparent transparent;
}
.ttlBase.dark {
	background: #000;
	color: #fff;
}
.ttlBase.dark:before {
	border-color: #1a1a1a transparent transparent transparent;
}
.ttlBase.gray{
	background: #a3a3a3;
	color: #fff;
}
.ttlBase.gray:before {
	border-color: #b2b2b2 transparent transparent transparent;
}
.ttlBase p {
	font-size: 3rem;
	font-weight: 500;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate( -50%, -50%);
	width: 100%;
}


/*#############################################*/
/* top */
.videoWrap {
	position: relative;
	overflow: hidden;
	background: #332290;
	height: 100%;
	height: 100vh;
	width: 100%;
}
.videoDot {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	background: url("../images/top/dot.png") repeat;
	width: 100%;
	height: 100%;
}
.video {
	position: absolute;
	left: 50%;
	-webkit-transform: translateX( -50%);
	transform: translateX( -50%);
	top: 0;
	background: #000;
	min-height: 100%;
	min-height: 100vh;
	min-width: 100%;
	min-width: 100vh;
	width: 100%;
	height: 100%;
	z-index: 1;

}

.topOver {
	position: absolute;
	z-index: 2;
	display: flex;
	width: 50%;
	justify-content: center;
	align-items: center;
	text-align: center;
	margin: auto;
	font-size: 2.4rem;
	color: #fff;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
}

#index .serviceImg {
	margin-top: 3em;
}
.serviceImg .zoomImg {
	width: 290px;
	height: 210px;
	text-align: center;
	overflow: hidden;
	position: relative;
	background: #000;
}
.serviceImg .zoomImg  a {
	display: block;
	width: 100%;
	height: 100%;
	position: relative;
}
.serviceImg .zoomImg a:before {
	content: "";
	transition:.5s;
	width: 290px;
	height: 210px;
	position: absolute;
	top: 0;
	left: 0;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}
.serviceImg .zoomImg a:hover:before {
	opacity: .7;
	transform: scale(1.2);
}
.serviceImg .zoomImg:first-child a:before {
	background-image: url('../images/top/img_mov_c.png'); 
}
.serviceImg .zoomImg:nth-child(2) a:before {
	background-image: url('../images/top/img_web_c.png'); 
}
.serviceImg .zoomImg:last-child a:before {
	background-image: url('../images/top/img_gra_c.png'); 
}
.serviceImg .zoomImg span {
	color: #fff;
	font-size: 2.6rem;
	font-weight: 500;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}
section#company {
	background: linear-gradient( to right, rgba(0,0,0 ,.55),  rgba(0,0,0 ,.55) ), url("../images/bg_company.jpg") no-repeat;
	background-size: 2400px;
	position: relative;
}
#company dl {
	color: #fff;
}
#company .accesslink a {
	text-decoration: underline;	
	color: #fff;
}
#company dt, #company dd {
	float: left;
}
#company dt {
	clear:both;
	width: 107px;
}
#company dd {
	margin-bottom: 1em;
}

.downBox {
	position: absolute;
	bottom: 1.7%;
	left: 50%;
	transform: translateX(-50%);
	z-index: 2;
	color: #fff;
	text-align: center;
	font-size: 1.6rem;
}
.downMarker {
	width: 40px;
	height: 20px;
	background: url("../images/top/mark_down.svg") no-repeat 50% 50%;
	animation: sc 2.0s infinite;
}
@keyframes sc {
	0% {
		opacity: 1;
		transform: transrateY(0px);
	}
	100% {
		opacity: 0;
		transform: transrateY(-10px);
	}
}
/*#############################################*/
/* service */
.player {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
}
.thumb {
	/*position: absolute;*/
	top: 0;
	left: 0;
	z-index: 2;
}
.service .videoWrap { 
	height: 50px; 
	overflow: visible;
}
section.serviceImg {
	height: 930px;
	box-sizing: border-box;
}
.otherService {
	display: flex;
	margin-top: 2em;
}
.otherService a {
	color: #000;
	text-decoration: underline;
	margin-right: 2em;
}
h2 {
	font-size: 2.2rem;
	font-weight: 600;
	margin-bottom: 1em;
}
.serviceImg h3 ,
.serviceRecord h3 {
	color: #fff;
	font-size: 2.8rem;
	text-align: center;
	margin-bottom: 2.5em;

}
.serviceRecord h3 {
	color: #000;
}
.serviceImg {
	background-position: 50% 0px;
	background-size: 2400px 1200px;
	background-repeat: no-repeat;
}
#movie.serviceImg {
	background-image: url("../service/images/top_mov.jpg");
	background-color: #000;
}
#web.serviceImg {
	background-image: url("../service/images/top_web.jpg");
	background-color: #000;
}
#graphic.serviceImg {
	background-color: #3e494e;
	background-image: url("../service/images/top_graphic.jpg");
}

section.serviceRecord {
	background: #f0f0f0;
	max-height: 600px;
	overflow: hidden;
	display: none;
}
.recordEtc {
	margin-left: 2.0em;
}
.recordEtc dd p {
	float: left;
	width: 50%;
	line-height: 2;
}
.slideBase {
}
.slideBase > div{
	width: 384px;
	font-size: 1.5rem;
	font-weight: 600;
}
.slideBase > div span {
	font-size: 1.2rem;
	font-weight: 500;
}
.slideBase > div a {
	color: #000;
	text-decoration: underline;
	font-weight: 300;
	font-size: 1.2rem;
}
.slideTxt {
	margin-top: 1.5em;
}
.bx-wrapper .bx-pager {
	bottom: -60px;
}
.bx-wrapper .bx-pager.bx-default-pager a {
	-webkit-border-radius: 0;
	border-radius: 0;
	background: #bfbfbf;
	width: 74px;
}
.bx-wrapper .bx-pager.bx-default-pager a:hover, .bx-wrapper .bx-pager.bx-default-pager a.active {
	background: #333;
}

.animeBox {
	height: 640px;
	width: 640px;
	margin: 1em auto;
	position: relative;
}

.bgceircle {
	position: absolute;
	width: 470px;
	height: 470px;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	background: rgba(255,255,255, 0.07) no-repeat;
	border: 1px solid #adadad;
	border-radius: 300px;
}
#graphic .bgceircle {
	width: 546px;
	height: 546px;
	border: 1px solid #636363;
}
#graphic .bgceircle .child:first-child {
	background: rgba(229,229,229,1) no-repeat;
	color :#000;
}
#graphic .bgceircle .child:first-child:before {
}
.bgceircle .child ,
.bgsquare .child {
	position: absolute;
	width: 190px;
	height: 190px;
	background: rgba(229,229,229,1) no-repeat;
	text-align: center;
	line-height: 2;
	overflow: hidden;
}
.bgceircle .child {
	border-radius: 200px;
}
.bgceircle .child:before ,
.bgsquare .child:before {
	border-color: #f0f0f0 transparent transparent transparent;
	position: absolute;
	top: 0;
	left: 0;
	content: "";
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 190px 190px 0 0;
	z-index: -1;
}
.bgceircle .child:first-child ,
.bgsquare .child:first-child {
	background: #000;
	color: #fff;
}
#movie .bgceircle .child:first-child:before ,
.bgsquare .child:first-child:before {
	border-color: #242424 transparent transparent transparent;
}
.bgceircle .child p ,
.bgsquare .child p {
	font-size: 2.0rem;
	font-weight: 500;
	margin-top: 2.5em;
}
.ceircle01 {
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	z-index:2;
}
.ceircle02 {
	top: -35px;
	opacity: 0;
	transform: translateX(-50%);
	transition: 1s;
	transition-delay:.5s;
}
.ceircle02.active {
	top: -85px;
	left: 50%;
	/*transform: translateX(-50%);*/
	opacity: 1;
}
.ceircle03 {
	top: 50%;
	right: -35px;
	transform: translateY(-50%);
	transition: 1.0s;
	transition-delay:1s;
	opacity: 0;
}
.ceircle03.active {
	top: 50%;
	right: -85px;
	/*transform: translateY(-50%);*/
	opacity: 1;
}

.ceircle04 {
	bottom: -35px;
	left: 50%;
	transform: translateX(-50%);
	transition: 1s;
	transition-delay:1.5s;
	opacity: 0;
}
.ceircle04.active {
	bottom: -85px;
	left: 50%;
	/*transform: translateX(-50%);*/
	opacity: 1;
}
.ceircle05 {
	top: 50%;
	left: -35px;
	transform: translateY(-50%);
	transition: 1s;
	transition-delay:2s;
	opacity: 0;
}
.ceircle05.active {
	top: 50%;
	left: -85px;
	/*transform: translateY(-50%);*/
	opacity: 1;
}

.bgsquare {
	position: absolute;
	width: 470px;
	height: 470px;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	background: rgba(255,255,255, 0.23) no-repeat;
	border: 1px solid #989898;
}
/*
.bgsquare .child {
	position: absolute;
	width: 190px;
	height: 190px;
	background: rgba(255,255,255, 1) no-repeat;
	text-align: center;
}
*/
.square01 {
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}
.square02 {
	top: -35px;
	left: -35px;
	opacity: 0;
	/*transform: translate(-50%, -50%);*/
	/*transform: rotate(-45deg);*/
	transition: .5s;
	transition-delay:.5s;
}
.square02.active {
	top: -85px;
	left: -85px;
	/*transform: translateX(-50%);*/
	transform: rotate(0deg);
	opacity: 1;
}
.square03 {
	top: -35px;
	right: -35px;
	/*transform: translate(-50%, -50%);*/
	/*transform: rotate(45deg);*/
	transition: .5s;
	transition-delay:1s;
	opacity: 0;
}
.square03.active {
	top: -85px;
	right: -85px;
	/*transform: translateY(-50%);*/
	transform: rotate(0deg);
	opacity: 1;
}

.square04 {
	bottom: -35px;
	right: -35px;
	/*transform: translate(-50%, -50%);*/
	/*transform: rotate(45deg);*/
	transition: .5s;
	transition-delay: 1.5s;
	opacity: 0;
}
.square04.active {
	bottom: -85px;
	right: -85px;
	/*transform: translateX(-50%);*/
	transform: rotate(0deg);
	opacity: 1;
}
.square05 {
	bottom: -35px;
	left: -35px;
	/*transform: translate(-50%, -50%);*/
	/*transform: rotate(-45deg);*/
	transition: .5s;
	transition-delay:2s;
	opacity: 0;
}
.square05.active {
	bottom: -85px;
	left: -85px;
	/*transform: translateY(-50%);*/
	transform: rotate(0deg);
	opacity: 1;
}

.recordEtc dt {
	font-size: 1.5rem;
	font-weight: 600;
	border-bottom: 1px dotted #999;
	padding-bottom: 1em;
	margin-bottom: 1em;
}
.bgceircle .sector {
	color: #fff;
	position: absolute;
	width: 273px;
	height: 273px;
	background: rgba(0,0,0, .0);
	border-radius: 100% 0 0 0;
	top: 0;
	left: 0;
}
.bgceircle .sector02 {
	transform: rotate(45deg);
	transform-origin: 273px 273px;
	z-index: 1;
}
.bgceircle .sector02.active {
	background: rgba(16, 15, 15, 0.39);
}
.bgceircle .sector03 {
	transform: rotate(45deg);
	transform-origin: 273px 273px;
	transition: .5s;
	transition-delay:0s;
}
.bgceircle .sector03.active {
	transform: rotate(135deg);
	background: rgba(0,0,0, .5);
}
.bgceircle .sector04 {
	transform: rotate(35deg);
	transform-origin: 273px 273px;
	transition: 1.0s;
	transition-delay:0s;
	background: rgba(16, 15, 15, 0.39);
}
.bgceircle .sector04.active {
	transform: rotate(225deg);
}
.bgceircle .sector05 {
	transform: rotate(45deg);
	transform-origin: 273px 273px;
	transition: 1.5s;
	transition-delay:0s;
}
.bgceircle .sector05.active {
	transform: rotate(315deg);
	background: rgba(0,0,0, .5);
}
.bgceircle .sector > div {
	position: absolute;
	top: 50%;
	left: 50%;
	text-align: center;
	transform: translate(-50%,-50%) rotate(-45deg);
}
.bgceircle .sector03 > div {
	transform: rotate(-135deg);
}
.bgceircle .sector04 > div {
	transform: rotate(-225deg);
}
.bgceircle .sector05 > div {
	transform: rotate(-315deg);
}

#graphic .sector p {
	font-size: 2.0rem;
	font-weight: 500;
	text-align: center;
	width: 100%;
}
#graphic .sector p span {
	font-size: 1.4rem;
	font-weight: 400;
	line-height: 1.4;
	display: inline-block;
}
#graphic .sector01 p {
	margin-top: 2.5em;
}
#graphic .sector02 p {
	margin-top: 2.5em;
}
#graphic .sector03 p {
	position: relative;
	left: 40px;
}
#graphic .sector04 p {
	margin-bottom: -2.5em;
	margin-left: 2.2rem;
}
#graphic .sector05 p {
	position: relative;
	left: -40px;
}

/*#############################################*/
/* news */
#news section {
	min-height: 500px;
}
.newsList {
	border-top: 1px dotted #ccc;
	margin-top: 3em;
}
.newsList li {
	padding: 2em 0;
	border-bottom: 1px dotted #ccc;
}
.newsDetail {
	display: flex;
}
.newsDetail dt {
	text-align: center;
	flex-basis: 30%;
}
.newsDetail dd p {
	font-weight: 500;
}
.newsDetail dd {
	position: relative;
	width: 100%;
}
.newsDetail dd a {
	position: absolute;
	top: 0;
	right: 2em;
	display: block;
	width: 25px;
	height: 25px;
	background: url("../images/marker_plus.svg") no-repeat;
}
.newsDetail dd a.open {
	transform: rotate(45deg);
}
.newsDetail dd a:hover {
	cursor:pointer;
}
.newsTxt {
	display: none;
	margin-top: 2em;
}



/* common */
dl.listBase {
	border-top: 1px dotted #ccc;
	padding: 5em 0  3em 7em;
	margin-top: 5em;
}
dl.listBase dt {
	width: 150px;
	float:left;
	font-weight: 500;
}
dl.listBase dd {
	margin-left: 150px;
	margin-bottom: 3em;
}
/*#############################################*/
/* recruit */
dl.recruit {
}
dl.recruit dt {
}
dl.recruit dd {
}
h4 {
	font-size: 2.2rem;
	font-weight: 600;
	text-align: center;
	margin-bottom: 1.5em;
}
/*#############################################*/
/* privacy */
#privacy dl.listBase {
	padding-right: 7em;
}
dl.privacy dt {
	width: 100%;
	float: none;
}
dl.privacy dd {
	margin: .5em 0 2.2em 0;
}

/*#############################################*/
/* other */
body.pages .videoWrap { 
	height: 50px; 
	overflow: visible;
}
section.contact {
	background: #f0f0f0;
}

#mapWrap {
	margin-top: 4em;
}

/*#############################################*/
/* contact */
dl.contact.listBase {
	padding-right: 7em;
}
dl.contact.listBase dt {
	background: #1a1a1a;
	color: #fff;
	font-weight: 600;
	padding: 1em 1em 1em 2em;
	box-sizing: border-box;
	width: 190px;
}
dl.contact.listBase dt.hidden {
	display: none;
}
dl.contact.listBase dt span {
	color: #b2b2b2;
	margin-left: 1em;
}
dl.contact.listBase dd {
	margin-left: 205px;
	margin-bottom: 1em;
}
dl.contact.listBase dd  input[type="text"] ,
dl.contact.listBase dd  textarea {
	font-size: 1.6rem;
	background: #f0f0f0;
	width: 100%;
	border: none;
	padding: 1em 1em;
	box-sizing: border-box;
}
input[type="submit"] ,
input[type="button"] {
	border: 1px solid #808080;
	padding: 1em 5em;
	font-size: 1.6rem;
	margin: 3em 0;
	cursor: pointer;
}
input[type="submit"]:hover ,
input[type="button"]:hover {
	background: #808080;
	color: #fff;
}
.finishMsg {
	text-align: center;
	margin: 3em auto;
	padding: 4em 0;
}
.finishMsg span {
	font-size: 1.8rem;
}
.upDotLine {
	border-top: 1px dotted #999;
}
#formWrap h3 {
	font-size: 2.2rem;
	margin: 1em auto;
}
.formTable {
	font-size: 1.8rem;
	margin: 2.5em auto;
	min-width: 80%;
}
.formTable th ,
.formTable td {
	padding: .5em;
}
.formTable th {
	background: #efefef;
	width: 200px;
}
.formTable td {
	min-width: 70%;
}
/*#############################################*/
/* error */
.errorMsg {
	border-top: 1px dotted #ccc;
	padding: 5em 0  7em;
	margin-top: 5em;
	text-align: center;
}
/*#############################################*/
/* anime */
.anime-box{
	transition:.8s;
	opacity: 0;
	transform:translateY(10px);
}

.anime-box.active{
	opacity: 1;
	transform:translateY(0px);
}
.top-anime {
	transition:.8s;
	opacity: 0;
	transform:translateY(10px);
}
.top-anime.active {
	opacity: 1;
	transform:translateY(0px);
}
.top-anime02 {
	transition-delay:.5s;
}
.top-anime03 {
	transition-delay:1.0s;
}
.top-anime04 {
	transition-delay:1.5s;
}
.top-anime05 {
	transition-delay:2.0s;
}