@charset "utf-8";

/*
■1：COMMON
■2：INDEX
■3：BISINESS
■4：work1
■5：work2
■6：company
*/
/* *****************************************

COMMON

***************************************** */

/* Content
----------------------------------------------------------*/

#title{
	background: url(../images/index/main-bg-photo.png) no-repeat;
	background-size: cover;
	background-position: center center;
	height: 270px !important;
}

#title > h2{
	width: 100%;
	height: 100%;
	background: url(../images/index/main-bg.png);
	position: relative;
	text-align: center;
}

#title > h2 > img{
	padding-top: 120px;
}

.Content{
	width: 1000px;
	margin: 80px auto 100px;
}


.h3Title{
	text-align: center;
	position: relative;
	padding: 0 0 30px;
	margin: 0 0 40px;
}

.h3Title:after{
	content:'';
	position: absolute;
	bottom: 0px;
	left: 50%;
	margin-left: -20px;
	border-left: 20px solid #e90039;
	border-right: 20px solid #000;
	padding: 3px 0 0;
}

.h3TitleLead{
	text-align: center;
	line-height: 2.2em;
	margin: 0 0 60px;
}

.h4Lines {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  text-align: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
	font-size: 18px;
	font-weight: bold;
	margin: 0 0 30px;
}
.h4Lines span{
	font-size: 14px;
	padding: 0 0 0 10px;
}

.h4Lines:before,
.h4Lines:after {
  content: '';
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  height: 1px;
  background: #ccc;
  min-width: 40px;
  display: inline-block;
  vertical-align: middle;
}
.h4Lines:before {
  margin-right: 40px;
}
.h4Lines:after {
  margin-left: 40px;
}

.ColorLine{
	padding: 3px 0;
	border-bottom: 1px solid #000;
	font-size: 16px;
	font-weight: bold;
	margin: 0 0 20px;
}
.ColorLine span{
	padding: 3px 10px 3px 0;
	border-bottom: 1px solid #e90039;
}

.Collumn2Box .ColorLine,
.Collumn3 .ColorLine,
.Collumn4 .ColorLine,
.Collumn6 .ColorLine{
	margin: 0 0 10px;
}

.LinkBtn a{
	display: block;
	max-width: 200px;
	margin: 0 auto;
	background: #000;
	color: #FFF;
	padding: 10px;
	text-align: center;
}

.LinkBtn a:hover{
	background: #e9003a;	
}

/* Collumn
----------------------------------------------------------*/
.Collumn2Box,
.Collumn3,
.Collumn4,
.Collumn6{
	display: flex;
	display: -webkit-flex;
			align-items: flex-start;
	-webkit-align-items: flex-start;
	margin: 0 0 40px;
}

.Collumn2Box img,
.Collumn3 img,
.Collumn4 img{
	width: 100%;
}

/*Collumn2Box----------------------*/
.Collumn2Box > div{
	max-width: 485px;
}

.Collumn2Box > div:not(:last-child){
	margin: 0 31px 0 0;
}

/*Collumn3-----------------------*/
.Collumn3 > div{
	max-width: 313px;
}

.Collumn3 > div:not(:last-child){
	margin: 0 31px 0 0;
}

.Collumn3 > div .workText{
	margin: 0 0 0!important;
}

/*Collumn4-----------------------*/
.Collumn4 > div{
	max-width: 228px;
}

.Collumn4 > div:not(:last-child){
	margin: 0 31px 0 0;
}

.Collumn4 > div .workText{
	margin: 0 0 0!important;
}

/*Collumn6-----------------------*/
.Collumn6 > div{
	width: 100%;
}

.Collumn6 > div:not(:last-child){
	margin: 0 31px 0 0;
}


/* *****************************************

INDEX

***************************************** */

/* Content(main)
----------------------------------------------------------*/

#indexMain{
	background: url(../images/index/main-bg-photo.png) no-repeat;
	background-size: cover;
	background-position: center center;
	height: 500px !important;
}

#indexMainContents{
	width: 100%;
	height: 100%;
	background: url(../images/index/main-bg.png);
	position: relative;
}

/*Main3DTransition///////////////////////////*/
.project {
	width: 100%;
}

.project__image {
  display: block;
  position: relative;
}

.project__image img {
  width: 100%;
  max-width: 100%;
  display: block;
}

.project__image:after {
  content: " ";
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  transition: opacity .3s ease;
  opacity: 0;
}

.project__card {
  position: relative;
  will-change: transform;
}

.project__card.hover-in {
  transition: -webkit-transform .2s ease-out;
  transition: transform .2s ease-out;
  transition: transform .2s ease-out, -webkit-transform .2s ease-out;
}

