@charset "UTF-8";

@import url("reset.css");
@import url("contents.css");

 /* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
general
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
.sp {
	display: none !important;
}
	.clearfix:after{
		content: ".";
		display: block;
		height: 0;
		font-size: 0;
		clear: both;
		visibility: hidden;
	}
	.clearfix{
		display: block;
	}

 /* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
common
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

html, body {
	height: 100%;
	-webkit-text-size-adjust: none;
}
#wrapper {
    overflow: hidden;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	min-height: 100%;
}
@media only screen and (min-width: 769px){
    html, body, #wrapper {
        min-width: 980px;
    }
}

a > img {
	transition-duration: 0.3s;
	-o-transition-duration: 0.3s;
	-ms-transition-duration: 0.3s;
	-moz-transition-duration: 0.3s;
	-webkit-transition-duration: 0.3s;
}
a:hover > img {
	opacity: 0.8;
	filter: alpha(opacity=80);
}

.boximg {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    box-sizing: border-box;
    width: 100%;
}

 /* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
main
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */


/* head main */
#topmain {
    background: url(../img/main_bg.jpg) no-repeat center 100px, url(../img/bg_repeat.gif) repeat-x center bottom;
    height: 875px;
    text-align: center;
    position: relative;
}
#topmain #animations {
    margin: 0 auto;
    max-width: 980px;
    position: relative;
}
#topmain #animations li {
    position: absolute;
}
#topmain #animation01 { top: 437px; left: 463px; }
#topmain #animation02 { top: 421px; left: 368px; }
#topmain #animation03 { top: 747px; left: 503px; }
#topmain #animation04 { top: 615px; left: 513px; }
#topmain #animation05 { top: 399px; left: 771px; }
#topmain #animation06 { top: 599px; left: 83px; }
#topmain #animation07 { top: 553px; left: 771px; }
#topmain #animation08 { top: 313px; left: 367px; }
#topmain #animation09 { top: 672px; left: 775px; }
#topmain #animation10 { top: 593px; left: 232px; }
#topmain #animation11 { top: 433px; left: 57px; z-index: 1; }

#topmain #animation12 { top: 717px; left: 214px; }

/* 雲 */
@keyframes cloud {
    0% {
        margin-top: 0;
    }
    100% {
        margin-top: -5px;
    }
}
#topmain #animation13,
#topmain #animation14,
#topmain #animation15,
#topmain #animation16 {
    animation-name: cloud;
    animation-timing-function: ease;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}
#topmain #animation13 {
    top: 340px;
    left: 14px;
    animation-duration: 2.5s;
    animation-delay: 0;
}
#topmain #animation14 {
    top: 409px;
    left: 88px;
    z-index: 1;
    animation-duration: 3s;
    animation-delay: -2.5s;
}
#topmain #animation15 {
    top: 325px;
    left: 837px;
    animation-duration: 3s;
    animation-delay: -1.5s;
}
#topmain #animation16 {
    top: 399px;
    left: 919px;
    animation-duration: 2s;
    animation-delay: 0;
}

/* ヘリ */
@keyframes heli {
    0% {
        margin-top: -5px;
    }
    60% {
        margin-top: 15px;
    }
    100% {
        margin-top: -5px;
    }
}
#topmain #animation17 {
    top: 116px;
    right: 274px;
    animation-name: heli;
    animation-timing-function: ease;
    animation-iteration-count: infinite;
    animation-direction: normal;
    animation-duration: 3s;
    animation-delay: 0;
}
#topmain #animation17 img {
    width: 95px;
    height: 51px;
}

/* とり */
@keyframes bird {
    0% {
        margin-top: 0;
    }
    100% {
        margin-top: -5px;
    }
}
#topmain #animation18,
#topmain #animation19 {
    animation-name: bird;
    animation-timing-function: ease;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-duration: 1s;
}
#topmain #animation18 {
    top: 242px;
    right: 130px;
    animation-delay: .5s;
}
#topmain #animation19 {
    top: 283px;
    right: 54px;
    animation-delay: 0;
}

#topmain .sdgs {
    position: absolute;
    bottom: 0px;
    right: 0;
    width: 300px;
    height: 125px;
}

#topmain .sdgs a {
    cursor: url(../img/cursor.png), auto;
}


#topmain .scroll {
    position: absolute;
    bottom: -28px;
    left: 0;
    right: 0;
}


header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 110px;
  transition: .3s;
}
header h1 a {
  position: absolute;
  top: 23px;
  left: 23px;
  background: url(../img/logo.png) no-repeat;
  width: 105px;
  height: 87px;
  transition: .3s;
}
header .menu {
    position: absolute;
    top: 0;
    right: 0;
}
header .menu ul {
    float: right;
    margin-top: 34px;
}
header .menu li {
    font-weight: bold;
    margin-right: 50px;
    display: inline-block;
}
header .menu li a {
    color: #3497d0;
}
header .menu li a:after {
    content: url(../img/icon_arrow.png);
    margin-left: 10px ;
}
header .menu .mail {
    float: right;
    background-color: #f5ed19;
    text-align: center;
}
header .menu .mail a {
    display:block;
    width: 133px;
    height: 57px;
    padding-top: 25px;
    background: url(../img/icon_mail.png) no-repeat center center;
    transition: .3s;
}

