@charset "utf-8";
/*--
中 font-size:96%;
小 font-size:88%;
--*/

/*---------------------------------------*/
/* 共通 */
/*---------------------------------------*/
/* btn */
.btn a{
display: block;
width: 100%;
position: relative;
z-index: 11;
font-size: 135.5%;
letter-spacing: 0.05em;
}
@media screen and (max-width:767px){
.btn a{
font-size: 11pt;
}
}
.btn a:after{
content: "";
display: block;
width: 0;
height: 100%;
position: absolute;
top: 0;
left: 0;
transition: all 0.3s ease;
z-index: 1
}
.btn a:hover:after{
width: 100%;
}
.btn a .txt{
position: relative;
z-index: 2;
display: block;
}
.btn a .txt .icon{
font-size: 12px;
position: absolute;
top: 50%;
}
@media screen and (max-width:767px){
.btn a .txt .icon{
font-size: 10px;
}
}

/*---------------------------------------*/
/* topArea */
/*---------------------------------------*/
#topArea{
margin-bottom:12px;
position: relative;
}
.spContent #topArea{
margin-bottom:50px;
}
@media screen and (max-width:767px){
#topArea{
margin-bottom:50px;
}
}
/*フェード*/
#topArea .crossfader{
position:relative;
height:635px;
}
@media screen and (max-width:767px){
#topArea .crossfader{
height:350px;
margin:0;
}
}
.crossfader ul li{
position:absolute;
top:0;
left:0;
z-index:8;
opacity:0;
text-indent:-9999px;
}
.crossfader .active{
z-index:10;
opacity:1.0;
}
.crossfader .last-active{
z-index:9;
}
.photo{
background-repeat:no-repeat;
background-size:cover;
background-attachment: scroll;
width:100%;
height:100%;
text-indent:-9999px;
}
#photo01{
background-image:url(../images/common/keyvisual_01.jpg);
background-position:center;
background-size:cover;
}
@media screen and (max-width:980px){
#photo01{
background-position:right 36% center;
}
}
#photo02{
background-image:url(../images/common/keyvisual_02.jpg);
background-position:center;
background-size:cover;
}
#photo03{
background-image:url(../images/common/keyvisual_03.jpg);
background-position:center;
background-size:cover;
}
#photo04{
background-image:url(../images/common/keyvisual_04.jpg);
background-position:center;
background-size:cover;
}
@media screen and (max-width:980px){
#photo04{
background-position:right 43% center;
}
}

