/* ========================================
   page.css
   元ファイル: /home/claude/site_src/page.css
======================================== */
@charset "utf-8";

main {
	padding: 0 40px;
}
.bx-viewport {
	left: 0;
	box-shadow: none;
	border: none;
}
.menu_title {
	cursor: pointer;
}
.menu_title:hover {
	color: #22ac38;
}
/* ===== slider===== */


#slider01 {
	position: relative;
	height : 90vh;
	height : -webkit-calc(100vh - 125px);
	height : calc(100vh - 125px );
}
#slider01 > div {
	background-position: center bottom;
	background-repeat: no-repeat;
	background-size: cover;
	color: #fff;
	width: 100%;
	height: 100%;
	position: relative;
}
#slider01 > div span {
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	color: #fff;
	width: 100%;
	height: 100%;
	display: block;
}
#slider01 li {
	height : -webkit-calc(100vh - 125px);
	height : calc(100vh - 125px);
	background: center / cover no-repeat;
}
#s01 span {
	background-image: url(../images/top/main_slider03.jpg);
	background-position: top right 26%!important;
}
#s02 span {
	background-image: url(../images/top/main_slider09.jpg?221121);
	background-position: top center!important;
}
#s03 span {
	background-image: url(../images/top/main_slider10.jpg?221121);
	background-position: top right 47%!important;
}
#s04 span {
	background-image: url(../images/top/main_slider08.jpg);
}



#slider01 p {
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	font-weight: bold;
	font-size: 2rem;
	line-height: 1.4;
	padding: 20px;
	position: absolute;
	top: 42%;
	z-index: 1;
	-moz-text-shadow: 2px 1px 12px rgba(0, 0, 0, 0.5);
	-webkit-text-shadow: 2px 1px 12px rgba(0, 0, 0, 0.5);
	-ms-text-shadow: 2px 1px 12px rgba(0, 0, 0, 0.5);
	text-shadow: 2px 1px 12px rgba(0, 0, 0, 0.5);/*color:#22ac38;
*/}
#slider01 #s02 p {
	top: 60%;
}
#slider01 #s03 p {
	top: 5%
}
#slider_box {
	position: relative;
	width: 100%;
}
#scroll {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 7%;
	width: 129.5px;
	margin: 0 auto;
	z-index: 99;
}
#scroll img {
	zoom: 0.8;
}
.bounce {
	-webkit-animation-name: bounce;
	-webkit-animation-duration: 1.5s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: ease-in-out;
	-moz-animation-name: bounce2;
	-moz-animation-duration: 1.5s;
	-moz-animation-iteration-count: infinite;
	-moz-animation-timing-function: ease-in-out;
}
@-webkit-keyframes bounce {
 from {
-webkit-transform:translate(0, 0px);
}
 50% {
-webkit-transform:translate(0, 12px);
}
 to {
-webkit-transform: translate(0, 0px);
}
}
 @-moz-keyframes bounce2 {
 from {
-moz-transform:translate(0, 0px);
}
 50% {
-moz-transform:translate(0, 12px);
}
 to {
-moz-transform: translate(0, 0px);
}
}
#scroll {
	-webkit-transition: all 0.2s ease;
	transition: all 0.2s ease;
}
section {
	margin-top: 100px;
}
/* ===== news===== */
#main_img {
	position: relative;
}
#news {
	color: #fff;
	font-size: 13px;
	background: rgba(0,0,0,0.6);
	padding: 10px 0 10px 2%;
	z-index: 90;
	position: relative;
	top: -41px;
	overflow: hidden;
}
#news a {
	color: #fff;
	text-decoration: underline;
}
#news span {
	font-size: 14px;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	margin-right: 10px;
}
div.ticker ul {
	height: 1.6em;
	overflow: hidden;
}
div.ticker ul li {
	float: left;
	display: inline;
	clear: both;
	text-align: left;
	list-style-type: none;
	position: relative;
	line-height: 1.6em;
	margin-bottom: -1.6em;
}

