@charset "utf-8";

/*
Theme Name: テーマ
Version 1.0
*/ 

@import "base.css";

/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  全般設定
　━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/

body{
	padding:0;
	font-family : "メイリオ",Meiryo,Osaka,"ＭＳ Ｐゴシック","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic","MS P Gothic",sans-serif, Arial,Helvetica;
	font-size:16px;
	color:#232323;
	-webkit-text-size-adjust: 100%;
}
#wrapper{
	padding:0;
	width:100%;
	position:relative;
}

/*　header　
----------------------------------------------------------*/
header{
	width:100%;
	height:70px;
	background-color:#e5f0f8;
	padding:7px 0 7px;
	position:fixed;
	top:0;
	z-index:1000;
}
header.index h1{
	width:1100px;
	color:#026cb9;
	font-size:11px;
	line-height:1;
	margin:0 auto 5px;
}
header h1{
	width:1100px;
	color:#026cb9;
	font-size:12px;
	line-height:1;
	margin:0 auto 5px;
}
header.index{
	background-color:#ffffff;
	filter:alpha(opacity=80); /* IE 6と7*/ 
	-ms-filter: "alpha(opacity=80)"; /* IE 8と9 */ 
	-moz-opacity:0.8; /* Firefox , Netscape */ 
	-khtml-opacity: 0.8; /* Safari 1系 */ 
	opacity:0.8;
}
header ul{
	width:1100px;
	margin:0 auto;
}
header ul li{
	width:95px;
	font-size:14px;
	text-align:center;
	line-height:3.5;
	float:left;
}
header ul li:nth-child(1){
	width:320px;
	text-align:left;
	line-height:normal;
}
header ul li:nth-child(2){
	width:70px;
}
header ul li:nth-child(7){
	width:105px;
}
header ul li:nth-child(8){
	width:200px;
	border-left:1px solid #026cb9;
	line-height:normal;
	margin-left:5px;
	padding-left:15px;
}
header ul li:nth-child(8) p{
	border-bottom:1px solid #026cb9;
	color:#026cb9;
	font-size:13px;
	margin-bottom:5px;
}
header ul li:nth-child(8) p.tel{
	border-bottom:0;
}
header ul li a{
	color:#026cb9;
}

#pagetop {
    position: fixed;
    bottom: 20px;
    right: 20px;
}

/*　navi
----------------------------------------------------------*/





/*　footer　
----------------------------------------------------------*/
footer{
	background-color:#e5f0f8;
}
footer .f_inner{
	width:1100px;
	font-size:14px;
	margin:0 auto;
	padding:30px 0;
}
footer .f_inner ul{
	float:left;
}
footer .f_inner ul.f_01{
	margin-right:50px;
}
footer .f_inner ul.f_03{
	float:right;
}
footer .f_inner ul.f_03 li{
	font-size:15px;
}
footer .f_inner ul.f_03 li:nth-child(3) p{
	display:inline-block;
	float:left;
}
footer .f_inner ul li a{
	color:#000000;
}
.copyright{
	background-color:#026cb9;
	color:#ffffff;
	font-size:12px;
	text-align:center;
	padding:5px 0;
}

/*　main　
----------------------------------------------------------*/
a:hover{
	text-decoration:none;	
	filter:alpha(opacity=70); /* IE 6と7*/ 
	-ms-filter: "alpha(opacity=70)"; /* IE 8と9 */ 
	-moz-opacity:0.7; /* Firefox , Netscape */ 
	-khtml-opacity: 0.7; /* Safari 1系 */ 
	opacity:0.7; 
	zoom:1; /*IE*/ 
}
article{
	width:100%;
}
article section{
	width:1100px;
	margin:0 auto;
}