.project__card.hover-out {
  transition: -webkit-transform .2s ease-in;
  transition: transform .2s ease-in;
  transition: transform .2s ease-in, -webkit-transform .2s ease-in;
}

.project:hover .project__card { }

.project:hover .project__image:after { opacity: 1; }

.project:hover .project__detail {
}

.project:hover .project__title, .project:hover .project__category {
  -webkit-transform: translateY(0) scale(1);
  -ms-transform: translateY(0) scale(1);
  transform: translateY(0) scale(1);
  opacity: 1;
}

.project__detail {
  position: absolute;
  left: 30px;
  right: 30px;
  top: 80px;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  text-align: center;
  pointer-events: none;
  -webkit-transform: translateZ(10px);
  transform: translateZ(10px);
  border: 0 solid #00BCD4;
  transition: border .4s ease;
}

.project__title {
  margin: 120px 0 0px;
  font-size: 36px;
  font-weight: 700;
  transition: .4s ease;
  opacity: 1;
}

.project__category {
  opacity: 1;
  transition: .4s ease;
  transition-delay: .1s;
}

.project__category{
  font-size: 14px;
  color: #000;
}


/*ScrollIcon
----------------------------------------------------------*/
.ScrollIcon{ z-index: 10; position: absolute; top: 460px; left: 50%;	margin-left: -15px;}
.ScrollIcon a {
	padding-top: 40px;
	color: #000;
}
.ScrollIcon a span {
	position: absolute;
	top: -40px;
	left: 50%;
	width: 20px;
	height: 35px;
	margin-left: -10px;
	border: 2px solid #000;
	border-radius: 50px;
	box-sizing: border-box;
}
.ScrollIcon a span::before {
	position: absolute;
	top: 0;
	left: 50%;
	content: '';
	width: 2px;
	height: 6px;
	margin-left: -1px;
	background-color: #000;
	border-radius: 100%;
	-webkit-animation: sdb 2s infinite;
	animation: sdb 2s infinite;
	box-sizing: border-box;
}
@-webkit-keyframes sdb {
	0% {
		-webkit-transform: translate(0, 0);
		opacity: 0;
	}
	40% {
		opacity: 1;
	}
	80% {
		-webkit-transform: translate(0, 15px);
		opacity: 0;
	}
	100% {
		opacity: 0;
	}
}
@keyframes sdb {
	0% {
		transform: translate(0, 0);
		opacity: 0;
	}
	40% {
		opacity: 1;
	}
	80% {
		transform: translate(0, 15px);
		opacity: 0;
	}
	100% {
		opacity: 0;
	}
}

/* Content(Category)
----------------------------------------------------------*/

#indexCategory{
	background: url(../images/index/content-bg.jpg) no-repeat;
	background-size: cover;
	background-position: center top;
	padding: 2em 0;
}
@media (min-width: 40em) {
  #indexCategory{
    padding-top: calc( 2em + 2 * ( 100vw - 40em ) / (60 - 40) );
  }
}
@media (min-width: 60em) {
  #indexCategory{
    padding-top: 3em;
  }
}

/*TextTransition///////////////////////////*/

.indexCategoryText{
	text-align: center;
	color: #FFF;
	padding:0 0  0em;
}

.indexCategoryText p{
	margin:0 0  2.5em;
}

.indexCategoryText a{
	color: #FFF;
	padding: 0.5em 1.5em;
	border: 2px #FFF solid;
	transition: all .2s;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
}

.indexCategoryText a {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
  position: relative;
  overflow: hidden;
}
.indexCategoryText a:before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  border-color: #FFF;
  border-style: solid;
  border-width: 0;
  -webkit-transition-property: border-width;
  transition-property: border-width;
  -webkit-transition-duration: 0.1s;
  transition-duration: 0.1s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.indexCategoryText a:hover:before, .indexCategoryText a:focus:before, .indexCategoryText a:active:before {
  -webkit-transform: translateY(0);
  transform: translateY(0);
  border-width: 4px;
}
.indexCategoryText a:hover{
	box-shadow:0px 5px 10px 2px rgba(0,0,0,0.1);
}

/*CategoryPosition///////////////////////////*/
.indexCategoryWrapper{
	max-width: 1540px;
	margin: 0 auto;
	display: table;
}

.indexCategoryPhoto10{

}

.indexCategoryWrapper img{
	width: 100%;
}