/* ===== business===== */
#main h2 span.sub {
	font-family: Shin Go Bold;
	font-size: 18px;
	color: #8e8e8e;
	margin-left: 20px;
}
#main h2 span.col_g {
	font-family: Shin Go Bold;
	font-size: 18px;
	color: #8e8e8e;
	margin-left: 20px;
}
#business {
	/*	margin-top:120px;
*/
	margin-top: 200px;
}
.right h2, .right_box {
	float: right;
	width: 48%;
}
.slider_box {
	width: 48%;
	float: left;/*position:absolute;
left:0;
top:0;*/}
.slider_box li img {
	width: 100%;
}
#main .btn {
	font-size: 18px;
	font-weight: bold;
	background: #22ac38 url(../images/common/arrow03.png) no-repeat 95% 50%;
	background-size: 15px;
	margin-left: 50%;
	color: #fff;
	padding: 20px 0 20px 30px;
}
.right p {
	margin: 60px 0 30px 0;
}
.right .link {
	margin: 40px 0 0 0;
	text-align: center;
}
.right .link li {
	transition: background-color 0.5s linear;
	margin: 10px 0;
	border: solid 1px #000;
	background: url(../images/common/arrow02.png) no-repeat 95% 50%;
	background-size: 15px;
}
.right .link li:hover {
	background: #22ac38 url(../images/common/arrow03.png) no-repeat 95% 50%;
	background-size: 15px;
}
.right .link li:hover a {
	color: #fff;
}
.right .link li a {
	padding: 18px 0;
	display: block;
}
/* ===== company===== */
#company {
	position: relative;
	margin-top: 160px;
}
#company h2 {
	text-align: center;
	padding-top: 210px;
}
#bg3 {
	height: 350px;
	background: url(../images/top/company_bg2.jpg) no-repeat 0 0;
	background-size: cover;
}
/* ===== works===== */
#works h2 {
	width: 30%;
	float: left;
	padding: 80px 0;
}
#works .right li {
	display: inline-block;
	background-size: 100%!important;
	width: 48%;
}
#works .right {
	padding: 0 0 0 35%;
}
#works .right li a {
	display: block;
	padding: 100px 0;
}
#works .right li span {
	padding: 30px 40px 20px 10px;
	background: rgba(0,0,0,0.6) url(../images/common/arrow03.png) no-repeat 95% 50%;
	background-size: 10px;
}
#works .right li:nth-child(1) {
	background: url(../images/top/works_01_bg.jpg) no-repeat 50%;
}
#works .right li:nth-child(2) {
	background: url(../images/top/works_02_bg.jpg) no-repeat 50%;
	margin-left: 3.5%;
}
/* ===== recruitment===== */

#slidebox {
	float: left;
	width: 48%;
}
.slider_box2 {
	width: 50%;
	float: left;
}
#recruitment {
	margin-top: 240px;
}
/*#recruitment .btn_box{
margin-top:150px;}
*/
#recruitment .right .link li:hover {
	background: #00479d url(../images/common/arrow03.png) no-repeat 95% 50%;
	background-size: 15px;
}
.right .link li.btn02 {
	transition: opacity 0.5s;
	background: #00479d url(../images/common/arrow03.png) no-repeat 95% 50%!important;
	background-size: 15px!important;
	display: block;
	opacity: 1;
}
.right .link li.btn02 a {
	color: #fff;
	font-weight: bold;
}
.right .link li.btn02:hover {
	opacity: 0.6;
}
.slider1 img, .slider2 img {
	width: 100%!important;
}
.slideArea, .slider1 div, .slider2 div {
	width: 50%!important;
	height: 23vmin!important;
	float: left;
}
.slider1 div, .slider2 div {
/*width:50%!important;
height:25vmin!important;
float:left;*/	}
footer {
	margin-top: 120px;
}

@media screen and (max-width:1450px) {
#works .right li {
	width: 47%;
}
}

@media screen and (max-width:1429px) {
.slideArea, .slider1 div, .slider2 div {
	height: 15vmin!important;
}
}

@media screen and (max-width:1100px) {
main {
	padding: 5px 2% 0 2%;
}
footer {
	margin-top: 0;
}
}

@media screen and (max-width:1089px) {
#slider01 {
	position: relative;
	height: -webkit-calc(100vh - 100px);
	height: calc(100vh - 100px );
}
}

@media screen and (max-width:1024px) {
#company {
	margin-top: 0;
}
#business {
	margin-top: 100px;
}
.slider_box, .right, #works h2, #works .right, .right, .slider_box {
	float: none;
	width: 100%;
	margin-bottom: 20px;
}
#bg3 {
	height: 200px;
	background-position: 50%!important;
}
.right, #works .right {
	margin-top: 50px;
	padding: 0;
}
.right h2, .right_box {
	float: none;
	width: 100%;
}
#works h2 {
	padding: 0;
}
.slider_box {
	position: static;
	margin-top: 60px;
}
#works .right li:nth-child(2) {
	margin-left: 2%;
}
#company h2 {
	padding-top: 50px;
}
#recruitment {
	margin-top: 100px;
}
#slider01 {
	position: relative;
	height: -webkit-calc(100vh - 145px);
	height: calc(100vh - 145px );
}
#slidebox {
	float: none;
	width: 100%;
	margin-top: 60px;
}
}

