@charset "utf-8";
/*--
中 font-size:96%;
小 font-size:88%;
--*/
/*---------------------------------------*/
/* topArea */
/*---------------------------------------*/
#topArea{
position:relative;
}
#topArea .areaInner{
max-width:1100px;
height:572px;
background:url(../images/common/keyvisual.jpg?2304) center right;
background-size:cover;
border-radius:50px;
z-index:inherit;
}
@media screen and (max-width:767px){
#topArea .areaInner{
height:300px;
width:100%;
border-radius:0;
margin-bottom: 125px;
}
}
#topArea .bg{
width:52%;
height:180px;
background:#f5874a;
border-top-right-radius:90px;
border-bottom-right-radius:90px;
position:absolute;
bottom:90px;
left:0;
z-index:10;
}
@media screen and (max-width:980px){
#topArea .bg{
width:60%;
height:140px;
}
}
#topArea .areaInner .txt{
position:absolute;
bottom:90px;
left:5%;
z-index:11;
color:#fff;
width:46%;
height:180px;
}
@media screen and (max-width:980px){
#topArea .areaInner .txt{
height:140px;
}
}
@media screen and (max-width:767px){
#topArea .areaInner .txt{
position:static;
width:90%;
margin:0 auto;
padding-top:320px;
color:#f5874a;
text-align:center;
}
}
#topArea .areaInner .txt .dosis{
font-size:267%;
letter-spacing:0.1em;
}
@media screen and (max-width:980px){
#topArea .areaInner .txt .dosis{
font-size:200%;
}
}
@media screen and (max-width:767px){
#topArea .areaInner .txt .dosis{
font-size:18pt;
}
}
#topArea .areaInner .txt .note{
font-size:107%;
}
@media screen and (max-width:980px){
#topArea .areaInner .txt .note{
font-size:93%;
}
}
@media screen and (max-width:767px){
#topArea .areaInner .txt .note{
font-size:9pt;
}
}
/*---------------------------------------*/
/* recruitArea */
/*---------------------------------------*/
#recruitArea ul li{
width:29%;
display:inline;
float:left;
margin-right:6.5%;
}
@media screen and (max-width:767px){
#recruitArea ul li{
width:100%;
margin:0 auto 30px;
float:none;
display:block;
}
}
#recruitArea ul li:last-child{
margin-right:0;
}
#recruitArea ul li.navi .ttl{
width:100%;
height:84px;
color:#fff;
text-align:center;
background:#f5874a;
border-top-left-radius:30px;
border-top-right-radius:30px;
border-bottom:1px solid #fff;
}
@media screen and (max-width:767px){
#recruitArea ul li.navi .ttl{
height:60px;
}
}
#recruitArea ul li.navi .ttl .dosis{
font-size:240%;
line-height:1.2;
padding-top:10px;
display:block;
}
@media screen and (max-width:980px){
#recruitArea ul li.navi .ttl .dosis{
font-size:166%;
}
}
@media screen and (max-width:767px){
#recruitArea ul li.navi .ttl .dosis{
font-size:13pt;
}
}
#recruitArea ul li.navi .ttl .jp{
font-size:86%;
display:block;
letter-spacing:0.1em;
}
@media screen and (max-width:767px){
#recruitArea ul li.navi .ttl .jp{
font-size:9pt;
}
}
#recruitArea ul li.navi .menu{
height:70px;
line-height:70px;
border-bottom:1px solid #fff;
position:relative;
}
#recruitArea ul li.navi .menu a{
display:block;
width:100%;
height:100%;
background:#fef6f1;
text-indent:50px;
}
@media screen and (max-width:980px){
#recruitArea ul li.navi .menu a{
font-size:86%;
}
}
@media screen and (max-width:767px){
#recruitArea ul li.navi .menu a{
font-size:9pt;
}
}
.pcContent #recruitArea ul li.navi .menu a:hover{
background:#fff;
}
#recruitArea ul li.navi .menu a .cover{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:url(../images/common/dot.png) top left repeat;
opacity:0;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.pcContent #recruitArea ul li.navi .menu a:hover .cover{
opacity:1;
}
#recruitArea ul li.navi .menu a .inner{
position:relative;
z-index:10;
display: block;
}

