@charset "utf-8";

/* TOPcss
-------------------------------------------------- */
.content-top { overflow: hidden;}
.content-top .txt-01{ margin-bottom: 25px;}
.box-top-h2 { margin-bottom: 25px;}
.box-top-h2 h2 { display: inline-block; color: #1f328c; font-weight: bold; font-size: 1.5rem;}
.box-top-h2 h3 { font-weight: 400; }

/*.bd-sub 
=====================*/
.bd-sub { position: absolute; top: 0;  left: 0; -webkit-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; font-size: 10px; padding-top: 35px; z-index: 1;  -webkit-transform: translateX(-3px);  transform: translateX(-3px);
 color: rgba(31, 50, 140, 0); -webkit-transition: color .5s .25s; transition: color .5s .25s;}
.bd-sub:before { content: "";  position: absolute;  width: 1px;  height: 0; top: 0;  left: 3px;  background: #1f328c;  -webkit-transition: height .3s;  transition: height .3s;}
.bd-sub.scrollin { color: rgba(31, 50, 140, 1);}
.bd-sub.scrollin:before {height: 30px;}
.wrp-top_service .bd-sub { left: 93px;}
.wrp-top_about .bd-sub { left: 93px; top: -50px;}
.wrp-top_news .bd-sub { top: -30px; left: 50%;}


/*video
======================*/
.wrp-top_main { position: relative;  height:100vh; overflow: hidden; z-index: 0; }
.wrp-top_mv { margin:0 1% 1% 1%; position: relative;z-index: 0; }
.pic-top_mv { width: auto;  height: 100% ;   position: absolute;  right: -170px;z-index: 0;}
.pic-top_mv img { height: 100%; width: auto;z-index: 0;}


/* wrp-top_main
======================*/
.wrp-top_main:before { content: ''; background: #f2f6f9; width: 100%; height: 100%;   display: block; position: absolute; top: 290px; left: 0; z-index: -1;}
.img-top_main { margin:30px 10px;}
.box-top_main { position: relative; padding: 0 25px 70px; margin-top: -20px;  }



/*wrp-projects
======================*/
.wrp-projects { position: relative; padding:0 0  3em 0;   }
.wrp-projects:before { content: ''; background: #f2f6f9; width: 100%; height: 100%; display: block; position: absolute; top: 0; left: 0; z-index: -1;}
.wrp-projects .box-top-h2{ text-align: center; display: flex; flex-wrap: wrap;  flex-flow:column;    align-content: center; justify-content: center; }
.projects{width: 100%; margin: auto auto 5% auto;    display: flex; flex-wrap: wrap; flex-grow: row;  align-content: center; justify-content: center; }
.projects li { width:100%;  max-width:100%;  height: auto; display: block; margin:0 auto;  padding:0px;    position: relative;  transition: all 0.4s ease-in-out;  -webkit-transition: all 0.4s ease-in-out;  -moz-transition: all 0.4s ease-in-out; }
.projects li:hover{ transform: scale(1.05) ; background: #fff; box-shadow: 0px 5px 8px rgba(0,0,0,.1) }
.projects li figure{ width:100%;  max-width:100%;  display: block; }
.projects li figure img{ position: relative;  z-index: 1;   width:100%;  max-width: 100%; height: auto; transition: all 0.4s ease-in-out;  -webkit-transition: all 0.4s ease-in-out;  -moz-transition: all 0.4s ease-in-out;}
.projects li:hover figure img{  transform: scale(1.1) translateY(-20px); }
.projects a h4{   font-size:1rem;  color: #fff;  text-align: left;  -webkit-transition: all .5s .6s ease; transition: all .5s .6s ease;}
.projects a p{ max-width:100%;  display: block; margin: auto; font-size:.9rem; line-height:1.15rem; color: #fff; text-align: left;    }
.title-wrap{ width: 80%; margin-top: -100px; min-height: 120px;   padding:10px 20px;  word-wrap: break-word; display: block; position: absolute;  z-index: 999; background: #1f328c; opacity:1; }
.projects li:hover .title-wrap{ display: block;}



/*.contact
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
.wrp-top_contact{ position: relative; padding:50px 0px;  background-image: url(../images/index/map-color.png),url( ../images/index/map.jpg);  background-size:30% auto,70% auto;  background-repeat: no-repeat; background-attachment: inherit; background-position: right top, left bottom; }
.box-contact { position: relative; padding: 85px 25px; }
.box-contact .txt-contact {  margin: 25px 0 0;  line-height: 1.4; font-size: 14px; color: #444;  letter-spacing: 0.08em;}
.lst-tel {  margin: 5px 0 0;}
.lst-tel li {  padding: 15px 0 0; font-size: 15px; font-weight: 700; color: #1f328c; letter-spacing: 0.08em;}
.box-contact .btn-contact { margin: 25px 0 0;}
.box-contact .btn-contact a { display: block; padding: 25px 5px;  background: url(../images/icon/email.svg)  no-repeat 5px 20px  #1f328c;  background-size:50px auto;  color: #fff; font-size: 1rem;  text-align: center;  text-decoration: none;  font-weight: 700;  letter-spacing: 0.14em;}





@media screen and (min-width: 590px){
	.pic-top_mv {  right: 0; }
}

@media screen and (min-width: 768px), print{
	.content-top .txt-01{ margin-bottom: 30px;}
	.box-top-h2 { margin-bottom: 60px;}
	.box-top-h2 h2 {  font-size:4rem; }
	.box-top-h2 .number {  font-size: 12px; padding-left: 5px;}
	.bd-sub {  font-size: 15px;  padding-top: 70px;  -webkit-transform: translateX(-5px);   transform: translateX(-5px);}
	.bd-sub:before { width: 2px;   top: 0; left: 5px;}
	.bd-sub.scrollin:before {  height: 60px;}
	.wrp-top_service .bd-sub { top: -2px;  left: 56%; }
	.wrp-top_about .bd-sub { top: -100px;  left: 56%;}
	.wrp-top_news .bd-sub { top: -60px; left: 50%;}
	
	
	
/*video
=================================*/	
	.wrp-top_main { height:100%; z-index: 0; }
	.wrp-top_mv { margin:-15% 1% 1% 1%; position: relative;z-index: 0; overflow: hidden; }
	.pic-top_mv { width: 100%; position: relative; top: auto; right: auto;}
	 .pic-top_mv video { width: 100%;   display: block; z-index: 0;  transform: scale(1.1); }
	.wrap-mv:after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url( ../images/video-overlay.png) left top repeat;}	

/*	.wrp-projects
========================*/
	
	.wrp-projects{ padding:10em 0 ; background-image: url(../images/index/about-01.png); background-repeat: repeat; background-attachment: inherit; background-position: left top; }
   .wrp-projects:before  { top: 0px; left:56%;}

/*wrp-top_main
=================================*/
.wrp-top_main:before { content: ''; background: #f2f6f9; width: 50%;   display: block; position: absolute; top: 0px;  left: 0px; }
.img-top_main { margin-left: 0; position: absolute; right:0px; top:0%; width:50%;}
.box-top_main {width: 96%;  max-width: 800px;margin: 0 auto; padding: 120px 10px 100px 0px;}
.box-top_main .txt-01 { max-width: 480px; background-color:transparent; margin:20px 0 40px 0;  color: #000; font-weight: 500; font-size: 1.5rem;  }
	
/*.contact
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
.wrp-top_contact{ padding:0 0 10em 0;   background-position: right top,left bottom;  background-size:25% auto, 60% auto }
.box-contact {  margin: 0 auto;  padding: 175px 10px 0; max-width: 1140px;  box-sizing: border-box;}
.box-contact .txt-contact {  margin: 65px 0 0;  line-height: 1.4; font-size: 16px;}
.lst-tel {  margin: 35px 0 0;}	
.lst-tel li { display: inline-block;  padding: 0 35px 0 0;   font-size: 16px;}	
.box-contact .btn-contact {   margin: 27px 0 0;}	
.box-contact .btn-contact a {  padding: 30px 10px;  font-size: 22px; position: relative;  overflow: hidden;  z-index: 0; background: url(../images/icon/email.svg)  no-repeat 10% 10px  #1f328c;  background-size:70px auto; }	

	
}

@media screen and (min-width: 1400px){
		.wrp-top_about:after { content: ''; display: block; width: 60px; height: 2px; background: #1f328c; position: absolute; top: 184px; left: 5%;}
		.wrp-top_mv { margin:-15% 1% 1% 1%; position: relative;z-index: 0; }
	 .pic-top_mv video {  transform: scale(1.5); }
}


/* video text animation 
-------------------------------------------------- */
.catch-top_mv{ position: absolute; top:-60%; left: 120px; transform: translateY(-60%); z-index: 1; width: 780px; height: 290px; overflow: hidden;}

@media screen and (min-width: 1400px){
.catch-top_mv{   top:60%; left: 120px; transform: translateY(-60%); }
	
}

@media screen and (max-width: 1095px){
	.catch-top_mv{ transform: translateY(-50%) scale(0.7); left: -60px;}
}
@media screen and (max-width: 767px){
	.catch-top_mv{ top:0%;  transform:translateY(10%) scale(0.35); left: -160px;}
}
.catch-top_mv > h1{ color: #fff; font-weight: 700; line-height: 1; vertical-align: top; position: absolute; opacity: 0; overflow: hidden;}
.catch-top_mv > h1 > span{opacity: 0; display: inline-block;}
.catch-top_mv > h1 > span.anim{ -webkit-animation: animMainVisual .5s ease forwards; animation: animMainVisual .5s ease forwards;}
.catch-top_mv > p{ color: #fff; font-weight: 700; line-height: 1; vertical-align: top; position: absolute; opacity: 0; overflow: hidden;}
.catch-top_mv > p > span{opacity: 0; display: inline-block;}
.catch-top_mv > p > span.anim{ -webkit-animation: animMainVisual .5s ease forwards; animation: animMainVisual .5s ease forwards;}
@keyframes animMainVisual {
    0% {
        opacity: 0;
        transform: translateY(100%);
    }
    100% {
        opacity: 1;
        transform: none;
    }
}
@-webkit-keyframes animMainVisual {
    0% {
        opacity: 0;
        -webkit-transform: translateY(100%);
    }
    100% {
        opacity: 1;
        -webkit-transform: none;
    }
}
.catch-top_mv .txt01{ font-size:80px;   top: 0px; left: 0;}
.catch-top_mv .txt02{ font-size: 42px; transform: rotate(90deg) scaleX(0.8); letter-spacing: 0.06em; top: -7px; right: -24px}
.catch-top_mv .txt03{ font-size: 56px;   top: 54%; left: 0; overflow: visible;}
.catch-top_mv .txt04{ font-size: 64px;  top: 54%; left: 160px;}
.catch-top_mv .txt03:after{ content: ''; display: block; background: #fff; height: 16px; width: 0; position: absolute; bottom: -25px; left: 0; -webkit-transition: .3s .1s ease; transition: .3s .1s ease;}
.catch-top_mv.anim .txt03:after{ width: 95%;}
/*.catch-top_mv:after{ content: ''; display: block; background: #fff; height: 0; width:22px; position: absolute; left: 0px; top: 0; -webkit-transition: .5s .2s ease; transition: .5s .2s ease;}
.catch-top_mv.anim:after{ height: 100%;}
.catch-top_mv h1{ padding: 0;  transform: none; position: absolute; bottom: 0;  right: 0;  top: auto; left: auto; z-index: 1; -webkit-transition: .5s .4s ease; transition: .5s .4s ease; opacity: 0;}
.catch-top_mv.anim h1{ opacity: 1;}*/
.catch-top_mv h1 img{ width: auto;}



@media screen and (max-width: 480px){
.title-wrap{ margin-top: -120px; opacity: 0.7; }
	
}