@media screen and (max-width:768px) {
#slider01 p {
	top: 10%;
	font-size: 40px;
}
#works .right li {
	display: block;
	width: 100%;
	margin: 10px 0;
}
#works .right li a {
	padding: 40px 0;
}
#works .right li:nth-child(2) {
	margin-left: 0;
}
#company h2 {
	padding-top: 80px;
}
#main .btn {
	margin-left: 30%;
}
#main h2 span {
	display: block;
	margin-top: 20px;
	text-align: right;
}
.slideArea, .slider1 div, .slider2 div {
	height: 30vmin!important;
}
#recruitment .btn_box {
	margin-top: 50px;
}
#works h2 {
	padding: 20px 0;
}
#recruitment {
	margin-top: 100px;
}
#newsbtn {
display:block;
right:10px;
top:70px;
}
header.fixed .fixbar #newsbtn{
display:none!important;
}
}

@media screen and (max-width : 650px) {
main {
	padding: 0;
}
#main {
	padding: 20px 2% 60px 2%;
}
#business {
	margin-top: 40px;
}
h2 img {
	zoom: 0.4;
}
.slider_box, .right, #works .right {
	margin-top: 30px;
}
.right p {
	margin: 30px 0;
}
#slider01 p {
	font-size: 30px;
	padding: 3%;
}
footer {
	margin-top: 0;
}
#slider01 {
	position: relative;
	height: -webkit-calc(100vh - 59px);
	height: calc(100vh - 125px );
}
#scroll {
	bottom: 20%;
}
#slider01 #s02 p {
	top: 30%;
}
}
 @keyframes slide1 {
 0% {
 transform: scale(1, 1), translate(0%, 0%);
}
 100% {
 transform: scale(1.5, 1.5) translate(8%, 8%);
}
}
 @keyframes slide2 {
 0% {
 transform: scale(1.5, 1.5), translate(16%, -16%);
}
 100% {
 transform: scale(1.5, 1.5) translate(0%, 0%);
}
}
 @keyframes slide3 {
 0% {
 transform: scale(1, 1), translate(0%, 0%);
}
 100% {
 transform: scale(2, 2) translate(12%, -12%)
}
}
 @-webkit-keyframes slide1 {
 0% {
 transform: scale(1, 1), translate(0%, 0%);
}
 100% {
 transform: scale(1.5, 1.5) translate(8%, 8%);
}
}
 @-webkit-keyframes slide2 {
 0% {
 transform: scale(1.5, 1.5), translate(16%, -16%);
}
 100% {
 transform: scale(1.5, 1.5) translate(0%, 0%);
}
}
 @-webkit-keyframes slide3 {
 0% {
 transform: scale(1, 1), translate(0%, 0%);
}
 100% {
 transform: scale(2, 2) translate(12%, -12%)
}
}
 @-moz-keyframes slide1 {
 0% {
 transform: scale(1, 1), translate(0%, 0%);
}
 100% {
 transform: scale(1.5, 1.5) translate(8%, 8%);
}
}
 @-moz-keyframes slide2 {
 0% {
 transform: scale(1.5, 1.5), translate(16%, -16%);
}
 100% {
 transform: scale(1.5, 1.5) translate(0%, 0%);
}
}
 @-moz-keyframes slide3 {
 0% {
 transform: scale(1, 1), translate(0%, 0%);
}
 100% {
 transform: scale(2, 2) translate(12%, -12%)
}
}

@media screen and (min-width : 1025px) {
#s01 span {
	background-image: url(../images/top/main_slider03.jpg);
	-webkit-animation: slide3 50s linear infinite 0s;
	-moz-animation: slide3 50s linear infinite 0s;
	animation: slide3 50s linear infinite 0s;
}
#s02 span {
	background-image: url(../images/top/main_slider09.jpg?221121);
	background-position: top center!important;
	-webkit-animation: slide2 50s linear infinite 0s;
	-moz-animation: slide2 50s linear infinite 0s;
	animation: slide2 50s linear infinite 0s;
}
#s03 span {
	background-image: url(../images/top/main_slider10.jpg?221121);
	-webkit-animation: slide1 50s linear infinite 0s;
	-moz-animation: slide1 50s linear infinite 0s;
	animation: slide1 50s linear infinite 0s;
}
#s04 span {
	background-image: url(../images/top/main_slider08.jpg);
	-webkit-animation: slide2 50s linear infinite 0s;
	-moz-animation: slide2 50s linear infinite 0s;
	animation: slide2 50s linear infinite 0s;
}

	
}

@media (orientation: landscape) and (max-width: 1024px){	
#s01 span {
	background-image: url(../images/top/main_slider03.jpg);
	background-position: center right 25%!important;
}
#s02 span {
	background-image: url(../images/top/main_slider09.jpg?221121);
	background-size: 200% 200%;
	background-position: bottom left!important;
}
#s03 span {
	background-image: url(../images/top/main_slider10.jpg?221121);
	background-position: top 40% right 47%!important;
}
#s04 span {
	background-image: url(../images/top/main_slider08.jpg);
}
#scroll {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 5%;
	width: 95px;
	margin: 0 auto;
	z-index: 99;
}
}