#recruitArea ul li.navi .menu .arrow{
position:absolute;
top:17px;
left:15px;
font-size:35px;
width:35px;
height:35px;
}
#recruitArea ul li.btnBn{
position:relative;
padding-top:29%;
border-radius:30px;
margin-top:30px;
}
@media screen and (max-width:767px){
#recruitArea ul li.btnBn{
margin-top:0;
padding-top:100%;
}
}
#recruitArea ul li:nth-child(2).btnBn{
background:url(../images/common/img-outsoucing.jpg?2304) center center no-repeat;
background-size:cover;
}
#recruitArea ul li:nth-child(3).btnBn{ 
background:url(../images/common/img-training.jpg?2304) center center no-repeat;
background-size:cover;
}
#recruitArea ul li.btnBn a{
display:block;
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
#recruitArea ul li.btnBn a .border{
content:"";
position:absolute;
top:-20px;
left:-20px;
border:6px solid #f5874a;
width:100%;
height:100%;
display:block;
border-radius:30px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
@media screen and (max-width:767px){
#recruitArea ul li.btnBn a .border{
top:0;
left:0;
}
}
.pcContent #recruitArea ul li.btnBn a:hover .border{
top:0;
left:0;
}
#recruitArea ul li.btnBn a .border .ttl{
height:60px;
width:100%;
display:block;
color:#fff;
position:absolute;
bottom:0;
left:0;
background:#f5874a;
border-bottom-left-radius:20px;
border-bottom-right-radius:20px;
border: 2px solid #f5874a;
}
@media screen and (max-width:767px){
#recruitArea ul li.btnBn a .border .ttl{
height:40px;
}
}
#recruitArea ul li.btnBn a .border .ttl .dosis{
font-size:220%;
display:block;
line-height:1;
padding:5px 0 0 5%;
}
@media screen and (max-width:980px){
#recruitArea ul li.btnBn a .border .ttl .dosis{
font-size:166%;
}
}
@media screen and (max-width:767px){
#recruitArea ul li.btnBn a .border .ttl .dosis{
font-size:13pt;
}
}
#recruitArea ul li.btnBn a .border .ttl .jp{
font-size:86%;
display:block;
letter-spacing:0.1em;
padding:0 0 0 5%;
}
@media screen and (max-width:767px){
#recruitArea ul li.btnBn a .border .ttl .jp{
font-size:9pt;
}
}
#recruitArea ul li.btnBn a .cover{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:url(../images/common/dot.png) top left repeat;
border-radius:30px;
opacity:0;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.pcContent #recruitArea ul li.btnBn a:hover .cover{
opacity:1;
}
/*---------------------------------------*/
/* aboutArea */
/*---------------------------------------*/
#aboutArea{
width:100%;
height:400px;
background:url(../images/common/bg-about.jpg) center center no-repeat;
background-size:cover;
}
@media screen and (max-width:767px){
#aboutArea{
height:185px;
}
}
#aboutArea .aboutBtn a{
display:block;
position:absolute;
top:60px;
right:0;
width:280px;
height:280px;
background:url(../images/page/srlipe-w.gif) top left repeat;
border-radius:30px;
}
@media screen and (max-width:767px){
#aboutArea .aboutBtn a{
width:100%;
height:60px;
}
}
#aboutArea .aboutBtn a .areaTtl{
position:absolute;
width:100%;
height:100%;
top:-20px;
left:-20px;
background:#f5874a;
border-radius:30px;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
@media screen and (max-width:767px){
#aboutArea .aboutBtn a .areaTtl{
top:0;
left:0;
}
}
.pcContent #aboutArea .aboutBtn a:hover .areaTtl{
top:0;
left:0;
background:#fff;
}
#aboutArea .aboutBtn a .areaTtl .txt{
position:absolute;
top:40%;
left:0;
width:100%;
}
@media screen and (max-width:767px){
#aboutArea .aboutBtn a .areaTtl .txt{
top:8%;
}
}
#aboutArea .aboutBtn a .areaTtl .dosis{
color:#fff;
-webkit-transition: color 0.3s ease;
-moz-transition: color 0.3s ease;
-o-transition: color 0.3s ease;
transition: color 0.3s ease;
}
.pcContent #aboutArea .aboutBtn a:hover .areaTtl .dosis{
color:#f5874a;
}
#aboutArea .aboutBtn a .areaTtl .jp{
color:#fff;
-webkit-transition: color 0.3s ease;
-moz-transition: color 0.3s ease;
-o-transition: color 0.3s ease;
transition: color 0.3s ease;
}
.pcContent #aboutArea .aboutBtn a:hover .areaTtl .jp{
color:#4d4d4d;
}
/*---------------------------------------*/
/* instaArea */
/*---------------------------------------*/
#instaArea .instaAreaInner a{
display:block;
width:90%;
height:100%;
padding:15px 5%;
max-width:860px;
background:#fef6f1;
border-radius:10px;
position:relative;
margin:0 auto;
}
#instaArea .instaAreaInner a:after{
content:"";
display:block;
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:url(../images/common/dot.png) top left repeat;
border-radius:10px;
opacity:0;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.pcContent #instaArea .instaAreaInner a:hover:after{
opacity:1;
}

#instaArea .icon-insta{
position:absolute;
top:50%;
left:5%;
margin-top:-30px;
font-size:60px;
z-index:10;
-webkit-transition: color 0.3s ease;
-moz-transition: color 0.3s ease;
-o-transition: color 0.3s ease;
transition: color 0.3s ease;
}
.pcContent #instaArea a:hover .icon-insta{
color:#fff;
}
@media screen and (max-width:767px){
#instaArea .icon-insta{
position:relative;
text-align:center;
margin:10px 0 0;
display:block;
font-size:30px;
top:inherit;
left:inherit;
}
}
#instaArea .areaTtl{
position:absolute;
top:50%;
left:5%;
margin-top:-43px;
margin-left:70px;
z-index:10;
}
@media screen and (max-width:767px){
#instaArea .areaTtl{
position:relative;
display:block;
margin-top:0;
margin-left:0;
top:inherit;
left:inherit;
}
}
#instaArea .areaTtl .dosis{
margin-bottom:5px;
-webkit-transition: color 0.3s ease;
-moz-transition: color 0.3s ease;
-o-transition: color 0.3s ease;
transition: color 0.3s ease;
}
.pcContent #instaArea a:hover .areaTtl .dosis{
color:#fff;
}
#instaArea .areaTtl .jp{
color:#4d4d4d;
-webkit-transition: color 0.3s ease;
-moz-transition: color 0.3s ease;
-o-transition: color 0.3s ease;
transition: color 0.3s ease;
}
.pcContent #instaArea a:hover .areaTtl .jp{
color:#fff;
}

#instaArea .instaList{
margin-left:295px;
display:block;
z-index:10;
position:relative;
}
@media screen and (max-width:767px){
#instaArea .instaList{
margin-left:0;
}
}
#instaArea .instaList .clear{
width:100%;
display:block;
}
#instaArea .instaList .clear .list{
display:inline;
float:left;
width:32%;
margin-right:2%;
}
#instaArea .instaList .clear .list:last-child{
margin-right:0;
}
#instaArea .instaList .clear .list img{
width:100%;
height:auto;
}