article#ttl01{
	height:330px;
	background-image:url(../img/index/index_business.jpg);
	background-position:center top;
	background-repeat:repeat;
}
.company article#ttl01{
	height:510px;
}
article#ttl01 section .ttl01{
	color:#026cb9;
	font-size:40px;
	font-weight:bold;
	text-align:center;
	margin-bottom:15px;
	padding-top:140px;
}
article#ttl01 section .ttl01 .abc{
	height:20px;
	font-size:18px;
}
article#ttl01 section p{
	text-align:center;
}
.ttl02{
	color:#000000;
	font-size:48px;
    overflow: hidden;
	margin-bottom:40px;
}
.ttl02 .abc{
	height:24px;
	color:#026cb9;
	font-size:24px;
	font-weight:bold;
}
.ttl02 p{
    display: inline-block;
    padding: 0 20px 0 0;
    position: relative;
}
.ttl02 p:after{
    border-top: 1px solid;
	color:#026cb9;
    content: "";
    position: absolute;
    top: 50%;
    width:100px;
}
article section .ttl02 p:after{
    left: 100%;
}
article#works section .ttl02{
	color:#ffffff;
}
article#works section .ttl02 .abc,
article#works section .ttl02 p:after{
	color:#000000;
}
.ttl03{
	color:#ffffff;
	font-size:48px;
	text-align:center;
	margin-bottom:40px;
}
.ttl03 .abc{
	height:30px;
	color:#000000;
	font-size:24px;
	font-weight:bold;
	text-decoration:underline;
	margin-bottom:10px;
}
.ttl03 p{
    height:50px;
}
.ttl04{
	color:#000000;
	font-size:34px;
	text-align:center;
    overflow: hidden;
	margin-bottom:40px;
}
.ttl04 p{
    display: inline-block;
    padding: 0 20px 0 20px;
    position: relative;
}
.ttl04 p:before,
.ttl04 p:after{
    border-top: 1px solid;
	color:#026cb9;
    content: "";
    position: absolute;
    top: 50%;
    width:70px;
}
.ttl04 p:before{
    right: 100%;
}
.ttl04 p:after{
    left: 100%;
}
article#greeting .ttl04{
	color:#ffffff;
}
article#greeting .ttl04 p:before,
article#greeting .ttl04 p:after{
	color:#000000;
}
article#about section .ttl05{
	color:#026cb9;
	font-size:19px;
    position: relative;
	padding-left:17px;
}
article#about section .ttl05:before{
	width:4px;
	height:25px;
	background-color:#026cb9;
    content: "";
    position: absolute;
    left:0;
	top:2px;
}
article.gra_bg{
	background:linear-gradient(-135deg,#6ac6ff,#084db2);
	padding:100px 0;
}
table.table01{
	width:1100px;
	border-top:1px solid #000000;
}
table.table01 th,
table.table01 td{
	border-bottom:1px solid #000000;
	padding:18px 0;
}
table.table01 th{
	width:330px;
	font-weight:bold;
	text-align:center;
	vertical-align:top;
}
table.table01 td p{
	display:inline-block;
}

.business article.gra_bg section #n01,
.business article.gra_bg section #n02,
.business article.gra_bg section #n03,
.business article.gra_bg section #n04,
.business article.gra_bg section #n05,
.business article.gra_bg section #n06,
.business article.gra_bg section #n07,
.business article.gra_bg section #n08{
	margin-top:-130px;
	padding-top:130px;
}

#slide_space{
    text-align:center;
}
@media screen and (max-width: 1100px){
	#slide_space{
		width:1100px;
		margin:0 auto;
	}
}

/*　画像を左から表示
----------------------------------------------------------*/
.img-wrap{
  overflow: hidden;
  position: relative;
}
.img-wrap:before{
  animation: img-wrap 2s cubic-bezier(.4, 0, .2, 1) forwards;
  background: #fff;
  bottom: 0;
  content: '';
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
}
@keyframes img-wrap{
  100% {
    transform: translateX(100%);
  }
}

/*　ふわっと左から表示
----------------------------------------------------------*/
.fuwatAnime {
 -webkit-animation-fill-mode:both;
 -ms-animation-fill-mode:both;
 animation-fill-mode:both;
 -webkit-animation-duration:1.5s;
 -ms-animation-duration:1.5s;
 animation-duration:1.5s;
 -webkit-animation-name: fuwatAnime;
 -ms-animation-name: fuwatAnime;
 animation-name: fuwatAnime;
 visibility: visible !important;

  overflow: hidden;
  position: relative;
}
.fuwatAnime:before  {
  animation: img-wrap 2s cubic-bezier(.4, 0, .2, 1) forwards;
  background: #fff;
  bottom: 0;
  content: '';
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;

}
@-webkit-keyframes fuwatAnime{
 0% { opacity: 0; -webkit-transform: translateX(-20px); }
 100% { opacity: 1; -webkit-transform: translateX(0); }
}
@keyframes fuwatAnime{
 0% { opacity: 0; -webkit-transform: translateX(-20px); -ms-transform: translateX(-20px); transform: translateX(-20px); }
 100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); }
}

