@charset "utf-8";
/* CSS Document */

html{background:#000;}

/* header */
#top header{ background:rgba(255,255,255,0); -webkit-box-shadow: 0px 1px 0px rgba(0,0,0,0); -moz-box-shadow: 0px 1px 0px rgba(0,0,0,0); box-shadow: 0px 1px 0px rgba(0,0,0,0);} 
#top header.fixed{ background:rgba(255,255,255,1); z-index:3; -webkit-box-shadow: 0px 1px 0px rgba(0,0,0,0.07); -moz-box-shadow: 0px 1px 0px rgba(0,0,0,0.07); box-shadow: 0px 1px 0px rgba(0,0,0,0.07); box-sizing:border-box; position: fixed;} 
#top header h1 img{ height: 40px; width:auto; -webkit-filter: brightness(0) invert(1); -moz-filter: brightness(0) invert(1); -o-filter: brightness(0) invert(1); -ms-filter: brightness(0) invert(1); filter: brightness(0) invert(1);}
#top header nav li a{ color:#fff;}
#top header nav li a:hover{color:#004098;}
#top header.fixed h1 img{ -webkit-filter: brightness(1); -moz-filter: brightness(1); -o-filter: brightness(1); -ms-filter: brightness(1); filter: brightness(1);}
#top header.fixed nav li a{ color:#333;}
#top header.fixed nav li a:hover{color:#004098;}


/* slide */
.sm-slider li div {transform: scale(1) !important; bottom: 0 !important;}
.sm-slider li div h3{ font-size:72px; font-size: 7.2rem; font-family: "Josefin Sans script=all rev=1" , sans-serif; font-weight:600; font-style: italic; text-align: right; padding-right: 40px; padding-bottom: 40px; line-height: 1; letter-spacing:0.4rem; opacity: 0.9; filter: alpha(opacity=90); -moz-opacity: 0.9; -ms-filter: "alpha(opacity=90)"; }
.sm-slider li div h3 p{ font-size:24px; font-size: 2.4rem; font-family: 'Yu Mincho', YuMincho, YuMinchoWin7,"ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "メイリオ", "HG明朝E", "ＭＳ Ｐ明朝", serif; letter-spacing:0.4rem;  }

#slide{ min-height:100%; width:100%; height:100%;}
.slide{ min-height:100%; width:100%; z-index:2; background-position:top center; position:relative;}
#slide #scroll{ position:absolute; left:50%; margin-left:-15px; bottom:5%;}
#slide #scroll img{ width:30px; height:auto;}
#top h2{font-size:30px; font-size:3.0rem; margin-bottom:40px; letter-spacing:0.2rem;}
#top .onebox h3{ font-family: 'Josefin Sans', sans-serif; font-weight:normal; font-size:40px; font-size:4.0rem; color: #004098; margin-bottom:60px; letter-spacing:0.2rem;}
#top .onebox h3 span{ display:block; font-size:15px; font-size:1.5rem; font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue","游ゴシック Medium",YuGothic,YuGothicM,"Hiragino Kaku Gothic ProN",メイリオ,Meiryo,sans-serif; font-weight: 600;}

#content{ padding-top:0;}


footer { border-top: none; }


/* lead */
#lead { padding:80px 0; /* margin-top: -80px; */}
#lead h2{ font-weight:600; margin-right: -2rem;}
#lead p{ font-size:15px; font-size:1.5rem; line-height:2.4; margin-bottom: 0;}
#lead .btn { margin-top:60px;}
#lead .btn a{ box-sizing:border-box; display:inline-block; color:#fff; border:2px solid #fff; background:url(../common/arrow_white.png) right 40px center no-repeat #004098; background-size:10px 16px; font-weight:normal;}
#lead .btn a:hover{ color:#004098; border:2px solid #fff; padding:15px 40px 15px 20px; background:url(../common/arrow.png) right 20px center no-repeat #fff; background-size:10px 16px; line-height:1; font-weight:bold;}


/* service */
#service { padding-top:80px; padding-bottom:80px;}
#service h3{}
#service .onebox{ width:100% !important; max-width: 100% !important;}
#service ul{ margin-bottom:60px;}
/* #service li{ float:left; width:33.3%; padding:0 20px 40px; box-sizing:border-box;} */
#service li{ float:left; width:33%; padding:0 0 0.5%; box-sizing:border-box;}
#service li:nth-child(2) , #service li:nth-child(5){ margin-left: 0.5%; margin-right: 0.5%;}
#service li:nth-child(4) , #service li:nth-child(5) , #service li:nth-child(6) { padding-bottom: 0;}

#service li img{ width:100%;}
#service li:last-child{ margin-right:0;}
#service li h4{ background:#004098; color:#fff; text-align:center; margin:0 auto; padding:15px 0; line-height:1; font-size:15px; font-size:1.5rem; }
#service li h4{
	position: relative;
	display: inline-block;
 	width: 100%;
}
#service li h4:before{content: "";
	position: absolute;
	top: -20px;
	left: 50%;
 	margin-left: -10px;
	border: 10px solid transparent;
	border-bottom: 10px solid #004098;}


/* works */
#works { padding-top:80px; padding-bottom:60px;}
#works .onebox{ width:100%; max-width:100%;}
#works .slick-list li{ float:left; width:25%; padding:0 20px; box-sizing:border-box; margin-bottom:20px;}
#works .slick-list li a { display:block; background:#004098; position:relative;}
#works .slick-list li a img{ width:100%; height:auto;}
#works .slick-list li a:hover img{ opacity: 0.3; filter: alpha(opacity=30); -moz-opacity: 0.3; -ms-filter: "alpha(opacity=30)";}
#works .slick-list li a h4{ color:#fff; font-size:15px; font-size:1.5rem; text-align:center; position:absolute; top:50%; width:100%; margin-top:-1.5rem; opacity: 0; filter: alpha(opacity=0); -moz-opacity: 0; -ms-filter: "alpha(opacity=0)"; -webkit-transition: 0.2s ease-in-out; -moz-transition: 0.2s ease-in-out; -o-transition: 0.2s ease-in-out; transition: 0.2s ease-in-out;}
#works .slick-list li a:hover h4{ color:#fff; font-size:15px; font-size:1.5rem; text-align:center; position:absolute; top:50%; width:100%; margin-top:-1.5rem; opacity: 1; filter: alpha(opacity=100); -moz-opacity:1; -ms-filter: "alpha(opacity=100)";}

#works #sliderList{ margin-bottom:60px;}



/* ふわふわさせたいものに fuwafuwaクラスを付与 */
#scroll {
	-webkit-animation-name:fuwafuwa; /* fuwafuwaっていうアニメーションをしてね！ */
	-webkit-animation-duration:2s;
	-webkit-animation-iteration-count:infinite;
	/*-webkit-animation-direction:alternate;*/
	-webkit-animation-timing-function:ease;
	
	-moz-animation-name:fuwafuwa;
	-moz-animation-duration:2s;
	-moz-animation-iteration-count:infinite;
	/*-moz-animation-direction:alternate;*/
	-moz-animation-timing-function:ease;
}
/* fuwafuwaっていうアニメーションはこんなふうだよ！ */
@-webkit-keyframes fuwafuwa {
	0% {-webkit-transform:translate(0, 0);}
	50% {-webkit-transform:translate(0, -10px);}
	100% {-webkit-transform:translate(0, 0);}
}
@-moz-keyframes fuwafuwa {
	0% {-moz-transform:translate(0, 0);}
	50% {-moz-transform:translate(0, -10px);}
	100% {-moz-transform:translate(0, 0);}
}