.Category01, .Category02, .Category03, .Category04
{ position: relative;}
.Category01 p, .Category02 p, .Category03 p, .Category04 p{ 
	position: absolute;
	bottom: 0;
	text-align: center;
	color: #FFF;
	font-weight: bold;
	background: rgba(0,0,0,0.7);
	width: 100%;
	padding: 0.5em 0;
}

.leftTable,
.rightTable{
	display: table-cell;
	vertical-align: top;
}
.Colummn01,
.Colummn02{
	display: table-cell;
	padding-right: 29px;
	vertical-align: top;
}

.indexColummn2{
	display: flex;
	display: -webkit-flex;
	margin-bottom: 6%;
}

.indexColummn2 > div{
	margin-right: 7%; 
}
.indexColummn2 > div:last-child{
	margin-right: 0; 
}

.indexColummnNoMargin{
	margin-bottom: 0 !important;
}



.indexCategoryPhoto01, .indexCategoryPhoto05,
.indexCategoryPhoto06, .indexCategoryPhoto07, .indexCategoryPhoto08, .indexCategoryPhoto09, .indexCategoryPhoto10, .indexCategoryPhoto11
{ margin-bottom: 6%;}

.indexCategoryPhoto03
{ margin-bottom: 0;}


.indexCategoryPhoto01{ max-width: 493px;}
.indexCategoryPhoto02{ max-width: 284px;}
.indexCategoryPhoto03{ max-width: 179px; margin-bottom: 11% !important;}
.indexCategoryPhoto04{ max-width: 179px;}
.indexCategoryPhoto05{ max-width: 493px;}
.indexCategoryPhoto06{ max-width: 493px;}
.indexCategoryPhoto07{ max-width: 493px;}
.indexCategoryPhoto08{ max-width: 227px; margin-right: 7.8% !important;}
.indexCategoryPhoto09{ max-width: 227px;}
.indexCategoryPhoto10{ padding-right: 29px;}
.indexCategoryPhoto11{ max-width: 493px;}

/*Main3DTransition///////////////////////////*/

.Category__card a {
  display: block;
}


.Category__card a:after {
  content: " ";
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  transition: opacity .3s ease;
  opacity: 0;
}

.Category__card a {
  position: relative;
  will-change: transform;
}

.Category__card.hover-in {
  transition: -webkit-transform .2s ease-out;
  transition: transform .2s ease-out;
  transition: transform .2s ease-out, -webkit-transform .2s ease-out;
	box-shadow:0px 5px 10px 2px rgba(0,0,0,0.2);
}

.Category__card.hover-out {
  transition: -webkit-transform .2s ease-in;
  transition: transform .2s ease-in;
  transition: transform .2s ease-in, -webkit-transform .2s ease-in;
	box-shadow:0px 5px 10px 2px rgba(0,0,0,0.0);
}

.project:hover .project__card { }

.project:hover .project__image:after { opacity: 1; }

.project:hover .project__detail {
}

.Category__card a:hover {
  -webkit-transform: translateY(0) scale(1);
  -ms-transform: translateY(0) scale(1);
  transform: translateY(0) scale(1);
  opacity: 1;
	box-shadow:0px 5px 10px 2px rgba(0,0,0,0.1);
}



/* *****************************************

BISINESS

***************************************** */

.businessSection01{
	background: url(../images/business/section01_img01bg.png) no-repeat;
	background-size: cover;
	background-position: center center;
	height: 350px;
	padding: 100px 0 0;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
}

.businessSection01 > h3{
	width: 100%;
	text-align: center;
	padding: 30px;
	background: rgba(255,255,255,0.90);
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
}

.businessSection02 {
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	display: flex;
	display: -webkit-flex;
	height: 500px;
	
}

.businessSection02 > div{
	background-size: cover;
	background-position: center center;
	width: 50%;
}

.businessSection02 > div:nth-child(1){
	background: url(../images/business/section02_img01bg.jpg) no-repeat;
	background-size: cover;
    background-position: center center;}

.businessSection02 > div:nth-child(2){
	background: url(../images/business/section02_img02bg.jpg) no-repeat;
	background-size: cover;
    background-position: center center;}

.businessSection02 > div > a{
	height: 100%;
	width: 100%;
	display: block;
	position: relative;
	display: flex;
	display: -webkit-flex;
}

.businessSection02 > div > a:hover{
	background: rgba(0,0,0,0.50);
}

a .businessSection02text{
	top: 180px;
	width: 100%;
	background: rgba(0,0,0,0.50);
	padding: 50px 20px;
	color: #FFF;
	position: absolute;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	text-align: center;
}

a .businessSection02text > h3{
	font-size: 18px;
	padding: 15px 50px;
	background: #000;
	display: inline-block;

}