/*　トップページ　テキストを左から表示
----------------------------------------------------------*/
@keyframes anime01{
    0%{width:0;height:63px;background-color:#ffffff;}
    100%{width:212px;height:63px;background-color:#ffffff;}
}
@keyframes anime02{
    0%{width:0;height:63px;background-color:#ffffff;}
    100%{width:405px;height:63px;background-color:#ffffff;}
}
@keyframes anime03{
    0%{width:0;height:26px;background-color:#ffffff;}
    100%{width:137px;height:26px;background-color:#ffffff;}
}
@keyframes anime04{
    0%{width:0;height:26px;background-color:#ffffff;}
    100%{width:696px;height:26px;background-color:#ffffff;}
}
@keyframes anime05{
    0%{width:0;height:26px;background-color:#ffffff;}
    100%{width:239px;height:26px;background-color:#ffffff;}
}
.index article#top section .txt01,
.index article#top section .txt02,
.index article#top section .txt03,
.index article#top section .txt04,
.index article#top section .txt05{
    animation-duration:1s;
    animation-timing-function:ease;
    animation-iteration-count:1;
    animation-fill-mode:forwards;
}
.index article#top section .txt01{
    animation-name:anime01;
	margin-top:200px;
}
.index article#top section .txt02{
    animation-name:anime02;
	margin-top:10px;
}
.index article#top section .txt03{
    animation-name:anime03;
	margin-top:30px;
}
.index article#top section .txt04{
    animation-name:anime04;
	margin-top:10px;
}
.index article#top section .txt05{
    animation-name:anime05;
	margin-top:10px;
}

.index article#top section .txt01 p.fadein{
	height:62px;
	padding-left:10px;
}
.fadein span{
    opacity:0;
	color:#000000;
	font-size:58px;
	line-height:1.2;
	letter-spacing:5px;
	display:inline-block;
	height:62px;
}

/*　採用情報　テキストを左から表示
----------------------------------------------------------*/
@keyframes anime11{
    0%{width:0;height:63px;background-color:#ffffff;}
    100%{width:212px;height:63px;background-color:#ffffff;}
}
@keyframes anime12{
    0%{width:0;height:63px;background-color:#ffffff;}
    100%{width:506px;height:63px;background-color:#ffffff;}
}
@keyframes anime13{
    0%{width:0;height:26px;background-color:#ffffff;}
    100%{width:486px;height:26px;background-color:#ffffff;}
}
@keyframes anime14{
    0%{width:0;height:26px;background-color:#ffffff;}
    100%{width:426px;height:26px;background-color:#ffffff;}
}
@keyframes anime15{
    0%{width:0;height:26px;background-color:#ffffff;}
    100%{width:373px;height:26px;background-color:#ffffff;}
}
.recruit article section .txt01,
.recruit article section .txt02,
.recruit article section .txt03,
.recruit article section .txt04,
.recruit article section .txt05{
    animation-duration:1s;
    animation-timing-function:ease;
    animation-iteration-count:1;
    animation-fill-mode:forwards;
}
.recruit article section .txt01{
    animation-name:anime11;
}
.recruit article section .txt02{
    animation-name:anime12;
	margin-top:10px;
}
.recruit article section .txt03{
    animation-name:anime13;
	margin-top:30px;
}
.recruit article section .txt04{
    animation-name:anime14;
	margin-top:10px;
}
.recruit article section .txt05{
    animation-name:anime15;
	margin-top:10px;
}




/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  index.html
　━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
.index article#top{
	height:690px;
	background-image:url(../img/index/index_top.jpg);
	background-position:center top;
	background-repeat:no-repeat;
	padding:120px 0 100px;
}
.index article .top_txt00{
	color:#ffffff;
	font-size:150px;
	font-weight:bold;
	text-align:center;
}
@media screen and (max-width:1400px){
	.index article .top_txt00{
		width:1100px;
		height:180px;
		font-size:118px;
		margin:0 auto;
	}
	.index article#top section .txt01{
	    margin-top:250px;
    }
}

.index article#business{
	background-image:url(../img/index/index_business.jpg);
	background-position:center top;
	background-repeat:repeat;
	padding:100px 0;
}
.index article#about{
	height:424px;
	padding:100px 0;
}
.index article#contact{
	height:280px;
	background-image:url(../img/index/index_contact.jpg);
	background-position:center top;
	background-repeat:repeat;
	padding:100px 0;
}
.index article#works ul li{
	width:260px;
	height:350px;
	background-color:#ffffff;
	float:left;
	margin-right:20px;
	position:relative;
}
.index article#works ul li:nth-child(4){
	margin-right:0;
}
.index article#works ul li img{
	margin:20px;
}
.index article#works ul li .box01{
	width:205px;
	font-size:17px;
	margin:0 5px 0 50px;
}
.index article#works ul li .box01 p{
	border-bottom:1px solid #000000;
	font-size:14px;
	font-weight:bold;
	margin-bottom:5px;
	padding-bottom:5px;
}
.index article#works ul li .ourworks img{
	position:absolute;
	bottom:5px;
	left:5px;
	margin:0;
}
.index article#about ul li{
	width:315px;
	height:260px;
	background-color:#ffffff;
	float:left;
	margin-right:25px;
	padding:15px 17.5px;
	position:relative;
}
.index article#about ul li:nth-child(3){
	margin-right:0;
}
.index article#about ul li img{
	margin:5px 0 10px;
}
.index article#about ul li p{
	font-size:15px;
}
.index article#works ul li .plus,
.index article#about ul li .plus{
	width:60px;
	height:60px;
	background-image:url(../img/index/index_plus.png);
	background-position:right bottom;
	background-repeat:no-repeat;
	color:#ffffff;
	font-size:35px;
	text-align:right;
	position:absolute;
	bottom:5px;
	right:5px;
}
.index article#works ul li .plus img,
.index article#about ul li .plus img{
	position:absolute;
	bottom:5px;
	right:5px;
	margin:0;
}
.index article#contact .txt01{
	color:#ffffff;
	font-size:19px;
	font-weight:bold;
	text-align:center;
}
.index article#contact ul{
	width:650px;
	margin:30px auto 0;
}
.index article#contact ul li{
	float:left;
}
.index article#contact ul li:nth-child(1){
	margin-right:50px;
}

