html.hide{
overflow: hidden;
}
#doropMenu{
-webkit-overflow-scrolling: touch;
}
/*------------------ スライドショー専用レイアウトここから ------------------*/
body.recruit #slide_wrapp{
position: relative;
overflow: hidden;
margin: 0;
padding: 0;
list-style-type: none;
height: 565px;
background-color: #bbb;
z-index: 1;
}
body.recruit .slide_item{
opacity: 0;
transform: scale(1);
transition: opacity 2s linear, transform 7.5s linear;
z-index: 1;
height: 565px;
width: 1120px;
position: absolute;
top: 0;
left : -40px;
transform: scale(1)
}
body.recruit .slide_item.img_01{
background-image: url(../images/img_main_01@2x.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
body.recruit .slide_item.img_02{
background-image: url(../images/img_main_02@2x.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
body.recruit .slide_item.img_03{
background-image: url(../images/img_main_03@2x.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
body.recruit .slide_item.img_04{
background-image: url(../images/img_main_04@2x.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
body.recruit .slide_item.show_{
opacity: 1;
}
body.recruit .slide_item.zoom_{
transform: scale(1) translateX(40px);
}
body.recruit .slide_item img{
display: block;
height: 565px;
width: 1080px;
margin: 0;
padding: 0;
}
@media screen and (max-width: 750px){
body.recruit #slide_wrapp{
height: 518px;
}
body.recruit .slide_item{
height: 518px;
}
.mainImages {
height: 518px;
margin-top: -518px;
}
.mainImages div {
margin-left: 0;
height: 518px;
}
}
@media screen and (min-width: 751px) and (max-width: 1080px){
body.recruit #slide_wrapp{
margin-left: 70px;
}
.mainImages {
height: 565px;
margin-top: -565px;
}
.mainImages div {
margin-left: 70px;
height: 565px;
}
}
@media screen and (min-width: 1081px) {
body.recruit #slide_wrapp{
height: 670px;
}
body.recruit .slide_item{
height: 670px;
width: calc(100% + 40px);
left : -40px;
}
body.recruit .slide_item img{
height: auto;
width: 100%;
}
.mainImages {
height: 670px;
margin-top: -670px;
}
.mainImages div {
height: 670px;
}
}
/*------------------ スライドショー専用レイアウトここまで ------------------*/
/*------------------ headerレイアウトここから ------------------*/
body.recruit header{
position: fixed;
}
@media screen and (max-width: 750px){
body.recruit header{
position: fixed!important;
}
}
@media screen and (min-width: 751px){
body.recruit header{
position: relative;
}
}
/*------------------ headerレイアウトここまで ------------------*/
/*------------------ menuレイアウトここから ------------------*/
body.fullsize.recruit .menuBtn{
width: 70px;
height: 48px;
position: fixed;
left: calc(50% - 640px);
top: calc(50% - 24px);
z-index: 0;
text-align: center;
}
@media screen and (max-width: 750px){
body.fullsize.recruit .menuBtn{
display: none;
}
}
@media screen and (min-width: 751px) and (max-width: 1080px){
body.fullsize.recruit .menuBtn{
left: 0;
}
}
@media screen and (min-width: 1081px) and (max-width: 1280px){
body.fullsize.recruit .menuBtn{
left: 0;
}
}
body.fullsize.recruit .menuBox{
width: 100vw;
height: 100vh;
position: fixed;
left: 0;
top: 0;
bottom: 0;
right: 0;
background-color: rgba(204,0,0,.8);
z-index: 3;
overflow-y: scroll;
}
@media screen and (min-width: 750px){
body.fullsize.recruit .menuBox{
display: none;
}
}
body.fullsize.recruit .menuBox .menuList{
margin: 0 auto;
max-width: 1280px;
}
body.fullsize.recruit .menuBox .menuList ul{
list-style-type: none;
margin: 108px 0 0 0;
padding: 36px 0 0 100px;
}
body.fullsize.recruit .menuBox .menuList ul li{
margin-bottom: 36px;
}
body.fullsize.recruit .menuBox .menuList ul li a{
display: inline-block;
color: #fff;
text-decoration: none;
font-size: 18px;
}
body.fullsize.recruit .forSp{display: none;}
@media screen and (max-width: 750px){
body.fullsize.recruit .forSp{display: block;}
body.fullsize.recruit .menuList.forSp ul.menu{
margin: 0 0 4em;
}
}
body.fullsize.recruit .forTabPc{display: block;}
@media screen and (max-width: 750px){
body.fullsize.recruit .forTabPc{display: none;}
}
body.fullsize.recruit .forSpTab{display: none;}
@media screen and (max-width: 1080px){
body.fullsize.recruit .forSpTab{display: block;}
body.fullsize.recruit .forPc{display: none;}
}
/*------------------ menuレイアウトここまで ------------------*/
/*------------------ footerレイアウトここから ------------------*/
@media screen and (max-width: 750px){
body.recruit footer #copyright{
padding-top: 16px;
}
}
@media screen and (min-width: 1081px){
body.recruit footer #copyright{
padding-top: 16px;
border-top: 0;
}
}
/*------------------ footerレイアウトここまで ------------------*/
/*------------------ コンテンツ内容ここから ------------------*/
body.recruit main{
margin-top: auto;
overflow: hidden;
}
body.recruit main .mainImages div span + span{
letter-spacing: 2px;
font-size: 32px;
font-weight: bold;
line-height: 1.4em;
font-family: "Helvetica Neue", Arial;
}
body.recruit main .mainImages div span,
body.recruit main .mainImages div span + span + span{
letter-spacing: 0;
padding-top: 8px;
font-size: 14px;
font-weight: normal;
line-height: 1.6em;
}
@media screen and (min-width: 751px){
body.recruit main{
margin-top: 0!important;
overflow: hidden;
}
}
@media screen and (min-width: 1081px){
body.recruit main .mainImages div span + span{
letter-spacing: 3px;
font-size: 52px;
}
body.recruit main .mainImages div span,
body.recruit main .mainImages div span + span + span{
font-size: 24px;
}
}
body.fullsize.recruit main section{padding: 18px 0 48px 18px;}
@media screen and (min-width: 751px) and (max-width: 1080px){
body.fullsize.recruit main section{padding: 18px 0 48px 70px;}
}
@media screen and (min-width: 1081px) and (max-width: 1280px){
body.fullsize.recruit main section{padding: 27px 0 54px 70px;}
}
@media screen and (min-width: 1281px){
body.fullsize.recruit main section{
max-width: 1280px;
margin: 0 auto;
box-sizing: border-box;
padding: 27px 0 54px 70px;
}
}
body.fullsize.recruit main ul.link{
padding-left: 0;
list-style-type: none;
margin: 0;
}
body.fullsize.recruit main ul.link li{
margin-top: 24px;
position: relative;
height: 150px;
}
body.fullsize.recruit main ul.link li a{
display: block;
border-top: 5px solid #cc0000;
border-left: 5px solid #cc0000;
border-bottom: 5px solid #cc0000;
height: 150px;
box-sizing: border-box;
line-height: 40px;
font-size: 40px;
text-decoration: none;
padding: 50px 48px;
position: absolute;
left: 0;
right: -9999px;
}
body.fullsize.recruit main ul.link li a:after{
content: "";
display: inline-block;
height: 38px;
width: 38px;
background: url(../images/link_r.svg) center center no-repeat;
background-size: contain;
vertical-align: top;
margin-left: 12px;
}
@media screen and (max-width: 750px){
body.fullsize.recruit main ul.link li{
margin-top: 18px;
position: relative;
height: 80px;
}
body.fullsize.recruit main ul.link li a{
height: 80px;
line-height: 20px;
font-size: 20px;
padding: 25px 25px;
}
body.fullsize.recruit main ul.link li a:after{
height: 20px;
width: 20px;
margin-left: 8px;
}
}
@media screen and (min-width: 751px) and (max-width: 1080px){
body.fullsize.recruit main ul.link li{
margin-top: 18px;
position: relative;
height: 110px;
}
body.fullsize.recruit main ul.link li a{
height: 110px;
line-height: 30px;
font-size: 30px;
padding: 35px 35px;
}
body.fullsize.recruit main ul.link li a:after{
height: 30px;
width: 30px;
margin-left: 12px;
}
}
/*------------------ コンテンツ内容ここまで ------------------*/
/*------------------ 新卒採用コンテンツ内容ここから ------------------*/
@media screen and (max-width: 750px){}
@media screen and (min-width: 751px) and (max-width: 1080px){}
@media screen and (min-width: 1081px) and (max-width: 1280px){}
@media screen and (min-width: 1281px){}
body.fullsize.recruit main .fresh{}
body.fullsize.recruit main .fresh ul.linkBox{
padding: 0;
margin: 80px 0;
list-style-type: none;
display: flex;
flex-wrap: wrap;
}
body.fullsize.recruit main .fresh ul.linkBox:last-child{
margin-bottom: 0;
}
body.fullsize.recruit main .fresh ul.linkBox li{
padding: 0;
margin: 0;
list-style-type: none;
width: 50%;
height: 420px;
position: relative;
overflow: hidden;
}
body.fullsize.recruit main .fresh ul.linkBox li:after{
content: "";
display: block;
width: 100%;
height: 100%;
background-color: #ccc;
position: absolute;
top: 0;
left: 0;
z-index: 0;
transform: scale(1.1);
transition: all 3s ease-out;
}
body.fullsize.recruit main .fresh ul.linkBox li.link01:after{
background: url(../images/img_link_01@2x.jpg) center center no-repeat;
background-size: cover;
}
body.fullsize.recruit main .fresh ul.linkBox li.link02:after{
background: url(../images/img_link_02@2x.jpg) center center no-repeat;
background-size: cover;
}
body.fullsize.recruit main .fresh ul.linkBox li.link03:after{
background: url(../images/img_link_03@2x.jpg) center center no-repeat;
background-size: cover;
}
body.fullsize.recruit main .fresh ul.linkBox li.link04:after{
background: url(../images/img_link_04@2x.jpg) center center no-repeat;
background-size: cover;
}
body.fullsize.recruit main .fresh ul.linkBox li.link05:after{
background: url(../images/img_link_05@2x.jpg) center center no-repeat;
background-size: cover;
}
body.fullsize.recruit main .fresh ul.linkBox li.link06:after{
background: url(../images/img_link_06@2x.jpg) center center no-repeat;
background-size: cover;
}
body.fullsize.recruit main .fresh ul.linkBox li:hover:after{
-moz-transform: scale(1.1) translateX(16px);
-webkit-transform: scale(1.1) translateX(16px);
-ms-transform: scale(1.1) translateX(16px);
transform: scale(1.1) translateX(16px);
}
body.fullsize.recruit main .fresh ul.linkBox li:hover a{
opacity: 1;
}
body.fullsize.recruit main .fresh ul.linkBox li a{
display: flex;
align-items: center;
height: 420px;
z-index: 1;
position: relative;
box-sizing: border-box;
padding: 30px;
color: #fff;
text-decoration: none;
}
body.fullsize.recruit main .fresh ul.linkBox li a span{
font-size: 30px;
display: block;
padding-top: 80px;
}
body.fullsize.recruit main .fresh ul.linkBox li a span small{
font-size: 20px;
}
body.fullsize.recruit main .fresh ul.linkBox li a span small I {
font-style: normal;
font-size: 0.7em;
line-height: 1.8em;
}
@media screen and (max-width: 750px){
body.fullsize.recruit main .fresh ul.linkBox li a span small I {
font-size: 1em;
}
}
body.fullsize.recruit main .fresh ul.linkBox li a span img{
height: 38px;
width: 38px;
margin: 12px 0;
}
@media screen and (max-width: 750px){
body.fullsize.recruit main .fresh ul.linkBox{
margin: 0 0 0 -18px;
}
body.fullsize.recruit main .fresh ul.linkBox li{
width: 100%;
margin-top: 20px;
height: 220px;
}
body.fullsize.recruit main .fresh ul.linkBox li:after{
height: 220px;
}
body.fullsize.recruit main .fresh ul.linkBox li a{
height: 220px;
}
body.fullsize.recruit main .fresh ul.linkBox li a span{
font-size: 20px;
padding-top: 30px;
}
body.fullsize.recruit main .fresh ul.linkBox li a span small{
font-size: 15px;
}
body.fullsize.recruit main .fresh ul.linkBox li a span img{
height: 24px;
width: 24px;
margin: 8px 0 0;
}
}
@media screen and (min-width: 751px) and (max-width: 1080px){
body.fullsize.recruit main .fresh ul.linkBox{
margin: 0;
}
body.fullsize.recruit main .fresh ul.linkBox li{
width: 100%;
margin-top: 80px;
}
}
body.fullsize.newgraduate main .fresh #news + section ul.linkBox:first-child{
margin-top: 0;
}
body.fullsize.recruit main .fresh section .inner{
padding-right: 70px;
}
body.fullsize.recruit main .fresh section#news .inner {
padding-right: 0;
}
@media screen and (max-width: 750px){
body.fullsize.recruit main .fresh section .inner{
padding-right: 18px;
}
}
body.fullsize.recruit main .fresh section:not(#news) h1{
color: #fff;
font-size: 45px;
text-align: center;
font-weight: normal;
width: 100%;
}
main #news{
min-height:100px;
padding-top: 80px;
}
main #news h1{
font-weight: normal;
font-size: 25px;
line-height: 1.5em;
}
body.fullsize.recruit main .fresh section h1 + p{
font-size: 30px;
text-align: center;
color: #fff;
}
body.fullsize.recruit main .fresh section .interviewBox{
height: 486px;
margin-right: -70px;
background: url(../images/profile/main_img@2x.png) left top no-repeat;
background-size: cover;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
position: relative;
}
body.fullsize.recruit main .fresh section .interviewBox h1 img {
width: auto;
height: 0.4em;
margin: auto 0 0.5em;
}
@media screen and (min-width: 751px){
body.fullsize.recruit main .fresh section .interviewBox h1 img {margin: auto auto 0.5em;}
}
body.fullsize.recruit main .fresh section .interviewBox:after{
content: "";
display: block;
background: url(../images/profile/img_arrow.svg) center center no-repeat;
background-size: cover;
height: 57px;
width: 84px;
bottom: -28px;
left: calc(50% - 77px);
position: absolute;
}
@media screen and (max-width: 750px){
body.fullsize.recruit main .fresh section .interviewBox{
margin-right: -18px;
margin-left: -18px;
height: 220px;
background: url(../images/profile/main_img_sp@2x.png) left top no-repeat;
background-size: cover;
}
body.fullsize.recruit main .fresh section .interviewBox h1{
color: #fff;
font-size: 20px !important;
text-align: left !important;
font-weight: normal;
width: 100%;
margin-bottom: 6px;
padding-top: 90px;
}
body.fullsize.recruit main .fresh section .interviewBox div{
width: 100%;
padding: 30px;
box-sizing: border-box;
}
body.fullsize.recruit main .fresh section .interviewBox h1 + p{
font-size: 15px;
text-align: left;
color: #fff;
}
body.fullsize.recruit main .fresh section .interviewBox:after{
height: 48px;
width: 32px;
bottom: -22px;
background-size: 48px 32px;
left: calc(50% - 16px);
}
}
@media screen and (min-width: 751px) and (max-width: 1080px){
body.fullsize.recruit main .fresh section .interviewBox{
height: 420px;
background: url(../images/profile/main_img_tab@2x.png) left top no-repeat;
background-size: cover;
}
body.fullsize.recruit main .fresh section .interviewBox h1{
color: #fff;
font-size: 30px;
text-align: left;
font-weight: normal;
width: 100%;
padding-top: 80px;
}
body.fullsize.recruit main .fresh section .interviewBox div{
width: 100%;
padding: 30px;
box-sizing: border-box;
}
body.fullsize.recruit main .fresh section .interviewBox h1 + p{
font-size: 18px;
/* text-align: left;*/
color: #fff;
}
}
body.fullsize.recruit main .fresh section h2{
font-size: 25px;
text-align: center;
font-weight: bold;
margin: 60px 0 12px;
}
body.fullsize.recruit main .fresh section h2 img{
margin: 0 auto 8px;
width: 228px;
height: 24px;
}
body.fullsize.recruit .fresh .inner #select_intaview{
position: relative;
background: url(../images/img_job.svg) center center no-repeat;
background-size: contain;
}
body.fullsize.recruit .fresh .inner #select_intaview img{ opacity: 0; z-index: -1;width: 100%;}
body.fullsize.recruit .fresh .inner #select_intaview a{ position: absolute; display: block; z-index: 1;}
body.fullsize.recruit .fresh .inner #select_intaview a.job01{ top: 0; left: 0; width: 12.5%; height: 34%;}
body.fullsize.recruit .fresh .inner #select_intaview a.job02{ top: 41%; left: 0; width: 12.5%; height: 34%;}
body.fullsize.recruit .fresh .inner #select_intaview a.job03{ top: 0; left: 14%; width: 36.6%; height: 74.5%;}
body.fullsize.recruit .fresh .inner #select_intaview a.job04{ top: 0; left: 52%; width: 11%; height: 74.5%;}
body.fullsize.recruit .fresh .inner #select_intaview a.job05{ top: 0; left: 64.3%; width: 11%; height: 74.5%;}
body.fullsize.recruit .fresh .inner #select_intaview a.job06{ top: 0; left: 76.7%; width: 11%; height: 74.5%;}
body.fullsize.recruit .fresh .inner #select_intaview a.job07{ top: 0; right: 0; width: 10.6%; height: 74.5%;}
body.fullsize.recruit .fresh .inner #select_intaview a.job08{ bottom: 0; right: 0; left: 0; width: 100%; height: 17%;}
body.fullsize.recruit .fresh .inner #select_intaview a + div{position: absolute; opacity: 0; width: 100%; height: 100%; top: 0; z-index: 0;}
body.fullsize.recruit .fresh .inner #select_intaview a + div img{ opacity: 1; margin: 0;}
body.fullsize.recruit .fresh .inner #select_intaview a.job01:hover + div{opacity: 1;}
body.fullsize.recruit .fresh .inner #select_intaview a.job02:hover + div{opacity: 1;}
body.fullsize.recruit .fresh .inner #select_intaview a.job03:hover + div{opacity: 1;}
body.fullsize.recruit .fresh .inner #select_intaview a.job04:hover + div{opacity: 1;}
body.fullsize.recruit .fresh .inner #select_intaview a.job05:hover + div{opacity: 1;}
body.fullsize.recruit .fresh .inner #select_intaview a.job06:hover + div{opacity: 1;}
body.fullsize.recruit .fresh .inner #select_intaview a.job07:hover + div{opacity: 1;}
body.fullsize.recruit .fresh .inner #select_intaview a.job08:hover + div{opacity: 1;}
body.fullsize.recruit .fresh .inner #select_intaview div.here{opacity: 1; z-index: 0;}
@media screen and (max-width: 750px){
body.fullsize.recruit .fresh .inner #select_intaview{
position: relative;
background: url(../images/img_job_sp.svg) center center no-repeat;
background-size: contain;
}
body.fullsize.recruit .fresh .inner #select_intaview img{ opacity: 0; z-index: -1;}
body.fullsize.recruit .fresh .inner #select_intaview a{ position: absolute; display: block; z-index: 1;}
body.fullsize.recruit .fresh .inner #select_intaview a.job01{ top: 0; left: 0; width: 48.5%; height: 9.6%;}
body.fullsize.recruit .fresh .inner #select_intaview a.job02{ top: 0; left: 52.5%; width: 47.5%; height: 9.6%;}
body.fullsize.recruit .fresh .inner #select_intaview a.job03{ top: 12.4%; left: 0; width: 100%; height: 22%;}
body.fullsize.recruit .fresh .inner #select_intaview a.job04{ top: 37.1%; left: 0; width: 100%; height: 10%;}
body.fullsize.recruit .fresh .inner #select_intaview a.job05{ top: 50.2%; left: 0; width: 100%; height: 10%;}
body.fullsize.recruit .fresh .inner #select_intaview a.job06{ top: 63.3%; left: 0; width: 100%; height: 10%;}
body.fullsize.recruit .fresh .inner #select_intaview a.job07{ top: 76.4%; left: 0; width: 100%; height: 10%;}
body.fullsize.recruit .fresh .inner #select_intaview a.job08{ bottom: 0; right: 0; left: 0; width: 100%; height: 10.6%;}
}
#list_intaview{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
#list_intaview .box{
width: 32%;
position: relative;
margin: 18px 0;
}
#list_intaview .box.pickUp{
width: 100%;
position: relative;
margin: 18px 0;
}
#list_intaview .box.pickUp h2{
margin-bottom: 0;
}
#list_intaview .box.pickUp a{
max-width: 850px;
position: relative;
margin: 0 auto;
}
#list_intaview .box a span span{
margin-left: -4px;
display: block;
}
#list_intaview .box a span span span{
margin-left: 0;
padding: 4px;
display: inline;
}
#list_intaview .box.pickUp a .photoArea{
width: auto;
max-width: 850px;
height: auto;
}
#list_intaview .box.pickUp a .photoArea img{
width: 100%;
margin: 0;
height: auto;
}
#list_intaview .box.pickUp div{
width: 36%;
position: absolute;
right: 0;
top: 12%;
}
#list_intaview .empty{
width: 32%;
}
#list_intaview .box a{
display: block;
color: #1e1e1e;
line-height: 1.6em;
font-weight: bold;
}
#list_intaview .box a .photoArea{
display: block;
width: 262px;
height: 280px;
margin: 0;
position: relative;
background-size: cover;
}
#list_intaview .box a .photoArea img{
display: block;
width: 262px;
height: 280px;
margin: 0;
vertical-align: top;
}
#list_intaview .box div{
width: 44%;
position: absolute;
right: 0;
top: 12%;
}
#list_intaview.job01 .box a,
#list_intaview.job02 .box a,
#list_intaview.job03 .box a,
#list_intaview.job04 .box a,
#list_intaview.job05 .box a,
#list_intaview.job06 .box a,
#list_intaview.job07 .box a,
#list_intaview.job08 .box a{}
#list_intaview.job01 .box a.job01 span span span,
#list_intaview.job02 .box a.job02 span span span,
#list_intaview.job03 .box a.job03 span span span,
#list_intaview.job04 .box a.job04 span span span,
#list_intaview.job05 .box a.job05 span span span,
#list_intaview.job06 .box a.job06 span span span,
#list_intaview.job07 .box a.job07 span span span,
#list_intaview.job08 .box a.job08 span span span{
background-color: #cc0000;
color: #fff;
display: inline;
}
#list_intaview .box a:hover{
opacity: 1;
}
#list_intaview .box a:hover img{
opacity: 0;
}
main #news {
padding-right: 70px;
}
@media screen and (max-width: 750px){
body.fullsize.recruit.single main .fresh section {
padding: 18px 18px 48px;
}
body.fullsize.recruit main .fresh section h1{
font-size: 25px;
}
body.fullsize.recruit main .fresh section h1 + p{
font-size: 15px;
}
body.fullsize.recruit main .fresh section h2{
font-size: 17px;
margin: 34px 0 12px;
}
body.fullsize.recruit main .fresh section h2 img{
margin: 0 auto 4px;
width: 134px;
height: 14px;
}
#select_intaview{
max-width: 360px;
margin: 0 auto 48px;
}
#list_intaview .box{
width: 100%;
margin: 0 0 18px;
height: 50vw;
overflow: hidden;
}
#list_intaview .empty{
width: 100%;
}
#list_intaview .box div{
font-size: 14px;
width: 38%;
}
#list_intaview .box a .photoArea{
width: 70vw;
height: 50vw;
}
#list_intaview .box a .photoArea img{
display: block;
width: 100%;
height: auto;
}
main #news {
padding-right: 18px;
}
}
@media screen and (min-width: 751px) and (max-width: 1080px){
#list_intaview .box{
width: 48%;
}
#list_intaview .empty{
width: 48%;
}
#list_intaview .box div{
font-size: 18px;
width: 38%;
}
#list_intaview .box a .photoArea{
width: 34vw;
height: auto;
}
#list_intaview .box a .photoArea img{
display: block;
width: 100%;
height: auto;
}
}
/*------------------ 新卒採用コンテンツ内容ここまで ------------------*/
/*------------------ モーダルここから ------------------*/
.modal{
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: rgba(255,255,255,.98);
z-index: 4;
}
.modal.singlePage {
position: static;
}
.modal .inner{
box-sizing: border-box;
padding: 18px 18px;
height: 100%;
}
@media screen and (min-width: 751px) and (max-width: 1080px){
.modal .inner{padding: 60px 60px 60px 0;}
}
@media screen and (min-width: 1081px) and (max-width: 1280px){
.modal .inner{padding: 100px 100px;}
}
@media screen and (min-width: 1281px){
.modal .inner{
max-width: 1280px;
margin: 0 auto;
padding: 100px 100px;
}
.singlePage inner {
padding-left: 0;
}
}
.modal .inner h1{
margin: 0 0 36px;
}
.modal .inner h1 img{
vertical-align: top;
width: 430px;
height: 47px;
}
.modal .inner .position .photoArea{
position: relative;
}
.modal .inner .position .photoArea img{
width: 256px;
height: 380px;
}
.modal .inner .position .photoArea span{
display: inline-block;
position: absolute;
left: 236px;
top: 240px;
line-height: 2em;
}
.modal .inner .position .photoArea .positionImg{
width: calc(100% - 330px);
position: absolute;
right: 0;
top: 0;
height: auto;
margin: 0;
}
.modal .inner .position .photoArea .positionImg.pc{
display: block;
background: url(../images/img_job.svg) center center no-repeat;
background-size: contain;
}
.modal .inner .position .photoArea .positionImg.sp{
display: none;
background: url(../images/img_job_sp.svg) center center no-repeat;
background-size: contain;
}
@media screen and (max-width: 750px){
body.fullsize.recruit main .fresh .modal .inner h1{
margin: 0 0 18px;
text-align: left;
width: 180px;
}
body.fullsize.recruit main .fresh .modal .inner h1 img{
vertical-align: top;
width: 215px;
height: 20px;
}
.modal .inner .position .photoArea{
position: relative;
margin: 0 auto;
text-align: center;
}
.modal .inner .position .photoArea img{
width: 100%;
max-width: 400px;
height: auto;
display: inline-block;
margin-bottom: 12px;
}
.modal .inner .position .photoArea span{
display: block;
position: relative;
left: auto;
top: auto;
line-height: 2em;
text-align: left;
font-size: 18px;
margin: 12px auto;
max-width: 400px;
}
.modal .inner .position .photoArea .positionImg{
width: 100%;
position: relative;
right: 0;
top: 0;
height: auto;
margin: 24px auto;
}
.modal .inner .position .photoArea .positionImg.pc{
display: none;
}
.modal .inner .position .photoArea .positionImg.sp{
display: block;
}
}
@media screen and (min-width: 751px) and (max-width: 1080px){
.modal .inner .position .photoArea{
position: relative;
margin: 0 auto;
text-align: center;
}
.modal .inner .position .photoArea img{
width: 256px;
height: 380px;
display: inline-block;
margin-bottom: 48px;
}
.modal .inner .position .photoArea span{
display: inline-block;
position: absolute;
left: calc(50% + 100px);
top: 80px;
line-height: 2em;
text-align: left;
}
.modal .inner .position .photoArea .positionImg{
width: 100%;
position: relative;
right: 0;
top: 0;
height: auto;
margin: 0;
}
.modal .inner .position .photoArea .positionImg.pc{
display: block;
}
.modal .inner .position .photoArea .positionImg.sp{
display: none;
}
}
@media screen and (max-width: 750px){
body.fullsize.recruit main .fresh section .modal .inner{
position: relative;
}
body.fullsize.recruit main .fresh section .modal .inner:after{
content: "";
display: block;
width: 60px;
height: 40px;
background: url(../images/profile/img_arrow.svg) center center no-repeat;
background-size: 60px 40px;
position: fixed;
bottom: 30px;
left: calc(50% - 30px);
opacity: 1;
transition: all 1s ease-out;
animation: Flash1 2s infinite;
}
@keyframes Flash1{
50%{
opacity: 0;
}
}
body.fullsize.recruit main .fresh section .modal .inner.hide:after{
opacity: 0;
}
}
body.fullsize.recruit main .fresh section .modal .inner .profileBox h2{
font-weight: normal;
margin: 80px 0;
text-align: left;
font-size: 50px;
}
body.fullsize.recruit main .fresh section .modal .inner .profileBox h3{
font-weight: normal;
margin: 28px 0;
text-align: left;
font-size: 30px;
}
body.fullsize.recruit main .fresh section .modal .inner .profileBox p{
margin: 18px 0 60px;
font-size: 18px;
max-width: 900px;
}
@media screen and (max-width: 750px){
body.fullsize.recruit main .fresh section .modal .inner .profileBox h2{
margin: 40px 0 20px;
font-size: 24px;
}
body.fullsize.recruit main .fresh section .modal .inner .profileBox h3{
margin: 12px 0;
font-size: 20px;
}
body.fullsize.recruit main .fresh section .modal .inner .profileBox p{
margin: 12px 0 24px;
font-size: 14px;
}
}
@media screen and (min-width: 751px) and (max-width: 1080px){
body.fullsize.recruit main .fresh section .modal .inner .profileBox p{
margin: 18px 0 60px;
font-size: 18px;
max-width: 100%;
}
}
.modal .inner .profileBox .leftImg{
margin-left: -100px;
}
body.fullsize.recruit main .fresh section .modal .inner .profileBox .leftImg img{
max-width: 900px;
display: inline-block;
}
.modal .inner .profileBox .rightImg{
margin-right: -100px;
text-align: right;
}
body.fullsize.recruit main .fresh section .modal .inner .profileBox .rightImg img{
max-width: 900px;
display: inline-block;
}
@media screen and (max-width: 750px){
.modal .inner .profileBox .leftImg{
margin-left: -18px;
margin-right: -18px;
}
body.fullsize.recruit main .fresh section .modal .inner .profileBox .leftImg img{
max-width: 100%;
display: inline-block;
}
.modal .inner .profileBox .rightImg{
margin-left: -18px;
margin-right: -18px;
}
body.fullsize.recruit main .fresh section .modal .inner .profileBox .rightImg img{
max-width: 100%;
display: inline-block;
}
}
@media screen and (min-width: 751px) and (max-width: 1080px){
.modal .inner .profileBox .leftImg{
margin-left: -60px;
}
body.fullsize.recruit main .fresh section .modal .inner .profileBox .leftImg img{
max-width: 100%;
display: inline-block;
}
.modal .inner .profileBox .rightImg{
margin-right: -60px;
text-align: right;
}
body.fullsize.recruit main .fresh section .modal .inner .profileBox .rightImg img{
max-width: 100%;
display: inline-block;
}
}
.modal .inner .profileBox .messageArea{
max-width: 816px;
box-sizing: border-box;
padding: 40px;
border: 5px solid #cc0000;
margin: 60px auto;
text-align: center;
}
body.fullsize.recruit main .fresh section .modal .inner .profileBox .messageArea img{
width: 268px;
height: 74px;
display: inline-block;
margin-top: -55px;
}
body.fullsize.recruit main .fresh section .modal .inner .profileBox .messageArea p{
margin: 0;
font-size: 25px;
}
.modal .inner .profileBox .parsonalArea{
max-width: 816px;
box-sizing: border-box;
margin: 60px auto;
display: flex;
flex-wrap: wrap;
}
.modal .inner .profileBox .parsonalArea .day{
width: 100%;
box-sizing: border-box;
}
body.fullsize.recruit main .fresh section .modal .inner .profileBox .parsonalArea .day h3{
margin: 0 0 48px;
font-size: 25px;
color: #cc0000;
text-align: center;
font-weight: bold;
}
body.fullsize.recruit main .fresh section .modal .inner .profileBox .parsonalArea .day h3 img{
width: 325px;
height: 35px;
margin: 0 auto 8px;
}
body.fullsize.recruit main .fresh section .modal .inner .profileBox .parsonalArea .day h3 + img{
margin-right: 60px;
}
.modal .inner .profileBox .parsonalArea .profile{
width: 100%;
box-sizing: border-box;
}
body.fullsize.recruit main .fresh section .modal .inner .profileBox .parsonalArea .profile h3{
margin: 0 0 48px;
font-size: 25px;
color: #cc0000;
text-align: center;
font-weight: bold;
}
body.fullsize.recruit main .fresh section .modal .inner .profileBox .parsonalArea .profile h3 img{
width: 193px;
height: 35px;
margin: 0 auto 8px;
}
@media screen and (max-width: 750px){
.modal .inner .profileBox .messageArea{
padding: 12px;
border: 4px solid #cc0000;
margin: 40px auto 24px;
text-align: center;
}
body.fullsize.recruit main .fresh section .modal .inner .profileBox .messageArea img{
width: 153px;
height: 44px;
display: inline-block;
margin-top: -24px;
}
body.fullsize.recruit main .fresh section .modal .inner .profileBox .messageArea p{
margin: 0;
font-size: 18px;
text-align: left;
}
.modal .inner .profileBox .parsonalArea{
max-width: 816px;
box-sizing: border-box;
margin: 24px auto;
display: flex;
flex-wrap: wrap;
}
.modal .inner .profileBox .parsonalArea .day{
width: 100%;
box-sizing: border-box;
}
body.fullsize.recruit main .fresh section .modal .inner .profileBox .parsonalArea .day h3{
margin: 32px auto 24px;
font-size: 17px;
color: #cc0000;
text-align: center;
}
body.fullsize.recruit main .fresh section .modal .inner .profileBox .parsonalArea .day h3 img{
width: 190px;
height: 22px;
margin: 0 auto 8px;
}
body.fullsize.recruit main .fresh section .modal .inner .profileBox .parsonalArea .day h3 + img{
margin-right: 60px;
max-width: 400px;
margin: 12px auto 24px;
}
.modal .inner .profileBox .parsonalArea .profile{
width: 100%;
box-sizing: border-box;
}
body.fullsize.recruit main .fresh section .modal .inner .profileBox .parsonalArea .profile h3{
margin: 32px auto 24px;
font-size: 17px;
color: #cc0000;
text-align: center;
}
body.fullsize.recruit main .fresh section .modal .inner .profileBox .parsonalArea .profile h3 img{
width: 112px;
height: 17px;
margin: 0 auto 8px;
}
body.fullsize.recruit main .fresh section .modal .inner .profileBox .parsonalArea .profile h3 + p{
margin-bottom: 60px;
}
}
.modal .inner a.closeBtn{
display: block;
width: 44px;
height: 62px;
position: fixed;
bottom: 40px;
right: 80px;
}
.modal .inner a.closeBtn img{
vertical-align: top;
margin: 0;
}
@media screen and (max-width: 750px){
.modal .inner a.closeBtn{
bottom: 12px;
right: 12px;
}
}
@media screen and (min-width: 751px) and (max-width: 1080px){
.modal .inner a.closeBtn{
bottom: 14px;
right: 14px;
}
}
/*------------------ モーダルここまで ------------------*/
/*------------------ 求める人材像ここから ------------------*/
@media screen and (max-width: 750px){}
@media screen and (min-width: 751px) and (max-width: 1080px){}
@media screen and (min-width: 1081px) and (max-width: 1280px){}
@media screen and (min-width: 1281px){}
body.recruit .human .mainImages{
margin-top: 0!important;
max-width: 1280px;
margin: 0 auto;
padding-left: 70px;
z-index: 0;
box-sizing: border-box;
}
@media screen and (max-width: 750px){
body.recruit .human .mainImages{
padding-left: 0;
height: 230px;
}
}
@media screen and (min-width: 751px) and (max-width: 1080px){
body.recruit .human .mainImages{
padding-left: 0;
}
}
body.recruit .human .mainImages div{
background: url(../images/human/img_main@2x.jpg) left top no-repeat;
background-size: cover;
align-items: start;
box-sizing: border-box;
padding-left: 40px;
text-align: left;
}
@media screen and (max-width: 750px){
body.recruit .human .mainImages div{
background: url(../images/human/img_main@2x.jpg) center top no-repeat;
background-size: cover;
justify-content: flex-end;
height: 230px;
padding-left: 18px;
}
}
@media screen and (min-width: 751px) and (max-width: 1080px){
body.recruit .human .mainImages div{
background: url(../images/human/img_main@2x.jpg) left top no-repeat;
background-size: cover;
}
}
body.recruit main .human .mainImages div span{
padding-top: 0;
letter-spacing: 2px;
font-size: 70px;
font-weight: normal;
line-height: 1.4em;
font-family: "Helvetica Neue", Arial, -apple-system, BlinkMacSystemFont, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, "Yu Gothic", YuGothic, "メイリオ", Meiryo, sans-serif;
}
body.recruit main .human .mainImages div span + span{
letter-spacing: 0;
padding-top: 8px;
font-size: 36px;
font-weight: normal;
line-height: 1.6em;
}
body.recruit main .human section .inner{
padding: 0 70px 0 0;
}
@media screen and (max-width: 750px){
body.recruit main .human .mainImages div span{
font-size: 20px;
}
body.recruit main .human .mainImages div span + span{
font-size: 14px;
margin-bottom: 30px;
}
body.recruit main .human section .inner{
padding: 0 18px 0 0;
}
}
@media screen and (min-width: 751px) and (max-width: 1080px){
body.recruit main .human .mainImages div span{
font-size: 50px;
}
body.recruit main .human .mainImages div span + span{
font-size: 25px;
}
body.recruit main .human section .inner{
padding: 0 70px 0 0;
}
}
body.recruit main .human section .inner p{
font-size: 18px;
}
body.recruit main .human section .inner p.catch{
margin: 54px 0 100px;
}
@media screen and (max-width: 750px){
body.recruit main .human section .inner p{
font-size: 14px;
}
body.recruit main .human section .inner p.catch{
margin: 30px 0 40px;
}
}
body.recruit main .human section .inner p.limit900{
max-width: 900px;
}
body.recruit main .human section .inner p.limit710{
max-width: 710px;
}
body.recruit main .human section .inner p.limit610{
max-width: 610px;
}
body.recruit main .human section .inner .lineBox{
border: 6px solid #cc0000;
padding: 120px 30px;
position: relative;
margin-left: 100px;
margin-bottom: 260px;
}
body.recruit main .human section .inner .lineBox + .lineBox{
margin-left: 0;
margin-right: 100px;
}
body.recruit main .human section .inner .lineBox + .lineBox + .lineBox{
margin-left: 160px;
margin-right: 0;
margin-bottom: 400px;
}
body.recruit main .human section .inner .lineBox img{
position: absolute;
bottom: -320px;
right: 44px;
width: 580px;
margin: 0;
z-index: 1;
}
body.recruit main .human section .inner .lineBox + .lineBox img{
right: auto;
left: 70px;
width: 580px;
}
body.recruit main .human section .inner .lineBox + .lineBox + .lineBox img{
right: 44px;
left: auto;
width: 580px;
}
body.recruit main .human section .inner .lineBox h2{
font-size: 60px;
margin-bottom: 40px;
font-weight: normal;
}
body.recruit main .human section .inner .limit800{
max-width: 800px;
margin: 0 auto;
}
body.recruit main .human section .inner h3{
font-size: 40px;
margin-bottom: 40px;
font-weight: normal;
color: #cc0000;
}
body.recruit main .human section .inner dl.noLine{
display: flex;
flex-wrap: wrap;
}
body.recruit main .human section .inner dl.noLine dt{
width: 10em;
color: #1e1e1e;
margin-bottom: 40px;
}
body.recruit main .human section .inner dl.noLine dd{
width: calc(100% - 10em);
margin-left: 0;
margin-bottom: 40px;
box-sizing: border-box;
padding-left: 1em;
}
@media screen and (max-width: 750px){
body.recruit main .human section .inner .lineBox h2{
font-size: 28px;
}
body.recruit main .human section .inner .lineBox{
border: 4px solid #cc0000;
padding: 18px 18px 60px;
margin-left: 0;
margin-top: 0;
margin-bottom: 60vw;
}
body.recruit main .human section .inner .lineBox + .lineBox{
margin-left: 0;
margin-right: 0;
}
body.recruit main .human section .inner .lineBox + .lineBox + .lineBox{
margin-left: 0;
margin-right: 0;
margin-bottom: 60vw;
}
body.recruit main .human section .inner .lineBox img{
bottom: -46vw;
right: -14px;
left: auto;
width: 80vw;
}
body.recruit main .human section .inner .lineBox + .lineBox img{
right: -14px;
left: auto;
width: 80vw;
}
body.recruit main .human section .inner .lineBox + .lineBox + .lineBox img{
right: -14px;
left: auto;
width: 80vw;
}
body.recruit main .human section .inner dl.noLine dt{
width: 100%;
text-align: center;
font-size: 18px;
margin-bottom: 24px;
}
body.recruit main .human section .inner dl.noLine dd{
width: 100%;
padding-left: 0;
font-size: 14px;
}
body.recruit main .human section .inner h3{
font-size: 28px;
text-align: center;
margin: 28px 0;
}
}
@media screen and (min-width: 751px) and (max-width: 1080px){
body.recruit main .human section .inner .lineBox h2{
font-size: 50px;
}
body.recruit main .human section .inner .lineBox{
padding: 120px 30px;
margin-left: 0;
margin-top: 100px;
margin-bottom: 340px;
}
body.recruit main .human section .inner .lineBox + .lineBox{
margin-left: 0;
margin-right: 0;
}
body.recruit main .human section .inner .lineBox + .lineBox + .lineBox{
margin-left: 0;
margin-right: 0;
margin-bottom: 360px;
}
body.recruit main .human section .inner .lineBox img{
bottom: -220px;
right: auto;
left: 30px;
width: 430px;
}
body.recruit main .human section .inner .lineBox + .lineBox img{
right: auto;
left: 30px;
width: 430px;
}
body.recruit main .human section .inner .lineBox + .lineBox + .lineBox img{
right: auto;
left: 30px;
width: 430px;
}
}
/*------------------ 求める人材像ここまで ------------------*/
/*------------------ 働き方ここから ------------------*/
@media screen and (max-width: 750px){}
@media screen and (min-width: 751px) and (max-width: 1080px){}
@media screen and (min-width: 1081px) and (max-width: 1280px){}
@media screen and (min-width: 1281px){}
body.recruit .work .mainImages{
margin-top: 0!important;
max-width: 1280px;
margin: 0 auto;
padding-left: 70px;
z-index: 0;
box-sizing: border-box;
}
@media screen and (max-width: 750px){
body.recruit .work .mainImages{
padding-left: 0;
height: 230px;
}
}
@media screen and (min-width: 751px) and (max-width: 1080px){
body.recruit .work .mainImages{
padding-left: 0;
}
}
body.recruit .work .mainImages div{
background: url(../images/work/img_main@2x.png) left top no-repeat;
background-size: cover;
align-items: start;
box-sizing: border-box;
padding-left: 40px;
text-align: left;
}
@media screen and (max-width: 750px){
body.recruit .work .mainImages div{
background: url(../images/work/img_main@2x.png) center top no-repeat;
background-size: cover;
justify-content: flex-end;
height: 230px;
padding-left: 18px;
}
}
@media screen and (min-width: 751px) and (max-width: 1080px){
body.recruit .work .mainImages div{
background: url(../images/work/img_main@2x.png) left top no-repeat;
background-size: cover;
}
}
body.recruit main .work .mainImages div span{
padding-top: 0;
letter-spacing: 2px;
font-size: 70px;
font-weight: normal;
line-height: 1.4em;
font-family: "Helvetica Neue", Arial, -apple-system, BlinkMacSystemFont, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, "Yu Gothic", YuGothic, "メイリオ", Meiryo, sans-serif;
}
body.recruit main .work .mainImages div span + span{
letter-spacing: 0;
padding-top: 8px;
font-size: 36px;
font-weight: normal;
line-height: 1.6em;
}
body.recruit main .work section .inner{
padding: 0 70px 0 0;
}
@media screen and (max-width: 750px){
body.recruit main .work .mainImages div span{
font-size: 20px;
}
body.recruit main .work .mainImages div span + span{
font-size: 14px;
margin-bottom: 30px;
}
body.recruit main .work section .inner{
padding: 0 18px 0 0;
}
}
@media screen and (min-width: 751px) and (max-width: 1080px){
body.recruit main .work .mainImages div span{
font-size: 50px;
}
body.recruit main .work .mainImages div span + span{
font-size: 25px;
}
body.recruit main .work section .inner{
padding: 0 70px 0 0;
}
}
body.recruit main .work .limit800{
margin: 0 auto;
max-width: 800px;
}
body.recruit main .work h2{
font-size: 50px;
font-weight: normal;
margin: 60px 0 24px;
color: #cc0000;
}
body.recruit main .work h3{
font-size: 30px;
font-weight: normal;
margin: 24px 0 48px;
color: #cc0000;
}
body.recruit main .work h4{
font-size: 25px;
font-weight: bold;
margin: 24px 0;
color: #1e1e1e;
}
body.recruit main .work p{
margin-bottom: 40px;
}
@media screen and (max-width: 750px){
body.recruit main .work h2{
font-size: 28px;
font-weight: normal;
margin: 30px 0 18px;
color: #cc0000;
}
body.recruit main .work h3{
font-size: 18px;
font-weight: normal;
margin: 18px 0 32px;
color: #cc0000;
}
body.recruit main .work h4{
font-size: 18px;
font-weight: bold;
margin: 20px 0;
color: #1e1e1e;
}
body.recruit main .work p{
margin-bottom: 30px;
}
}
body.recruit main .work .contentsArea .box{display: none;}
body.recruit main .work .tabArea{
padding: 0;
margin: 60px 0;
list-style-type: none;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
body.recruit main .work .tabArea li{
width: 15%;
}
body.recruit main .work .tabArea li a{
display: block;
text-align: center;
background-color: #CCD1D1;
border: 3px solid #cc0000;
color: #cc0000;
text-decoration: none;
font-size: 20px;
line-height: 54px;
box-sizing: border-box;
position: relative;
white-space: nowrap;
}
body.recruit main .work .tabArea li a.open{
background-color: #cc0000;
color: #fff;
z-index: 1;
}
body.recruit main .work .tabArea li a.open:after{
content: "";
display: block;
width: 30px;
height: 30px;
transform:rotate(45deg);
position: absolute;
bottom: -15px;
left: calc(50% - 15px);
background-color: #cc0000;
z-index: -1;
}
@media screen and (max-width: 750px){
body.recruit main .work .tabArea{
margin: 0 0 18px;
justify-content: space-between;
}
body.recruit main .work .tabArea li{
width: 48%;
margin: 0 0 20px;
}
body.recruit main .work .tabArea li a{
font-size: 14px;
line-height: 40px;
}
body.recruit main .work .tabArea li a.open:after{
display: none;
}
body.recruit main .work .accordionlist dd h4{
font-size: 14px;
margin: 12px 0 12px;
}
body.recruit main .work .accordionlist dd p{
font-size: 14px;
margin: 12px 0 12px;
}
}
@media screen and (min-width: 751px) and (max-width: 1080px){
body.recruit main .work .tabArea{
margin: 60px 0;
justify-content: space-between;
}
body.recruit main .work .tabArea:after{
content: "";
display: block;
width: 30%;
height: 0px;
}
body.recruit main .work .tabArea li{
width: 30%;
margin: 0 0 20px;
}
body.recruit main .work .tabArea li a.open:after{
display: none;
}
body.recruit main .work .accordionlist dt.title{
font-size: 18px;
line-height: 48px;
}
body.recruit main .work p{
font-size: 18px;
}
body.recruit main .work .accordionlist dd p{
font-size: 18px;
margin: 20px 0;
}
}
body.recruit main .work .flexBox{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
body.recruit main .work .flexBox .half{
width: 48%;
margin-bottom: 24px;
}
body.recruit main .work .flexBox .half img{
max-width: 100%;
max-height: 300px;
margin: 18px 0;
}
body.recruit main .work .flexBox .three{
width: 32%;
margin-bottom: 24px;
}
body.recruit main .work .flexBox .three img{
max-width: 100%;
max-height: 300px;
margin: 18px 0;
}
body.recruit main .work .flexBox .three img.icon{
width: 1.6em;
height: 1.6em;
margin-top: 0;
}
@media screen and (max-width: 750px){
body.recruit main .work .flexBox .half{
width: 100%;
margin-bottom: 24px;
}
body.recruit main .work .flexBox .half img{
max-width: 100%;
margin: 18px 0;
}
body.recruit main .work .flexBox .three{
width: 100%;
margin-bottom: 0;
}
body.recruit main .work .flexBox .three img{
max-width: 100%;
margin: 12px 0;
}
body.recruit main .work .flexBox img.icon{
width: 1.6em;
height: 1.6em;
max-width: 100%;
margin: 0 0 12px;
}
body.recruit main .work .flexBox .three p{
font-size: 14px;
}
}
@media screen and (min-width: 751px) and (max-width: 1080px){
body.recruit main .work .flexBox .three{
width: 48%;
margin-bottom: 0;
}
body.recruit main .work .flexBox .three img{
max-width: 100%;
margin: 12px 0;
}
body.recruit main .work .flexBox img.icon{
width: 1.6em;
height: 1.6em;
max-width: 100%;
margin: 0 0 12px;
}
}
/*------------------ 働き方ここまで ------------------*/
/*------------------ 採用情報を知るここから ------------------*/
@media screen and (max-width: 750px){}
@media screen and (min-width: 751px) and (max-width: 1080px){}
@media screen and (min-width: 1081px) and (max-width: 1280px){}
@media screen and (min-width: 1281px){}
body.recruit .information .mainImages{
margin-top: 0!important;
max-width: 1280px;
margin: 0 auto;
padding-left: 70px;
z-index: 0;
box-sizing: border-box;
}
@media screen and (max-width: 750px){
body.recruit .information .mainImages{
padding-left: 0;
height: 230px;
}
}
@media screen and (min-width: 751px) and (max-width: 1080px){
body.recruit .information .mainImages{
padding-left: 0;
}
}
body.recruit .information .mainImages div{
background: url(../images/information/img_main@2x.png) left top no-repeat;
background-size: cover;
align-items: start;
box-sizing: border-box;
padding-left: 40px;
text-align: left;
}
@media screen and (max-width: 750px){
body.recruit .information .mainImages div{
background: url(../images/information/img_main@2x.png) center top no-repeat;
background-size: cover;
justify-content: flex-end;
height: 230px;
padding-left: 18px;
}
}
@media screen and (min-width: 751px) and (max-width: 1080px){
body.recruit .information .mainImages div{
background: url(../images/information/img_main@2x.png) left top no-repeat;
background-size: cover;
}
}
body.recruit main .information .mainImages div span{
padding-top: 0;
letter-spacing: 2px;
font-size: 70px;
font-weight: normal;
line-height: 1.4em;
font-family: "Helvetica Neue", Arial, -apple-system, BlinkMacSystemFont, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, "Yu Gothic", YuGothic, "メイリオ", Meiryo, sans-serif;
}
body.recruit main .information .mainImages div span + span{
letter-spacing: 0;
padding-top: 8px;
font-size: 36px;
font-weight: normal;
line-height: 1.6em;
}
body.recruit main .information section .inner{
padding: 0 70px 0 0;
}
@media screen and (max-width: 750px){
body.recruit main .information .mainImages div span{
font-size: 20px;
}
body.recruit main .information .mainImages div span + span{
font-size: 14px;
margin-bottom: 30px;
}
body.recruit main .information section .inner{
padding: 0 18px 0 0;
}
}
@media screen and (min-width: 751px) and (max-width: 1080px){
body.recruit main .information .mainImages div span{
font-size: 50px;
}
body.recruit main .information .mainImages div span + span{
font-size: 25px;
}
body.recruit main .information section .inner{
padding: 0 70px 0 0;
}
}
body.recruit main .information section .inner p{
font-size: inherit;
}
body.recruit main .information section .inner p.catch{
margin: 54px 0 100px;
}
@media screen and (max-width: 750px){
body.recruit main .information section .inner p{
font-size: 14px;
}
body.recruit main .information section .inner p.catch{
margin: 30px 0 40px;
}
}
body.recruit main .information section .inner p.limit900{
max-width: 900px;
}
body.recruit main .information section .inner p.limit710{
max-width: 710px;
}
body.recruit main .information section .inner p.limit610{
max-width: 610px;
}
body.recruit main .information .limit800{
margin: 0 auto;
max-width: 800px;
}
body.recruit main .information h2{
font-size: 50px;
font-weight: normal;
margin: 60px 0 24px;
color: #cc0000;
}
body.recruit main .information h3{
font-size: 30px;
font-weight: normal;
margin: 24px 0 48px;
color: #cc0000;
}
body.recruit main .information h4{
font-size: 25px;
font-weight: bold;
margin: 24px 0;
color: #1e1e1e;
}
body.recruit main .information p{
margin-bottom: 40px;
}
@media screen and (max-width: 750px){
body.recruit main .information h2{
font-size: 28px;
font-weight: normal;
margin: 30px 0 18px;
color: #cc0000;
}
body.recruit main .information h3{
font-size: 18px;
font-weight: normal;
margin: 18px 0 32px;
color: #cc0000;
}
body.recruit main .information h4{
font-size: 18px;
font-weight: bold;
margin: 20px 0;
color: #1e1e1e;
}
body.recruit main .information p{
margin-bottom: 30px;
}
}
/*------------------ 採用情報を知るここまで ------------------*/
/*------------------ キヤノン電子を知るここから ------------------*/
@media screen and (max-width: 750px){}
@media screen and (min-width: 751px) and (max-width: 1080px){}
@media screen and (min-width: 1081px) and (max-width: 1280px){}
@media screen and (min-width: 1281px){}
body.recruit .about .mainImages{
margin-top: 0!important;
max-width: 1280px;
margin: 0 auto;
padding-left: 70px;
z-index: 0;
box-sizing: border-box;
}
@media screen and (max-width: 750px){
body.recruit .about .mainImages{
padding-left: 0;
height: 230px;
}
}
@media screen and (min-width: 751px) and (max-width: 1080px){
body.recruit .about .mainImages{
padding-left: 0;
}
}
body.recruit .about .mainImages div{
background: url(../images/about/img_main@2x.png) left top no-repeat;
background-size: cover;
align-items: start;
box-sizing: border-box;
padding-left: 40px;
text-align: left;
}
@media screen and (max-width: 750px){
body.recruit .about .mainImages div{
background: url(../images/about/img_main@2x.png) center top no-repeat;
background-size: cover;
justify-content: flex-end;
height: 230px;
padding-left: 18px;
}
}
@media screen and (min-width: 751px) and (max-width: 1080px){
body.recruit .about .mainImages div{
background: url(../images/about/img_main@2x.png) left top no-repeat;
background-size: cover;
}
}
body.recruit main .about .mainImages div span{
padding-top: 0;
letter-spacing: 2px;
font-size: 70px;
font-weight: normal;
line-height: 1.4em;
font-family: "Helvetica Neue", Arial, -apple-system, BlinkMacSystemFont, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, "Yu Gothic", YuGothic, "メイリオ", Meiryo, sans-serif;
}
body.recruit main .about .mainImages div span + span{
letter-spacing: 0;
padding-top: 8px;
font-size: 36px;
font-weight: normal;
line-height: 1.6em;
}
body.recruit main .about section .inner{
padding: 0 70px 0 0;
}
@media screen and (max-width: 750px){
body.recruit main .about .mainImages div span{
font-size: 20px;
}
body.recruit main .about .mainImages div span + span{
font-size: 14px;
margin-bottom: 30px;
}
body.recruit main .about section .inner{
padding: 0 18px 0 0;
}
}
@media screen and (min-width: 751px) and (max-width: 1080px){
body.recruit main .about .mainImages div span{
font-size: 50px;
}
body.recruit main .about .mainImages div span + span{
font-size: 25px;
}
body.recruit main .about section .inner{
padding: 0 70px 0 0;
}
}
body.recruit main .about .limit800{
margin: 0 auto;
max-width: 800px;
}
body.recruit main .about h2{
font-size: 50px;
font-weight: normal;
margin: 60px 0 24px;
color: #cc0000;
}
body.recruit main .about h3{
font-size: 30px;
font-weight: normal;
margin: 24px 0 48px;
color: #cc0000;
}
body.recruit main .about h4{
font-size: 25px;
font-weight: bold;
margin: 24px 0;
color: #1e1e1e;
}
body.recruit main .about p{
margin-bottom: 40px;
}
@media screen and (max-width: 750px){
body.recruit main .about h2{
font-size: 28px;
font-weight: normal;
margin: 30px 0 18px;
color: #cc0000;
}
body.recruit main .about h3{
font-size: 18px;
font-weight: normal;
margin: 18px 0 32px;
color: #cc0000;
}
body.recruit main .about h4{
font-size: 18px;
font-weight: bold;
margin: 20px 0;
color: #1e1e1e;
}
body.recruit main .about p{
margin-bottom: 30px;
}
}
body.recruit main .about .contentsArea .box{display: none;}
body.recruit main .about .tabArea{
padding: 0;
margin: 60px 0;
list-style-type: none;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
body.recruit main .about .tabArea li{
width: 15%;
}
body.recruit main .about .tabArea li a{
display: flex;
align-items: center;
justify-content: center;
text-align: center;
background-color: #CCD1D1;
border: 3px solid #cc0000;
color: #cc0000;
text-decoration: none;
font-size: 18px;
box-sizing: border-box;
position: relative;
height: 100px;
}
body.recruit main .about .tabArea li a.open{
background-color: #cc0000;
color: #fff;
z-index: 1;
}
body.recruit main .about .tabArea li a.open:after{
content: "";
display: block;
width: 30px;
height: 30px;
transform:rotate(45deg);
position: absolute;
bottom: -15px;
left: calc(50% - 15px);
background-color: #cc0000;
z-index: -1;
}
@media screen and (max-width: 750px){
body.recruit main .about .tabArea{
margin: 0 0 18px;
justify-content: space-between;
}
body.recruit main .about .tabArea li{
width: 48%;
margin: 0 0 20px;
}
body.recruit main .about .tabArea li a{
font-size: 14px;
height: 60px;
}
body.recruit main .about .tabArea li a.open:after{
display: none;
}
body.recruit main .about .accordionlist dd h4{
font-size: 14px;
margin: 12px 0 12px;
}
body.recruit main .about .accordionlist dd p{
font-size: 14px;
margin: 12px 0 12px;
}
}
@media screen and (min-width: 751px) and (max-width: 1080px){
body.recruit main .about .tabArea{
margin: 60px 0;
justify-content: space-between;
}
body.recruit main .about .tabArea li{
width: 30%;
margin: 0 0 20px;
}
body.recruit main .about .tabArea li a.open:after{
display: none;
}
body.recruit main .about .accordionlist dt.title{
font-size: 18px;
line-height: 48px;
}
body.recruit main .about p{
font-size: 18px;
}
body.recruit main .about .accordionlist dd p{
font-size: 18px;
margin: 20px 0;
}
}
body.recruit main .about .flexBox{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
body.recruit main .about .flexBox .half{
width: 48%;
margin-bottom: 24px;
}
body.recruit main .about .flexBox .half img{
max-width: 100%;
max-height: 300px;
margin: 18px 0;
}
@media screen and (max-width: 750px){
body.recruit main .about .flexBox .half{
width: 100%;
margin-bottom: 24px;
}
body.recruit main .about .flexBox .half img{
max-width: 100%;
margin: 18px 0;
}
}
/*------------------ キヤノン電子を知るここまで ------------------*/
/*------------------ マイフェイバリットここから ------------------*/
@media screen and (max-width: 750px){}
@media screen and (min-width: 751px) and (max-width: 1080px){}
@media screen and (min-width: 1081px) and (max-width: 1280px){}
@media screen and (min-width: 1281px){}
body.recruit .myfavorite .mainImages{
margin-top: 0!important;
max-width: 1280px;
margin: 0 auto;
padding-left: 70px;
z-index: 0;
box-sizing: border-box;
}
@media screen and (max-width: 750px){
body.recruit .myfavorite .mainImages{
padding-left: 0;
height: 230px;
}
}
@media screen and (min-width: 751px) and (max-width: 1080px){
body.recruit .myfavorite .mainImages{
padding-left: 0;
}
}
body.recruit .myfavorite .mainImages div{
background: url(../images/myfavorite/img_main@2x.png) center center no-repeat;
background-size: contain;
align-items: start;
box-sizing: border-box;
padding-left: 40px;
text-align: left;
border-left: 5px solid #cc0000;
border-top: 5px solid #cc0000;
border-bottom: 5px solid #cc0000;
}
@media screen and (max-width: 750px){
body.recruit .myfavorite .mainImages{
height: 320px;
}
body.recruit .myfavorite .mainImages div{
background: url(../images/myfavorite/img_main_sp@2x.png) center center no-repeat;
background-size: contain;
justify-content: flex-end;
height: 320px;
padding-left: 18px;
border: none;
}
}
@media screen and (min-width: 751px) and (max-width: 1080px){
body.recruit .myfavorite .mainImages div{
background: url(../images/myfavorite/img_main_tab@2x.png) left center no-repeat;
background-size: contain;
}
}
body.recruit main .myfavorite .mainImages div span{
padding-top: 0;
letter-spacing: 2px;
font-size: 70px;
font-weight: normal;
line-height: 1.4em;
font-family: "Helvetica Neue", Arial, -apple-system, BlinkMacSystemFont, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, "Yu Gothic", YuGothic, "メイリオ", Meiryo, sans-serif;
}
body.recruit main .myfavorite .mainImages div span + span{
letter-spacing: 0;
padding-top: 8px;
font-size: 36px;
font-weight: normal;
line-height: 1.6em;
}
body.recruit main .myfavorite section .inner{
padding: 0 70px 0 0;
}
@media screen and (max-width: 750px){
body.recruit main .myfavorite .mainImages div span{
font-size: 20px;
}
body.recruit main .myfavorite .mainImages div span + span{
font-size: 14px;
margin-bottom: 30px;
}
body.recruit main .myfavorite section .inner{
padding: 0 18px 0 0;
}
}
@media screen and (min-width: 751px) and (max-width: 1080px){
body.recruit main .myfavorite .mainImages div span{
font-size: 50px;
}
body.recruit main .myfavorite .mainImages div span + span{
font-size: 25px;
}
body.recruit main .myfavorite section .inner{
padding: 0 70px 0 0;
}
}
body.recruit main .myfavorite section .inner p{
font-size: 18px;
}
body.recruit main .myfavorite section .inner p.catch{
margin: 54px 0 100px;
}
@media screen and (max-width: 750px){
body.recruit main .myfavorite section .inner p{
font-size: 14px;
}
body.recruit main .myfavorite section .inner p.catch{
margin: 30px 0 40px;
}
}
body.recruit main .myfavorite section .inner p.limit900{
max-width: 900px;
}
body.recruit main .myfavorite section .inner p.limit710{
max-width: 710px;
}
body.recruit main .myfavorite section .inner p.limit610{
max-width: 610px;
}
body.recruit main .myfavorite .limit800{
margin: 0 auto;
max-width: 800px;
}
body.recruit main .myfavorite h2{
font-size: 50px;
font-weight: normal;
margin: 60px 0 24px;
color: #cc0000;
}
body.recruit main .myfavorite h3{
font-size: 30px;
font-weight: normal;
margin: 24px 0 48px;
color: #cc0000;
}
body.recruit main .myfavorite h4{
font-size: 25px;
font-weight: bold;
margin: 24px 0;
color: #1e1e1e;
}
body.recruit main .myfavorite p{
margin-bottom: 40px;
}
@media screen and (max-width: 750px){
body.recruit main .myfavorite h2{
font-size: 28px;
font-weight: normal;
margin: 30px 0 18px;
color: #cc0000;
}
body.recruit main .myfavorite h3{
font-size: 18px;
font-weight: normal;
margin: 18px 0 32px;
color: #cc0000;
}
body.recruit main .myfavorite h4{
font-size: 18px;
font-weight: bold;
margin: 20px 0;
color: #1e1e1e;
}
body.recruit main .myfavorite p{
margin-bottom: 30px;
}
}
body.recruit main .myfavorite .flexBox{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
body.recruit main .myfavorite .flexBox .half{
width: 48%;
margin-bottom: 24px;
}
body.recruit main .myfavorite .flexBox.line .half{
border: 5px solid #cc0000;
padding: 24px 30px 30px;
box-sizing: border-box;
}
body.recruit main .myfavorite .flexBox.line .half p{
margin: 0;
}
body.recruit main .myfavorite .flexBox .half img{
max-width: 100%;
margin: 0 0 18px;
}
@media screen and (max-width: 750px){
body.recruit main .myfavorite .flexBox .half{
width: 100%;
margin-bottom: 24px;
}
body.recruit main .myfavorite .flexBox.line .half{
border: 5px solid #cc0000;
padding: 24px 18px 18px;
box-sizing: border-box;
}
body.recruit main .myfavorite .flexBox .half img{
max-width: 100%;
margin: 0 0 18px;
}
}
/*------------------ マイフェイバリットここまで ------------------*/
/*------------------ 事業分野と製品を知るここから ------------------*/
@media screen and (max-width: 750px){}
@media screen and (min-width: 751px) and (max-width: 1080px){}
@media screen and (min-width: 1081px) and (max-width: 1280px){}
@media screen and (min-width: 1281px){}
body.recruit .business .mainImages{
margin-top: 0!important;
max-width: 1280px;
margin: 0 auto;
padding-left: 70px;
z-index: 0;
box-sizing: border-box;
}
@media screen and (min-width: 751px) and (max-width: 1080px){
body.recruit .business .mainImages{
padding-left: 0;
}
}
body.recruit .business .mainImages div{
background: url(../images/business/img_main@2x.png) left top no-repeat;
background-size: cover;
align-items: start;
box-sizing: border-box;
text-align: left;
position: relative;
transition: all .5s ease-out;
}
body.recruit .business .mainImages.bg_btn_01 div{
background: url(../images/business/img_main_01@2x.png) left top no-repeat;
background-size: cover;
}
body.recruit .business .mainImages.bg_btn_02 div{
background: url(../images/business/img_main_02@2x.png) left top no-repeat;
background-size: cover;
}
body.recruit .business .mainImages.bg_btn_03 div{
background: url(../images/business/img_main_03@2x.png) left top no-repeat;
background-size: cover;
}
body.recruit .business .mainImages.bg_btn_04 div{
background: url(../images/business/img_main_04@2x.png) left top no-repeat;
background-size: cover;
}
body.recruit .business .mainImages.bg_btn_05 div{
background: url(../images/business/img_main_05@2x.png) left top no-repeat;
background-size: cover;
}
body.recruit .business .mainImages.bg_btn_06 div{
background: url(../images/business/img_main_06@2x.png) left top no-repeat;
background-size: cover;
}
body.recruit .business .mainImages.bg_btn_07 div{
background: url(../images/business/img_main_07@2x.png) left top no-repeat;
background-size: cover;
}
.preload{
opacity: 0;
position: absolute;
top: 0;
heihgt: 0;
width: 0;
}
body.recruit .business .mainImages div.ankerArea a img{transition: all 1s ease-out;}
body.recruit .business .mainImages div.ankerArea a:hover{opacity: 1;}
body.recruit .business .mainImages.bg_btn_01 div.ankerArea a.btn_01 img{opacity: 0;}
body.recruit .business .mainImages.bg_btn_02 div.ankerArea a.btn_02 img{opacity: 0;}
body.recruit .business .mainImages.bg_btn_03 div.ankerArea a.btn_03 img{opacity: 0;}
body.recruit .business .mainImages.bg_btn_04 div.ankerArea a.btn_04 img{opacity: 0;}
body.recruit .business .mainImages.bg_btn_05 div.ankerArea a.btn_05 img{opacity: 0;}
body.recruit .business .mainImages.bg_btn_06 div.ankerArea a.btn_06 img{opacity: 0;}
body.recruit .business .mainImages.bg_btn_07 div.ankerArea a.btn_07 img{opacity: 0;}
body.recruit .business .mainImages.bg_btn_01 div.ankerArea a.btn_01{
background: url(../images/business/img_main_01_hover.svg) left top no-repeat;
background-size: cover;
}
body.recruit .business .mainImages.bg_btn_02 div.ankerArea a.btn_02{
background: url(../images/business/img_main_02_hover.svg) left top no-repeat;
background-size: cover;
}
body.recruit .business .mainImages.bg_btn_03 div.ankerArea a.btn_03{
background: url(../images/business/img_main_03_hover.svg) left top no-repeat;
background-size: cover;
}
body.recruit .business .mainImages.bg_btn_04 div.ankerArea a.btn_04{
background: url(../images/business/img_main_04_hover.svg) left top no-repeat;
background-size: cover;
}
body.recruit .business .mainImages.bg_btn_05 div.ankerArea a.btn_05{
background: url(../images/business/img_main_05_hover.svg) left top no-repeat;
background-size: cover;
}
body.recruit .business .mainImages.bg_btn_06 div.ankerArea a.btn_06{
background: url(../images/business/img_main_06_hover.svg) left top no-repeat;
background-size: cover;
}
body.recruit .business .mainImages.bg_btn_07 div.ankerArea a.btn_07{
background: url(../images/business/img_main_07_hover.svg) left top no-repeat;
background-size: cover;
}
body.recruit .business .mainImages div img{
margin: 0;
}
body.recruit .business .mainImages div .ankerArea{
width: 1000px;
margin: 0 auto;
background: none;
position: relative;
}
body.recruit .business .mainImages div .ankerArea img{
margin: 0;
}
body.recruit .business .mainImages div .ankerArea + img{
margin: 0 auto;
width: 1000px;
margin-top: -670px;
z-index: 0;
}
body.recruit .business .mainImages div a{
display: block;
position: absolute;
}
body.recruit .business .mainImages div a img{
margin: 0;
}
body.recruit .business .mainImages div a.btn_01{
width: 160px;
height: 123px;
left: 8%;
top: 19%;
}
body.recruit .business .mainImages div a.btn_02{
width: 178px;
height: 93px;
left: 1%;
top: 52%;
}
body.recruit .business .mainImages div a.btn_03{
width: 150px;
height: 92px;
left: 21%;
top: 81%;
}
body.recruit .business .mainImages div a.btn_04{
width: 244px;
height: 92px;
right: 20%;
top: 81%;
}
body.recruit .business .mainImages div a.btn_05{
width: 252px;
height: 92px;
right: 1%;
top: 52%;
}
body.recruit .business .mainImages div a.btn_06{
width: 123px;
height: 93px;
right: 15%;
top: 19%;
}
body.recruit .business .mainImages div a.btn_07{
width: 212px;
height: 93px;
right: 41%;
top: 4%;
}
@media screen and (max-width: 750px){
body.recruit .business .ankerArea a{
background-color: red;
display: block;
}
body.recruit .business .ankerArea a img{
margin: 0;
}
body.recruit .business .ankerArea a.btn_07{
background: url(../images/business/img_main_07@2x.png) center center no-repeat;
background-size: cover;
display: block;
}
body.recruit .business .ankerArea a.btn_06{
background: url(../images/business/img_main_06@2x.png) center center no-repeat;
background-size: cover;
display: block;
}
body.recruit .business .ankerArea a.btn_05{
background: url(../images/business/img_main_05@2x.png) center center no-repeat;
background-size: cover;
display: block;
}
body.recruit .business .ankerArea a.btn_04{
background: url(../images/business/img_main_04@2x.png) center center no-repeat;
background-size: cover;
display: block;
}
body.recruit .business .ankerArea a.btn_03{
background: url(../images/business/img_main_03@2x.png) center center no-repeat;
background-size: cover;
display: block;
}
body.recruit .business .ankerArea a.btn_02{
background: url(../images/business/img_main_02@2x.png) center center no-repeat;
background-size: cover;
display: block;
}
body.recruit .business .ankerArea a.btn_01{
background: url(../images/business/img_main_01@2x.png) center center no-repeat;
background-size: cover;
display: block;
}
}
@media screen and (min-width: 751px) and (max-width: 1080px){
body.recruit .business .mainImages div{
background: url(../images/business/img_main@2x.png) left top no-repeat;
background-size: cover;
width: auto;
}
body.recruit .business .mainImages div .ankerArea{
width: 680px;
}
body.recruit .business .mainImages div .ankerArea + img{
width: 680px;
margin-top: -565px;
height: 565px;
}
body.recruit .business .mainImages div a.btn_01{
width: 110px;
height: 84px;
left: 8%;
top: 25%;
}
body.recruit .business .mainImages div a.btn_02{
width: 123px;
height: 64px;
left: 1%;
top: 51%;
}
body.recruit .business .mainImages div a.btn_03{
width: 104px;
height: 64px;
left: 20%;
top: 76%;
}
body.recruit .business .mainImages div a.btn_04{
width: 169px;
height: 64px;
right: 21%;
top: 76%;
}
body.recruit .business .mainImages div a.btn_05{
width: 174px;
height: 64px;
right: 1%;
top: 51%;
}
body.recruit .business .mainImages div a.btn_06{
width: 85px;
height: 65px;
right: 15%;
top: 25%;
}
body.recruit .business .mainImages div a.btn_07{
width: 146px;
height: 64px;
right: 41%;
top: 13%;
}
}
body.recruit main .business section .inner{
padding: 0 70px 0 0;
}
@media screen and (max-width: 750px){
body.recruit main .business section .inner{
padding: 0 18px 0 0;
}
}
@media screen and (min-width: 751px) and (max-width: 1080px){
body.recruit main .business section .inner{
padding: 0 70px 0 0;
}
}
body.recruit main .business section .inner p{
font-size: 18px;
}
body.recruit main .business section .inner p.catch{
margin: 54px 0 100px;
}
@media screen and (max-width: 750px){
body.recruit main .business section .inner p{
font-size: 14px;
}
body.recruit main .business section .inner p.catch{
margin: 30px 0 40px;
}
}
body.recruit main .business section .inner p.limit900{
max-width: 900px;
}
body.recruit main .business section .inner p.limit710{
max-width: 710px;
}
body.recruit main .business section .inner p.limit610{
max-width: 610px;
}
body.recruit main .business .limit800{
margin: 0 auto;
max-width: 800px;
}
body.recruit main .business h2{
font-size: 50px;
font-weight: normal;
margin: 60px 0 24px;
color: #cc0000;
}
body.recruit main .business h3{
font-size: 30px;
font-weight: normal;
margin: 24px 0 48px;
color: #cc0000;
}
body.recruit main .business h4{
font-size: 25px;
font-weight: bold;
margin: 24px 0;
color: #1e1e1e;
}
body.recruit main .business p{
margin-bottom: 40px;
}
body.recruit main .business #toBusiness h2 img{
width: auto;
height: 44px;
margin: 12px 0;
}
body.recruit main .business #toSpace h2 img{
width: auto;
height: 54px;
margin: 12px 0;
}
body.recruit main .business #toComponents h2 img{
width: auto;
height: 54px;
margin: 12px 0;
}
body.recruit main .business #toEnvironment h2 img{
width: auto;
height: 44px;
margin: 12px 0;
}
body.recruit main .business #toMedical h2 img{
width: auto;
height: 44px;
margin: 12px 0;
}
body.recruit main .business #toSoftware h2 img{
width: auto;
height: 44px;
margin: 12px 0;
}
body.recruit main .business #toFactory h2 img{
width: auto;
height: 54px;
margin: 12px 0;
}
@media screen and (max-width: 750px){
body.recruit main .business h2{
font-size: 28px;
font-weight: normal;
margin: 30px 0 18px;
color: #cc0000;
}
body.recruit main .business h3{
font-size: 18px;
font-weight: normal;
margin: 18px 0 32px;
color: #cc0000;
}
body.recruit main .business h4{
font-size: 18px;
font-weight: bold;
margin: 20px 0;
color: #1e1e1e;
}
body.recruit main .business p{
margin-bottom: 30px;
}
body.recruit main .business #toBusiness h2 img{
width: auto;
height: 28px;
margin: 12px 0;
}
body.recruit main .business #toSpace h2 img{
width: auto;
height: 38px;
margin: 12px 0;
}
body.recruit main .business #toComponents h2 img{
width: auto;
height: 38px;
margin: 12px 0;
}
body.recruit main .business #toEnvironment h2 img{
width: auto;
height: 28px;
margin: 12px 0;
}
body.recruit main .business #toMedical h2 img{
width: auto;
height: 28px;
margin: 12px 0;
}
body.recruit main .business #toSoftware h2 img{
width: auto;
height: 28px;
margin: 12px 0;
}
body.recruit main .business #toFactory h2 img{
width: auto;
height: 38px;
margin: 12px 0;
}
}
body.recruit main .business .flexBox{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
body.recruit main .business .flexBox .half{
width: 48%;
margin-bottom: 24px;
}
body.recruit main .business .flexBox .half img{
margin: 0 0 18px;
}
body.recruit main .business .flexBox .half h4{
margin-top: 0;
}
@media screen and (max-width: 750px){
body.recruit main .business .flexBox .half{
width: 100%;
margin-bottom: 24px;
}
body.recruit main .business .flexBox .half img{
max-width: 100%;
margin: 0 0 18px;
}
}
@media screen and (min-width: 751px) and (max-width: 1080px){
body.recruit main .business .flexBox .half{
width: 100%;
}
body.recruit main .business .flexBox .half img{
max-width: 100%;
}
}
/*------------------ 事業分野と製品を知るここまで ------------------*/
/*------------------ toTopボタンここから ------------------*/
footer .toTop{
text-align: right;
height: 0;
margin: 0;
position: relative;
z-index: 1;
}
footer .toTop a{
display: block;
height: 0;
width: 70px;
padding-top: 70px;
overflow: hidden;
font-size: 0;
background-color: transparent;
margin-top: -32px;
position: fixed;
left: 0;
bottom: 0;
border-radius: 0;
background-image: url(../images/toTop.svg);
background-position: center center;
background-repeat: no-repeat;
background-size: 25px 32px;
}
footer .toTop.release a{
position: absolute;
}
@media screen and (max-width: 750px){
footer .toTop a{
display: none;
}
}
@media screen and (min-width: 1081px) and (max-width: 1280px){
footer .toTop a{
width: 70px;
padding-top: 70px;
margin-top: -70px;
left: 0;
background-size: 24px;
}
}
@media screen and (min-width: 1281px){
footer .toTop{
max-width: 1280px;
margin: 0 auto;
}
footer .toTop a{
width: 70px;
padding-top: 70px;
margin-top: -70px;
left: calc(50% - 640px);
background-size: 24px;
}
}
/*------------------ toTopボタンここまで ------------------*/
/*------------------ toContactボタンここから ------------------*/
footer .contact a.contactBtn{
margin-left: 51px;
}
.toContact.sp{
left: 70px;
}
@media screen and (max-width: 750px){
footer .contact a.contactBtn{
margin-left: 0;
}
.toContact.sp{
left: 18px;
}
}
@media screen and (min-width: 1281px){
footer .contact a.contactBtn{
margin-left: 0;
}
}
/*------------------ toContactボタンここまで ------------------*/
/*------------------ myNaviボタンここから ------------------*/
.toMyNavi img{
width: 100%;
}
.toMyNavi.pc{
display: none;
position: fixed;
bottom: 16vh;
right: -120px;
z-index: 1;
box-sizing: border-box;
overflow: hidden;
width: 210px;
height: 61px;
}
.toMyNavi.pc:hover{
right: 0px;
opacity: 1;
transition: all .3s ease-out;
}
.toMyNavi.sp{
display: none;
position: fixed;
bottom: 0;
left: 18px;
width: 215px;
height: 61px;
text-align: left;
z-index: 1;
box-sizing: border-box;
overflow: hidden;
}
.toMyNavi.sp:hover{
opacity: 0.8;
transition: all .3s ease-out;
}
.toMyNavi.sp{
left: 70px;
}
.toMyNavi.sp.hide{
display: none!important;
}
.toMyNavi.pc.hide{
display: none!important;
}
@media screen and (max-width: 750px){
.toMyNavi.sp{
left: 18px;
}
}
@media screen and (min-width: 1081px){
.toMyNavi.sp.release{
position: relative;
display: block;
}
}
footer .myNavi{
margin: 0;
padding: 0 18px;
border-top: 1px solid #d9d9d9;
}
footer .myNavi a.myNaviBtn{
display: block;
background: url(../images/btn_mynavi_footer.svg) left top no-repeat;
background-size: 100% 100%;
cursor: pointer;
width: 215px;
margin-top: -61px;
height: 61px;
box-sizing: border-box;
position: relative;
}
footer .myNavi a.myNaviBtn{
margin-left: 51px;
}
@media screen and (max-width: 750px){
footer .myNavi a.myNaviBtn{
margin-left: 0;
}
}
@media screen and (min-width: 1281px){
footer .myNavi {
padding: 0 74px;
}
footer .myNavi .inner {
max-width: 1132px;
margin: 0 auto;
}
footer .myNavi a.myNaviBtn{
margin-left: 0;
}
}
/*------------------ myNaviボタンここまで ------------------*/
body.recruit main #topPage .modal dl.scheduleTable{
display: flex;
flex-wrap: wrap;
margin-bottom: 60px;
}
body.recruit main #topPage .modal dl.scheduleTable dt{
width: 11em;
color: #1e1e1e;
border: none;
padding: 12px 1em;
box-sizing: border-box;
line-height: 1.6em;
}
body.recruit main #topPage .modal dl.scheduleTable dt.time{
font-weight: bold
}
body.recruit main #topPage .modal dl.scheduleTable dd{
width: calc(100% - 11em);
margin-left: 0;
padding: 12px 1em;
box-sizing: border-box;
border: none;
line-height: 1.6em;
}
body.recruit main section .modal dl.scheduleTable dt:nth-child(4n+1){
background-color: #E6E6E6;
}
body.recruit main section .modal dl.scheduleTable dd:nth-child(4n-2){
background-color: #E6E6E6;
}
@media screen and (max-width: 750px){
body.recruit main #topPage .modal dl.scheduleTable{
margin-bottom: 24px;
}
body.recruit main #topPage .modal dl.scheduleTable dt{
width: 100%;
font-size: 14px;
}
body.recruit main #topPage .modal dl.scheduleTable dd{
width: 100%;
padding: 0 1em 12px;
font-size: 14px;
}
}
@media screen and (min-width: 751px) and (max-width: 1080px){
body.recruit main #topPage .modal dl.scheduleTable{
flex-flow: wrap;
margin-bottom: 48px;
}
body.recruit main #topPage .modal dl.scheduleTable dt{
font-size: 18px;
}
body.recruit main #topPage .modal dl.scheduleTable dd{
font-size: 18px;
}
}