a .businessSection02text > p{
	font-size: 14px;
}

/* *****************************************

work1

***************************************** */

.sabNavi ul{
  display: flex;
  display: -webkit-flex;
  justify-content: center;
}

.sabNavi ul li{
	border-top: 1px solid #CCC;
	border-left: 1px solid #CCC;
	border-right: 1px solid #CCC;
	border-bottom: 1px solid #CCC;
	width: 25%;
	box-sizing: border-box;
	-wbox-sizing: border-box;
	margin: 0 0 60px;
}

.sabNavi ul li:last-child{
	border-left: none;
}

.sabNavi ul li a{
	display: block;
	text-align: center;
	font-size: 14px;
	text-align: center;
	line-height: 2.2em;
	display: block;
	color: #000;
}

.sabNavi ul li a:hover{
	background: #DDD;
}


.workTitle01{
	background: url(../images/business/work1_titlebg.jpg) no-repeat;
	background-size: cover;
	background-position: center center;
	height: 350px;
	padding: 130px 0 0;
}

.workTitle01 > h3{
	padding: 30px 0;
	background: rgba(0,0,0,0.8);
	text-align: center;
}

.work1H501,
.work1H502,
.work1H503{
	background: url(../images/business/work1_titlebg01.jpg) no-repeat;
	background-size: cover;
	background-position: center center;
	height: 200px;
	padding: 122px 0 0px;
	margin: 0 0 10px;
	position: relative;
	color: #FFF;
	
}
.work1H501{ background: url(../images/business/work1_titlebg01.jpg) no-repeat;}
.work1H502{ background: url(../images/business/work1_titlebg02.jpg) no-repeat;}
.work1H503{ background: url(../images/business/work1_titlebg03.jpg) no-repeat;}


.work1H501 h5,
.work1H502 h5,
.work1H503 h5{
	text-align: center;
	padding: 30px 0;
	background: rgba(0,0,0,0.8);
	font-size: 18px;
}
.work1H501 h5 span,
.work1H502 h5 span,
.work1H503 h5 span{
	font-size: 14px;
	padding-left: 10px;
}

.workText{
	margin: 0 0 60px;
}
.workText ul{
	display: flex;
	display: -webkit-flex;
	margin: 0 0 10px;
}

.workText ul li{
	padding: 3px 10px;
	margin: 0 2px 0 0;
	background: #DDD;
}

.workTableBox{
	margin: 0 0 80px;
}
.workLockTable{
	float: left;
	width: 25%;
}

.workScrollTable{
	float: left;
	width: 75%;
	overflow-y: hidden;
	overflow-x: scroll;
}

.workLockTable table,
.workScrollTable table{
	width: 100%;
	border-top: 1px solid #DDD;
	border-right: 1px solid #DDD;
}

.workLockTable table th,
.workLockTable table td,
.workScrollTable table th,
.workScrollTable table td{
	border-left: 1px solid #DDD;
	border-bottom: 1px solid #DDD;
	padding: 5px;
	text-align: center;
	white-space:nowrap;
}

.workLockTable table th{
	background: #333;
    color: #FFF;
}

.workScrollTable table th{
	background: #666;
    color: #FFF;
}

.workLockTable table .TextTd,
.workScrollTable table .TextTd{
	text-align: left !important;
}

.workScrollTable table tr:nth-child(2n){
	background: #EFEFEF;
}

.workList{
	display: flex;
	display: -webkit-flex;
			align-items: flex-start;
	-webkit-align-items: flex-start;
}
.workListPhoto{
	margin: 0 0 10px;
}

.workList ul.fifty{
	width: 50%;
}


.workCaption{
	border: 1px solid #DDD;
	padding: 20px;
	margin: 0 0 60px;
}


/* *****************************************

work2

***************************************** */


.workTitle02{
	background: url(../images/business/work2_titlebg.jpg) no-repeat;
	background-size: cover;
	background-position: center center;
	height: 350px;
	padding: 130px 0 0;
}

.workTitle02 > h3{
	padding: 30px 0;
	background: rgba(0,0,0,0.8);
	text-align: center;
}

.work2Photo{
	margin: 0 0 50px;
}


/* *****************************************

company

***************************************** */

.CommonTable{
	width: 100%;
	line-height: 1.8em;
}

.CommonTable th,
.CommonTable td{
	padding: 10px 10px 10px 30px;
}

.CommonTable th{
	width: 25%;
	border-bottom: 1px solid #e90039;
}
.CommonTable td{
	width: 75%;
	border-bottom: 1px solid #000;
}