@media screen and (min-width:481px){
}

@media screen and (orientation:landscape) {
}

@media screen and (max-width:480px){
	#top header.open{ background: rgba(0,0,0,0.5); border-bottom: 1px solid rgba(255,255,255,0.2);}
	#top header #nav-toggle span{ background: #fff;}
	#top header.fixed #nav-toggle span{ background: #004098;}
	.sm-slider li div{ bottom:42% !important; transform: scale(1) !important;}
	.sm-slider li div h3{ font-size:48px; font-size: 4.8rem; text-align: right; padding-right: 10px; padding-bottom: 0; line-height: 1.2; opacity: 0.9; filter: alpha(opacity=90); -moz-opacity: 0.9; -ms-filter: "alpha(opacity=90)"; }
	.sm-slider li div h3 p{ font-size:18px; font-size: 1.8rem; text-align: right; }
	#top h2{ margin-bottom:30px; }
	#lead , #service , #works{ padding:40px 0;}
	#top .onebox h3{ margin-bottom:30px; font-size:30px; font-size: 3.0rem;}
	#top .onebox h3 span{ font-size: 12px; font-size: 1.2rem;}
	#lead h2{ font-size:24px; font-size:2.4rem;}
	#lead h2{ margin-right: -1rem;}
	#lead .btn { margin-top:30px;}
	#lead p { font-size: 14px; font-size: 1.4rem; line-height: 2.4; overflow-wrap:break-word;
word-wrap:break-word;}
	
	#company .left , #company .right{ width:100%;}
	p{ text-align:left;}
	#top #content{ padding:0;}

	#company .right dl{ margin-left:0;}
	#service li{ float:left; width:50%; margin:0; padding:0 0 1%; box-sizing:border-box;}
	#service li:nth-child(odd){ padding:0 1% 2% 0;}
	#service li:nth-child(even){ padding:0 0 2% 1%;}
	#service li img{ width:100%; height:auto;}
	#service li dt{ font-size:13px; font-size:1.3rem;}
	#service li dd{ font-size:12px; font-size:1.2rem;}
	#service , #works , #company { padding-top:40px;}
	#service li{ margin: 0 !important;}
	#service .onebox { padding: 0;}
	#service .onebox .btn , #works .onebox .btn{ margin-left: 5%; margin-right: 5%;}
	#service li h4{ padding:10px; font-size:12px; font-size:1.2rem; box-sizing: border-box; line-height: 1.5;}
	#service li h4:before{ top: -16px; margin-left: -8px; border: 8px solid transparent; border-bottom: 8px solid #004098;}
	#service ul { margin-bottom: 30px;}
	
	#works .onebox{ width:100%; padding: 0;}
	#works .slick-list{ padding-left: 5px; padding-right: 5px; box-sizing: border-box; width: 100%;}
	#works .slick-list li { padding: 0 5px; margin-bottom: 20px; }
	#works .slick-list li a { display: block; background: none; position: inherit; }
	.slick-dots{ box-sizing: border-box; width: 100% !important;}
	#works .slick-list li a h4 { color: #004098; font-size: 0.7rem; text-align: center; position: inherit; top:auto; width: 100%; margin-top:10px; opacity: 1; filter: alpha(opacity=100); -moz-opacity: 1; -ms-filter: "alpha(opacity=100)"; }
	#works .slick-list li a:hover h4{ color:#004098; font-size:12px; font-size:1.2rem; position:inherit; top:auto; width:auto; margin-top:10px;}
	
}

@media screen and (max-width:320px){
	.sm-slider li div h3{ font-size:40px; font-size: 4.0rem;}
	.sm-slider li div h3 p{ font-size:15px; font-size: 1.5rem;}


}