#topArea .txtArea{
position: absolute;
top: 210px;
left: 0;
width: 100%;
text-align: center;
z-index: 20;
}
@media screen and (max-width:767px){
#topArea .txtArea{
top: 110px;
}
}
#topArea .txtArea .copy{
font-size: 285.5%;
color: #fff;
margin-bottom: 30px;
}
@media screen and (max-width:767px){
#topArea .txtArea .copy{
font-size: 18pt;
margin-bottom: 15px;
line-height: 1.6;
}
}
#topArea .txtArea .logo{
width: 120px;
margin: 0 auto 40px;
}
@media screen and (max-width:767px){
#topArea .txtArea .logo{
width: 75px;
}
}
#topArea .txtArea .logo img{
width: 100%;
height: auto;
}
#topArea .txtArea .scroll{
display: block;
color: #fff;
font-weight: bold;
font-size: 71.5%;
}
@media screen and (max-width:767px){
#topArea .txtArea .scroll{
font-size: 7pt;
}
}
#topArea .txtArea .scroll .mouse{
width: 18px;
height: 29px;
border-radius: 9px;
background: #fff;
display: block;
margin: 0 auto;
position: relative;
margin-bottom: 13px;
}
#topArea .txtArea .scroll .mouse::before {
position: absolute;
top: 4px;
left: 50%;
content: '';
width: 4px;
height: 6px;
margin-left: -2px;
background: #808080;
border-radius: 2px;
animation: sdb 2s infinite;
box-sizing: border-box;
}
@keyframes sdb {
0% {
transform: translate(0, 0);
opacity: 0;
}
40% {
opacity: 1;
}
80% {
transform: translate(0, 10px);
opacity: 0;
}
100% {
opacity: 0;
}
}
/*---------------------------------------*/
/* serviceArea */
/*---------------------------------------*/
#serviceArea{
max-width: 1130px;
position: relative;
min-height: 572px;
margin-bottom: 170px;
}
@media screen and (max-width:980px){
#serviceArea{
min-height: 423px;
margin-bottom: 120px;
}
}
@media screen and (max-width:767px){
#serviceArea{
min-height: inherit;
margin-bottom: 50px;
}
}
#serviceArea .serviceTtl{
margin-bottom: 83px;
}
@media screen and (max-width:980px){
#serviceArea .serviceTtl{
margin-bottom: 40px;
}
}
@media screen and (max-width:767px){
#serviceArea .serviceTtl{
margin-bottom: 20px;
}
}
#serviceArea .serviceTtl .ttl{
color: #4367a6;
font-size: 585.5%;
line-height: 1.2;
margin-bottom: 8px;
}
@media screen and (max-width:980px){
#serviceArea .serviceTtl .ttl{
font-size: 500%;
}
}
@media screen and (max-width:767px){
#serviceArea .serviceTtl .ttl{
font-size: 32pt;
line-height: 1.1;
}
}
#serviceArea .serviceTtl .jp{
font-size: 114.5%;
color: #000;
}
@media screen and (max-width:767px){
#serviceArea .serviceTtl .jp{
font-size: 10pt;
}
}
#serviceArea .note{
margin-bottom: 45px;
color: #000;
}
@media screen and (max-width:767px){
#serviceArea .note{
margin-bottom: 20px;
}
}
#serviceArea .imgArea{
position: absolute;
top: 20px;
left: 0;
}
@media screen and (max-width:767px){
#serviceArea .imgArea{
position: static;
width: 97%;
}
}
#serviceArea .imgArea .img{
margin-left: 440px;
box-shadow: 20px 20px 30px rgba(0,0,0,0.3);
}
@media screen and (max-width:980px){
#serviceArea .imgArea .img{
margin-left: 350px;
}
}
@media screen and (max-width:767px){
#serviceArea .imgArea .img{
margin-left: 0;
box-shadow: 5px 5px 10px rgba(0,0,0,0.3);
}
}
#serviceArea .imgArea .img img{
width: 100%;
height: auto;
}
@media screen and (max-width:767px){
#serviceArea .btn{
width: 240px;
margin: -10px 0 0 auto;
}
}
#serviceArea .btn a{
background: #000;
max-width: 490px;
height: 90px;
line-height: 90px;
box-shadow: 20px 20px 30px rgba(0,0,0,0.3);
}
@media screen and (max-width:767px){
#serviceArea .btn a{
height: 50px;
line-height: 50px;
box-shadow: 5px 5px 10px rgba(0,0,0,0.3);
}
}
#serviceArea .btn a:after{
background: #4367a6;
}
#serviceArea .btn a .txt{
margin-left: 55px;
}
@media screen and (max-width:767px){
#serviceArea .btn a .txt{
margin-left: 35px;
}
}
#serviceArea .btn a .txt .icon{
margin-top: -4px;
right: 40px;
}
@media screen and (max-width:767px){
#serviceArea .btn a .txt .icon{
right: 25px;
}
}
/*---------------------------------------*/
/* businessArea */
/*---------------------------------------*/
#businessArea .areaInner{
max-width: 1175px;
width: 95%;
}
@media screen and (max-width:980px){
#businessArea .areaInner{
width: 90%;
}
}
#businessArea .businessContent{
float: left;
width: 32%;
margin-right: 2%;
position: relative;
padding-bottom: 65px;
}
@media screen and (max-width:767px){
#businessArea .businessContent{
float: none;
width: 100%;
margin-right: 0;
padding-bottom: 30px;
}
}
#businessArea .businessContent:last-child{
margin-right: 0;
}
#businessArea .businessContent .img{
box-shadow: 10px 10px 20px rgba(0,0,0,0.2);
margin-bottom: 40px;
background: #000;
}
@media screen and (max-width:980px){
#businessArea .businessContent .img{
box-shadow: 5px 5px 10px rgba(0,0,0,0.2);
margin-bottom: 20px;
}
}
#businessArea .businessContent .img img{
width: 100%;
height: auto;
transition: all 0.3s ease;
}
#businessArea .businessContent .img a:hover img{
opacity: 0.5;
}
#businessArea .businessContent .txtArea{
padding: 0 20px;
}
@media screen and (max-width:980px){
#businessArea .businessContent .txtArea{
padding: 0 5px;
}
}
#businessArea .businessContent .txtArea .ttl{
font-size: 250%;
line-height: 1;
margin-bottom: 45px;
color: #000;
}
@media screen and (max-width:980px){
#businessArea .businessContent .txtArea .ttl{
font-size: 214.5%;
margin-bottom: 20px;
}
}
@media screen and (max-width:767px){
#businessArea .businessContent .txtArea .ttl{
font-size: 20pt;
margin-bottom: 10px;
}
}
#businessArea .businessContent .txtArea .note{
line-height: 2.2;
font-size: 93%;
max-width: 305px;
color: #666;
}
@media screen and (max-width:767px){
#businessArea .businessContent .txtArea .note{
font-size: 8pt;
margin-bottom: 5px;
line-height: 1.8;
max-width: inherit;
}
}
#businessArea .businessContent .txtArea .viewBtn{
position: absolute;
bottom: 0;
left: 20px;
}
@media screen and (max-width:980px){
#businessArea .businessContent .txtArea .viewBtn{
left: 5px;
}
}
@media screen and (max-width:767px){
#businessArea .businessContent .txtArea .viewBtn{
position: relative;
}
}
/*---------------------------------------*/
/* companyArea */
/*---------------------------------------*/
#companyArea{
background: #4367a6;
padding: 85px 0 70px
}
@media screen and (max-width:767px){
#companyArea{
padding: 50px 0;
}
}
#companyArea .areaInner{
max-width: 1120px;
min-height: 434px;
}
@media screen and (max-width:767px){
#companyArea .areaInner{
min-height: inherit;
}
}
#companyArea .areaTtl{
color: #fff;
text-align: left;
margin-bottom: 40px;
}
@media screen and (max-width:767px){
#companyArea .areaTtl{
margin-bottom: 30px;
}
}
#companyArea .areaTtl .ttl{
color: #fff;
}
#companyArea .areaTtl .jp{
color: #fff;
}
#companyArea .note{
margin-bottom: 110px;
color: #fff;
margin-right: 60%;
}
@media screen and (max-width:980px){
#companyArea .note{
margin-bottom: 50px;
}
}
@media screen and (max-width:767px){
#companyArea .note{
margin-right: 0;
margin-bottom: 20px;
}
}
#companyArea .img{
position: absolute;
top: -22px;
right: 0;
width: 54.5%;
}
@media screen and (max-width:767px){
#companyArea .img{
position: static;
width: 97%;
}
}
#companyArea .img img{
width: 100%;
height: auto;
}
@media screen and (max-width:767px){
#companyArea .btnOuter{
width: 250px;
margin: -10px 0 0 auto;
}
}
#companyArea .btn{
margin-bottom: 32px;
}
@media screen and (max-width:767px){
#companyArea .btn{
margin-bottom: 15px;
}
}
#companyArea .btn:last-child{
margin-bottom: 0;
}
#companyArea .btn a{
background: #fff;
max-width: 250px;
height: 48px;
line-height: 48px;
box-shadow: 10px 10px 20px rgba(0,0,0,0.2);
}
@media screen and (max-width:767px){
#companyArea .btn a{
height: 40px;
line-height: 40px;
box-shadow: 5px 5px 10px rgba(0,0,0,0.2);
}
}
#companyArea .btn a:after{
background: #000;
}
#companyArea .btn a .txt{
margin-left: 30px;
}
@media screen and (max-width:767px){
#companyArea .btn a .txt{
margin-left: 20px;
}
}
#companyArea .btn a .txt .icon{
margin-top: -4px;
right: 23px;
}
@media screen and (max-width:767px){
#companyArea .btn a .txt .icon{
right: 20px;
}
}
/*---------------------------------------*/
/* infoArea */
/*---------------------------------------*/
.areaInner.ttlOuter{
max-width: 1100px;
width: 100%;
}
.tate{
position: absolute;
top: 0;
left: 0;
width: 1em;
height: 1em;
overflow: visible;
white-space: nowrap;
}
.tate .txt{
display: block;
line-height: 1;
}
#infoArea{
margin-bottom: 120px;
}
@media screen and (max-width:980px){
#infoArea{
margin-bottom: 90px;
}
}
@media screen and (max-width:767px){
#infoArea{
margin-bottom: 50px;
}
}
#infoArea .areaTtl{
transform: rotate(-90deg);
position: absolute;
top: 360px;
right: 0;
}
@media screen and (max-width:767px){
#infoArea .areaTtl{
position: static;
transform: rotate(0);
}
}
#infoArea .areaTtl .tate{
position: static;
}
#infoArea .areaTtl .jp{
position: absolute;
bottom: -26px;
left: 0;
overflow: visible;
white-space: nowrap;
}
@media screen and (max-width:767px){
#infoArea .areaTtl .jp{
position: static;
text-align: left;
}
}
#infoArea .infotabOuter{
position: relative;
margin-bottom: 90px;
}
@media screen and (max-width:767px){
#infoArea .infotabOuter{
margin-bottom: 40px;
}
}
#infoArea .infotabOuter:after{
content: "";
display: block;
width: 100%;
height: 1px;
background: #d6d6d6;
position: absolute;
bottom: 0;
left: 0;
z-index: 1;
}
#infoArea #infotab{
width: 90%;
max-width: 775px;
margin: 0 auto;
position: relative;
z-index: 2;
}
@media screen and (max-width:767px){
#infoArea #infotab{
width: 100%;
}
}
#infoArea #infotab li{
float: left;
width: 19.75%;
margin-right: 7%;
text-align: center;
cursor: pointer;
}
@media screen and (max-width:767px){
#infoArea #infotab li{
width: 25%;
margin-right: 0;
}
}
#infoArea #infotab li:last-child{
margin-right: 0;
}
#infoArea #infotab li .txt{
display: block;
line-height: 1;
border-top: 1px solid #fff;
border-bottom: 1px solid #d6d6d6;
padding: 12px 0;
}
#infoArea #infotab li.select .txt{
border: 1px solid #d6d6d6;
border-bottom: 1px solid #fff;
color:#4367a6;
}
#infoArea #countBox .infoOuter.hide{
display: none;
}
#infoArea #countBox .infoContent{
position: relative;
min-height: 160px;
margin-bottom: 10px;
}
@media screen and (max-width:767px){
#infoArea #countBox .infoContent{
min-height: 100px;
margin-bottom: 20px;
}
}
#infoArea #countBox .infoContent .img{
position: absolute;
top: 0;
left: 25px;
width: 160px;
background: #000;
}
@media screen and (max-width:767px){
#infoArea #countBox .infoContent .img{
width: 100px;
left: 18px;
}
}
#infoArea #countBox .infoContent .img img{
width: 100%;
height: auto;
transition: all 0.3s ease;
}
#infoArea #countBox .infoContent .img a:hover img{
opacity: 0.5;
}
#infoArea #countBox .infoContent .txtArea{
margin-left: 210px;
margin-right: 100px;
}
@media screen and (max-width:767px){
#infoArea #countBox .infoContent .txtArea{
margin-left: 130px;
margin-right: 0;
}
}
#infoArea #countBox .infoContent .txtArea .date{
font-size: 93%;
line-height: 1;
margin-bottom: 15px;
}
@media screen and (max-width:767px){
#infoArea #countBox .infoContent .txtArea .date{
font-size: 9pt;
margin-bottom: 5px;
}
}
#infoArea #countBox .infoContent .txtArea .ttl{
font-size: 128.5%;
margin-bottom: 15px;
line-height: 1.4;
}
@media screen and (max-width:767px){
#infoArea #countBox .infoContent .txtArea .ttl{
font-size: 9pt;
margin-bottom: 10px;
}
}
#infoArea #countBox .infoContent .txtArea .note{
line-height: 1.5;
height: 4.5em;
}
@media screen and (max-width:767px){
#infoArea #countBox .infoContent .txtArea .note{
font-size: 8pt;
}
}