.is-animation {
    height: 60px;
    background-color: #FFF;
}
.is-animation h1 a {
    top: 10px;
    left: 23px;
    background: url(../img/logo_s.png) no-repeat;
    width: 164px;
    height: 39px;
    transition: .3s;
}
.is-animation .menu ul {
    margin-top: 20px;
}
.is-animation .menu .mail a {
    height: 45px;
    padding-top: 15px;
    background: url(../img/icon_mail_s.png) no-repeat center center;
    transition: .3s;
}




.pagetop {
    position: fixed;
    bottom: 20%;
    right: 20px;
    z-index: 9998;
}



.topbtn a {
    display:block;
    width: 215px;
    height: 40px;
    font-size: 13px;
    font-weight: bold;
    position: relative;
    padding: 20px 0 0 35px;
}
.topbtn a:after {
    position: absolute;
    content: url(../img/img_arrow.png);
    top: 17px;
    right: -40px;
}
.bule a {
    color: #FFF;
    border: 2px solid #FFF;
    background-color: #3497d0;
}
.bule a:hover {
    color: #3497d0;
    border: 2px solid #3497d0;
    background-color: #FFF;
}
.white a {
    color: #3497d0;
    border: 2px solid #3497d0;
    background-color: #FFF;
}
.white a:hover {
    color: #FFF;
    border: 2px solid #FFF;
    background-color: #3497d0;
}


/* about */
#about {
    width: 100%;
    background-color: #3497d0;
    color: #FFF;
}
#about .abbox {
    width: 980px;
    margin: 0 auto;
}
#about .left {
    float: left;
    width: 375px;
    margin-top: 50px;
}
#about .left .ttl {
    font-size: 13px;
    font-weight: bold;
    margin-top: 10px;
}
#about .left p {
    line-height: 26px;
    margin: 40px 0 40px;
}
#about .right {
    float: right;
    margin: 32px 0 30px;
}


/* service */
#service {
    width: 100%;
    background-color: #FFF;
}
#service .svbox {
    width: 980px;
    margin: 80px auto 60px;
}
#service .illst {
    float: left;
    width: 540px;
    display: inline-block;
}
#service .illst img {
    margin: 0 15px 15px 0;
}
#service .right {
    float: right;
    width: 300px;
    margin: 15px 50px 0 0;
}
#service .right .ttl {
    font-size: 13px;
    font-weight: bold;
    margin-top: 10px;
    color: #3497d0;
}
#service .right p {
    line-height: 26px;
    margin: 40px 0 40px;
}



/* company */

#company {
    width: 100%;
    background-color: #eeede7;
}
#company .cmbox {
    width: 1030px;
    margin: 0 auto;
    padding-left: 50px;
    position: relative;
}
#company .left {
    float: left;
    width: 320px;
    margin-top: 50px;
}
#company .left .ttl {
    font-size: 13px;
    font-weight: bold;
    margin-top: 10px;
    color: #3497d0;
}
#company .left p {
    line-height: 26px;
    margin: 40px 0;
}
#company .right {
    float:right;
    margin: 40px 0 80px 10px;
}
#company .cmbox .btline {
    position: absolute;
    bottom: 35px;
    left: 0;
    right: 0;
    margin: auto;
    width: 3px;
    height: 65px;
}


/* recruit */

#recruit {
    background: url(../img/recruit_bg.jpg) no-repeat center;
    background-size: cover;
    background-attachment: fixed;
    height: 516px;
    text-align: center;
    position: relative;
}
#recruit .workbtn {
    position: absolute;
    top: -30px;
    bottom: 0;
    left: 0;
    right: 0;
}
#recruit .rcbox {
    width: 775px;
    height: 250px;
    margin: 0 auto;
    padding: 70px 0 0;
    background: url(../img/img_recruit_illust.png) no-repeat 30px 70px;
    position: relative;
}
#recruit .rcbox h2 {
    margin-top: 20px;
}
#recruit .rcbox .ttl {
    font-size: 13px;
    font-weight: bold;
    color: #FFF;
}
#recruit .rcbox p {
    line-height: 26px;
    margin: 50px 0 50px;
    color: #FFF;
}
#recruit .rcbox .oubo {
    position: absolute;
    bottom: 0;
    right: 5px;
}
#recruit .recbtn a {
    display:block;
    width: 773px;
    height: 113px;
    background: url(../img/recruit_bg.png) no-repeat top center;
    color: #FFF;
    padding-top: 45px;
    margin: 0 auto 0;
    font-size: 18px;
    font-weight: bold;
}
#recruit .recbtn a:hover {
    opacity: 0.8;
}



