@charset 'UTF-8';

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

メインビジュアル

-----------------------------------------------------------------------------*/
.scroll {
  position: absolute;
  left: 2%;
  top: 40%;
}
@media all and (min-width: 769px) and (max-width: 1280px) {
.scroll {
  position: absolute;
  left: 0%;
  top: 40%;
	}
}

@media screen and (max-width:768px){
.scroll {
  position: absolute;
  left: 0%;
  top: 40%;
	}
}


.scroll span{
  writing-mode: vertical-rl;
  transform: rotate(-180deg);
  font-size:.8rem;
  color:#fff;
}
@media all and (min-width: 769px) and (max-width: 1280px) {
.scroll span{
  color:#333;
	}
}
@media screen and (max-width:768px){
.scroll span{
	color:#333;
	}
}

/* 線のアニメーション部分 */
.scroll::before {
  animation: scroll 2s infinite;
  background-color: #000;
  bottom: 60px;
  content: "";
  height: 200px;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  width: 1px;
}
/* 線のアニメーション */
@keyframes scroll {
  0% {
    transform: scale(1, 0);
    transform-origin: 0 0;
  }
  50% {
    transform: scale(1, 1);
    transform-origin: 0 0;
  }
  51% {
    transform: scale(1, 1);
    transform-origin: 0 100%;
  }
  100% {
    transform: scale(1, 0);
    transform-origin: 0 100%;
  }
}


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

コンテンツ領域