/* *****************************************

contact

***************************************** */


.formBoxS{ width: 25%;}
.formBoxM{ width: 50%;}
.formBoxL{ width: 80%;}

.submitBtn{
	text-align: center;
	margin: 20px auto 0;
	border: none;
	
}

.submitBtn button{
	border: none;
	background: #000;
	color: #FFF;
	font-size: 18px;
	padding: 10px;
	width: 220px;
	-webkit-transition: all 0.2s;
	-moz-transition: all 0.2s;
	-ms-transition: all 0.2s;
	-o-transition: all 0.2s;
	transition: all 0.2s;
}

.submitBtn button:hover{
	background: #e90039;
}




/* *****************************************

market

***************************************** */

.Collumn2{
	display: flex;
	display: -webkit-flex;
			align-items: flex-start;
	-webkit-align-items: flex-start;
}

#SideNavi{
	width: 228px;
	margin: 0 31px 0 0;
}

#marketSide h4{
	width: 100%;
	background: #000;
	color: #FFF;
	font-size: 14px;
	text-align: center;
	line-height: 1.8em;
}

#marketSide ul{
	margin: 0 0 20px;
}

#marketSide ul li{
	border-left: 1px solid #CCC;
	border-right: 1px solid #CCC;
	border-bottom: 1px solid #CCC;
}

#marketSide ul li a{
	font-size: 14px;
	text-align: center;
	line-height: 1.8em;
	display: block;
	color: #000;
}

#marketSide ul li a:hover{
	background: #DDD;
}


#Collumn2Contents{
	width: 743px;
}

#marketHeader > h4 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  text-align: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
	font-size: 18px;
	font-weight: bold;
	margin: 0 0 30px;
}
#marketHeader > h4 span{
	font-size: 14px;
	padding: 0 0 0 10px;
}

#marketHeader > h4:before,
#marketHeader > h4:after {
  content: '';
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  height: 1px;
  background: #ccc;
  min-width: 40px;
  display: inline-block;
  vertical-align: middle;
}
#marketHeader > h4:before {
  margin-right: 40px;
}
#marketHeader > h4:after {
  margin-left: 40px;
}

#marketHeader ul{
  display: flex;
  display: -webkit-flex;
}

#marketHeader ul li{
	border-top: 1px solid #CCC;
	border-left: 1px solid #CCC;
	border-right: 1px solid #CCC;
	border-bottom: 1px solid #CCC;
	width: 25%;
	box-sizing: border-box;
	-wbox-sizing: border-box;
	margin: 0 0 20px;
}

#marketHeader ul li:last-child{
	border-left: none;
}

#marketHeader ul li a{
	display: block;
	text-align: center;
	font-size: 14px;
	text-align: center;
	line-height: 2.2em;
	display: block;
	color: #000;
}

#marketHeader ul li a:hover{
	background: #DDD;
}


#marketMain table{
	width: 100%;
	border-top: 1px solid #CCC;
	border-left: 1px solid #CCC;
}

#marketMain table th,
#marketMain table td{
	padding: 5px;
	font-size: 12px;
	border-right: 1px solid #CCC;
	border-bottom: 1px solid #CCC;
	text-align: center;
	vertical-align: middle;
}

#marketMain table caption{
	text-align: left;
	font-size: 16px;
	line-height: 2.2em;
}

#marketMain table .topHeader{
	background: #000;
	color: #FFF;
}

#marketMain table .secondHeader{
	background: #6e6e6e;
	color: #FFF;
}

#marketMain table .secondHeader .itemName{
	background: #000;
	color: #FFF;
}

#marketMain table  tr.line{
	background: #ffdfdf;
}

#marketMain .red{
	color: #d50000;
}

#marketMain .blue{
	color: #0047bd;
}

#marketMain .gray{
	color: #666;
}

.marketBoxFooter{
	display: flex;
	display: -webkit-flex;
	align-items: flex-end;
	-webkit-align-items: flex-end;
	margin: 20px 0 40px;
}

.marketBoxFooter .note{
	width: 486px;
	margin: 0 31px 0 0;
	text-align: left;
}

.marketBoxFooter .pagetop{
	width: 228px;
}



.marketBoxFooter .pagetop a{
	display: block;
	text-align: center;
	font-size: 14px;
	text-align: center;
	line-height: 2.2em;
	display: block;
	color: #FFF;
	background: #000;
}

.marketBoxFooter .pagetop a:hover{
	background: #666;
}

#marketMain .marketBox{
	margin: 0 auto 0;
	text-align: center;
}
#marketMain .marketBox img{
	margin: 40px auto 0;
}