#infoArea #countBox .infoContent .cateOuter .cate{
font-size: 85.5%;
transform: rotate(90deg);
color: #000;
}
@media screen and (max-width:767px){
#infoArea #countBox .infoContent .cateOuter .cate{
font-size: 8pt;
}
}
#infoArea #countBox .viewBtn{
text-align: center;
margin-top: 30px;
}
/*---------------------------------------*/
/* infoArea */
/*---------------------------------------*/
#recruitArea{
padding-bottom: 45px;
}
#recruitArea .message{
text-align: center;
line-height: 1.7;
margin-bottom: 70px;
}
@media screen and (max-width:767px){
#recruitArea .message{
margin-bottom: 30px;
}
}
@media screen and (max-width:767px){
#recruitArea .btnOuter{
width: 250px;
}
}
#recruitArea .btn a{
background: #000;
max-width: 250px;
height: 48px;
line-height: 48px;
box-shadow: 10px 10px 20px rgba(0,0,0,0.2);
margin: 0 auto;
}
@media screen and (max-width:767px){
#recruitArea .btn a{
height: 40px;
line-height: 40px;
box-shadow: 5px 5px 10px rgba(0,0,0,0.2);
}
}
#recruitArea .btn a:after{
background: #4367a6;
}
#recruitArea .btn a .txt{
margin-left: 30px;
}
@media screen and (max-width:767px){
#recruitArea .btn a .txt{
margin-left: 20px;
}
}
#recruitArea .btn a .txt .icon{
margin-top: -4px;
right: 23px;
}
@media screen and (max-width:767px){
#recruitArea .btn a .txt .icon{
right: 20px;
}
}