#rec_box #recruit {
    height: 340px;
}
#rec_box #recruit .workbtn {
    top: -80px;
}
#rec_box #recruit .rcbox {
    padding: 20px 0 0;
    background: none;
}
#rec_box #recruit .rcbox .oubo {
    position: absolute;
    bottom: 100px;
    right: 5px;
}


#copy {
    height: 47px;
    font-size: 11px;
    text-align: center;
    padding-top: 20px;
}



 /* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Responsive
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
@media only screen and (max-width: 1460px) {

}
@media only screen and (max-width: 1200px) {
}


 /* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
SP
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

@media only screen and (max-width: 768px) {
	.pc {
		display: none !important;
	}
	.sp {
		display: block !important;
	}
	img.sp {
		display: inline-block !important;
	}
    
    
    #contents {
		background-color: #FFF;
	}
    
	#shead {
		margin: 10px 0 0 20px;
	}
    
    .navToggle {
	display: inline-block;
    text-align: center;
    position: absolute;
    top: 0;
    right: 0;	
    z-index: 9999;
	}
	.navToggle.active p:nth-of-type(1),
	.navToggle p:nth-of-type(2) {
		display: none;
	}
	.navToggle.active p:nth-of-type(2) {
		display: block;
	}
	.navToggle img {
		width: 55px;
		height: auto;
	}
    .navToggle .clmn img {
		width: 23px;
        margin: 18px 18px 0 0;
	}
	.globalMenuSp {
		width: 100%;
		height: 2000px;
		background: #3497d0;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 10;
	}
    #globalmenu {
		box-sizing: border-box;
		padding: 85px 30px 30px;
	}
	#globalmenu li a {
		display: block;
        border-bottom: 1px solid #FFF;
        padding: 20px 0 20px 15px;
        color: #FFF;
        background: url(../img/sp/menu_arrow.png) no-repeat;
        background-position : right 10px center;
        background-size: 14px;
	}
	#globalmenu li.first {
		border-top: 1px solid #FFF;
	}
	#globalmenu li a {
        color: #FFF;
	}
    .globalMenuSp .gmmail {
        margin: 0 50px;
	}
	.globalMenuSp.active {
		display: block !important;
	}

    
    
    
    .topbtn a {
        width: 80%;
    }
	#stmain {
		margin: 10px 0 0;
        position: relative;
	}
    #stmain img {
    vertical-align: bottom; /* 下揃え */
    }
    #stmain .sdgs {
        position: absolute;
        bottom: 0px;
        right: 0px;
    }
    #stmain .sdgs img {
        width: 100%;
        max-width: 40vw;
        height:  auto;
    }
    #stmain .scroll {
    position: absolute;
    bottom: -10px;
    left: 0;
    right: 0;
    margin: auto;
    width: 23px;
    height: 32px;
    }
    
    
    /* about */
    #about .abbox {
    width: auto;
    }
    #about .abbox {
	margin: 0 25px;
	}
    #about .left {
    width: auto;
    }
    #about .left .abil {
	margin: 30px auto;
	}
    
    
    
    /* service */
    #service .svbox {
    width: auto;
    margin: 40px auto 40px;
    }
    #service .right {
    float: left;
    width: auto;
    margin: 0 25px;
    }
    #service .right .svil {
    margin: 40px 0 0;
    }
    
    
    /* company */
    #company .cmbox {
    width: auto;
    padding-left: 0;
    margin: 0 25px;
    }
    #company .left {
    margin-top: 40px;
    width: auto;
    }
    #company .left .cmil {
    margin: 40px 0 100px;
    }
    
    
    /* recruit */
    #recruit {
    background: url(../img/sp/recruit_bg.jpg) no-repeat center;
    background-size: cover;
    height: 450px;
    }
    #recruit .workbtn {
    top: -80px;
    }
    #recruit .rcbox {
    width: 100%;
    height: 270px;
    background: none;
    padding: 30px 0;
    position: relative;
    }
    #recruit .rcbox .rcil {
    position: absolute;
    top: 100px;
    left: 0;
    right: 0;
    margin: auto;
    width: 330px;
    }
    #recruit .rcbox .oubo {
    position: absolute;
    bottom: 0;
    right: 20px;
    }
    #recruit .rcbox p {
    margin-bottom: 90px;
    }
    #recruit .recbtn a {
    display:block;
    width: 300px;
    height: 50px;
    background: url(../img/sp/recruit_btn.png) no-repeat top center;
    background-size:contain;
    font-size: 14px;
    padding-top: 23px;
    margin: 0 auto;
    }
    
    
    
    #rec_box #recruit {
    height: 450px;
    }
    #rec_box #recruit .rcbox {
    padding: 30px 0;
    }
    #rec_box #recruit .rcbox .oubo {
    bottom: 0;
    }


    
    
}