-----------------------------------------------------------------------------*/
.bgColor_company{
	background: linear-gradient(180deg, #CEE6FF 0%, #CEE6FF 30%, #F4F4F4 30%, #F4F4F4 100%);
	padding:0 0 10em;
}
@media all and (min-width: 769px) and (max-width: 1280px) {
.bgColor_company{
	background: linear-gradient(180deg, #CEE6FF 0%, #CEE6FF 25%, #F4F4F4 25%, #F4F4F4 100%);
	padding:0 0 10em;
	}
}
@media screen and (max-width:768px){
.bgColor_company{
	background: linear-gradient(180deg, #CEE6FF 0%, #CEE6FF 20%, #F4F4F4 20%, #F4F4F4 100%);
	padding:0 0 5em;
	}
}

.main_contents .company_lbl{
	font-size:1.4rem;
	font-weight:700;
	position:relative;
	padding:200px 0px 120px 28px;
}
@media screen and (max-width:768px){
.main_contents .company_lbl{
	padding:100px 0px 120px 28px;
	}
}

.main_contents .company_lbl::before{
	content:"";
	border-left:10px solid #3296FF;
	position:absolute;
	left:-0px;
	top:198px;
	width:20px;
	height:40px;
}
@media screen and (max-width:768px){
.main_contents .company_lbl::before{
	top:100px;
	}
}

.main_contents .title-sub{
	font-size:.8rem;
	letter-spacing:2px;
	padding-top:0px;
	display:inline-block;
	padding:0 0 0 20px;
}



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

オフィス

-----------------------------------------------------------------------------*/
.office{
	padding: 0 0 140px;
	margin:0 0 0px;
	position:relative;
}
.space-source{
	margin:150px 0 0; 
}
@media screen and (max-width:768px){
.space-source{
	margin:75px 0 0; 
	}
}

/*---大阪---*/
.osaka_div_after::before{
	content:"";
	width:65%;
	height:80%;
	background:#fff;
	position:absolute;
	left:0;
	top:20%;
	z-index:0;
}
@media all and (min-width: 769px) and (max-width: 1280px) {
.osaka_div_after::before{
	width:95%;
	}
}

@media screen and (max-width:768px){
.osaka_div_after::before{
	content:"";
	width:95%;
	height:70%;
	}
}


.osaka_div dl dt{
	padding:100px 0 100px;
}
@media all and (min-width: 769px) and (max-width: 1280px) {
.osaka_div dl {
	padding:0px 0 0px 0px;
	max-width:90%;
	}
}
@media screen and (max-width:768px){
.osaka_div dl dt{
	padding:70px 0 50px;
	}
.osaka_div dl dt img{
	max-width:90%;
	}
}

.osaka_div dl dd{
	max-width:420px;
	line-height:2;
}
@media all and (min-width: 769px) and (max-width: 1280px) {
.osaka_div dl dd{
	max-width:420px;

}

}

@media screen and (max-width:768px){
.osaka_div dl dd{
	max-width:90%;
	}
}

.photoright{
	text-align:right;
	max-width:1490px;
	margin: 0 0 0 auto;
	position:relative;
}
@media all and (min-width: 769px) and (max-width: 1280px) {
.photoright{
	max-width:100%;
	}
.photoright img{
	max-width:97.5%;
	}
}
@media screen and (max-width:768px){
.photoright{
	max-width:95%;
	}

}

/*---東京---*/
.tokyo_div_after::before{
	content:"";
	width:70%;
	height:80%;
	background:#fff;
	position:absolute;
	right:0;
	top:20%;
	z-index:0;
}
@media all and (min-width: 769px) and (max-width: 1280px) {
.tokyo_div_after::before{
	width:95%;
	}

}

@media screen and (max-width:768px){
.tokyo_div_after::before{
	width:95%;
	height:70%;
	top:20%;
	z-index:0;
	}
}

.tokyo_div dl{
	margin: 0 80px 0 auto;
	max-width:680px;
}
@media screen and (max-width:768px){
.tokyo_div dl{
	margin: 0 0px 0 auto;
	max-width:90%;

	}
}

.tokyo_div dl dt{
	padding:100px 0 100px;
}
@media screen and (max-width:768px){
.tokyo_div dl dt{
	padding:100px 0 50px 0;
	}
}

.tokyo_div dl dd{
	max-width:420px;
	line-height:2;
}
.photoleft{
	max-width:1490px;
	position:relative;
}
@media all and (min-width: 769px) and (max-width: 1280px) {
.photoleft{
	max-width:100%;
	}
.photoleft img{
	max-width:97.5%;
	}

}

@media screen and (max-width:768px){
.photoleft{
	max-width:95%;
	}
}
/*----------------------------------------------------------------------------

概要

-----------------------------------------------------------------------------*/
.company_table{
	padding:20em 0 ;
}
@media all and (min-width: 769px) and (max-width: 1280px) {
.company_table{
	padding:10em 0 ;
	}
}

@media screen and (max-width:768px){
.company_table{
	padding:5em 0 ;
	}
}
.company_table table{
	width:100%;
	background:#fff;
	margin: 0 auto;
}
@media all and (min-width: 769px) and (max-width: 1280px) {
.company_table table{
	width:95%;

	}
}

.company_table table a{
	color:#333;
}

.company_table table tr{
	border-bottom:1px solid #333;
}
.company_table table th{
	padding:30px 0 ;
	width:40%;
}
@media screen and (max-width:768px){
.company_table table th{
	width:30%;
	}
}
.company_table table td{
	padding:30px 0 ;
}
.company_table table dl{
	margin:10px 0;
}
.company_table table dl dd span{
	display:inline-block;
	padding:0 0px 0 20px;
	background:url(../../cmn/images/pin.png) no-repeat 10% 50% ;
}
.company_table table ul{
	display:flex;
	align-item:center;
}
.company_table table ul li{
		margin:0 20px 0 0;
}
/*----------------------------------------------------------------------------

サービス

-----------------------------------------------------------------------------*/
.bgColor_service{
	background: linear-gradient(180deg, #CEE6FF 0%, #CEE6FF 30%, #fff 30%, #fff 100%);
	padding:0 0 10em;
}
@media screen and (max-width:768px){
.bgColor_service{
	background: linear-gradient(180deg, #CEE6FF 0%, #CEE6FF 15%, #fff 15%, #fff 100%);
	padding:0 0 0em;
	}
}
.serviceList{
	display:flex;
	margin:0 0 40px;
	padding:50px 0 120px;
	border-top:1px solid #ccc;
	align-items: start;
}
@media screen and (max-width:768px){
.serviceList{
	display:block;
	margin:0 0 40px;
	padding:50px 0 80px;
	}
}

.firstList{
	margin:80px 0 40px;
}

.serviceList dt{
	font-size:1.6rem;
	width:40%;
	font-weight:700;
}
@media screen and (max-width:768px){
.serviceList dt{
	width:100%;
	margin:0 0 30px;
	}
}
.serviceList dd{
	width:60%;
	line-height:2.2;
}
@media screen and (max-width:768px){
.serviceList dd{
	width:100%;

	}
}

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

お客様

-----------------------------------------------------------------------------*/
.bgColor_custermer{
	background:#CEE6FF;
	padding:2em 0 23em;
	margin: 0 0 10em;
	position:relative;
}


@media screen and (max-width:768px){
.bgColor_custermer{
	padding:0em 0 3em;
	margin: 0 0 0em;

	}
}

.bgColor_custermer::before{
	content:"";
	background:#fff;
	position:absolute;
	right:0;
	bottom:0px;
	width:63%;
	height:70%;

}
@media all and (min-width: 769px) and (max-width: 1280px) {
.bgColor_custermer::before{
	width:100%;
	background:#CEE6FF;
	height:60%;
	}
}

@media screen and (max-width:768px){
.bgColor_custermer::before{
	background:#CEE6FF;
	position:absolute;
	width:0%;
	height:0%;
	}
}

.custermer_name{
	position:absolute;
	right:0;
	top:200px;
	padding:5em 5em ;
	display:flex;
}


@media screen and (max-width:768px){
.custermer_name{
	position:static;
	right:0;
	top:0px;
	padding:0em 0em ;
	display:block;
	}
}

.custermer_name ul{
	margin: 0 30px;
}
.custermer_name ul li{
	margin: 20px 0px;
}
@media screen and (max-width:768px){
.custermer_name ul{
	margin: 0 10px 0 0;
}
.custermer_name ul li{
	margin: 20px 0px;
	}
}

.photo-center{
	max-width:1490px;
	position:relative;
	text-align:center;
	margin: 0 auto;
}
@media all and (min-width: 769px) and (max-width: 1280px) {
.photo-center{
	max-width:100%;
	}
.photo-center img{
	max-width:97.5%;
	}
}

@media screen and (max-width:768px){
.photo-center{
	max-width:95%;
	margin: -80px auto 0;
	}
}