/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  business.html
　━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
.business .box01{
	margin-bottom:60px;
	position:relative;
}
.business .num{
	width:85px;
	height:50px;
	border-bottom:1px solid #000000;
	color:#000000;
	font-size:45px;
	font-weight:bold;
	line-height:1;
	position:absolute;
	top:120px;
	left:-65px;
}
.business .txt01{
	width:460px;
	height:275px;
	background-color:#ffffff;
	line-height:1.7;
	float:left;
	padding:50px 45px;
}
.business .txt01 p{
	color:#026cb9;
	font-size:20px;
	font-weight:bold;
	margin-bottom:25px;
}
.business .box01 img{
	float:left;
}
.business .mb_0{
	margin-bottom:0;
}

/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  works.html
　━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
.works ul li{
	width:324px;
	height:454px;
	background-color:#ffffff;
	float:left;
	margin-bottom:50px;
	padding:13px;
}
.works ul li:nth-child(3n+1),
.works ul li:nth-child(3n+2){
	margin-right:25px;
}
.works ul li:nth-child(10),
.works ul li:nth-child(11),
.works ul li:nth-child(12){
	margin-bottom:0;
}
.works ul li table{
	width:324px;
}
.works ul li table th,
.works ul li table td{
	border-bottom:1px solid #000000;
}
.works ul li table th{
	width:85px;
	font-weight:bold;
	text-align:center;
	line-height:1.4;
	padding:15px 0;
}
.works ul li table td{
	padding:15px 0 15px 20px;
}
.works ul li table tr:last-child th,
.works ul li table tr:last-child td{
	border-bottom:0;	
}
.works article.list{
	padding:100px 0;
}
.works article.list table{
	width:1100px;
	border-left:1px solid #000000;
	border-collapse:separate;
}
.works article.list table th,
.works article.list table td{
	border-bottom:1px solid #000000;
	border-right:1px solid #000000;
	text-align:center;
	padding:15px 0;
}
.works article.list table th{
	width:264px;
	border-top:1px solid #000000;
	font-weight:bold;
    line-height:1.4;
}
.works article.list table th:nth-child(1){
	width:303px;
}

/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  company.html
　━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
.company article.gra_bg{
	padding:205px 0 100px;
}
.company article.gra_bg section{
	position:relative;
}
.company article.gra_bg section img{
	position:absolute;
	top:-385px;
}
.company article.gra_bg section .box01{
	padding-top:30px;
}
.company article.gra_bg section .box01 ul li{
	width:520px;
	color:#ffffff;
	float:left;
}
.company article.gra_bg section .box01 ul li:nth-child(1){
	margin-right:60px;
}
.company article.gra_bg section .box01 ul li p{
	font-size:18px;
	text-align:right;
	margin-top:40px;
	padding-right:5px;
}
.company article.gra_bg section .box01 ul li p span{
	font-size:20px;
}

.company article#outline{
	padding:100px 0 0;
}
.company article#access{
	padding:100px 0;
}
.map{
	max-width:1280px;
	min-width:1100px;
	margin:0 auto;
}

/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  recruit.html
　━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
.recruit article.gra_bg section{
	height:420px;
	background-image:url(../img/recruit/recruit_img01.jpg);
	background-position:right top;
	background-repeat:no-repeat;
}
.recruit article.recruit_img02{
	height:332px;
	background-image:url(../img/recruit/recruit_img02.jpg);
	background-position:center top;
	background-repeat:no-repeat;
}
.recruit article#recruitment{
	padding:100px 0;
}