@charset "utf-8"; /*.design-bg{ width: 1400px; height: 18186px; background: url('../design_img/recruit.png') 0 0 no-repeat; position: absolute; top: 0; left: 50%; -webkit-transform: translate(-50%,0); transform: translate(-50%,0); z-index: -1; opacity: .5; background-size: 1400px; }*/ @keyframes roop-animate { 0% {background-position: 0 0;} 100% {background-position: -2198px 0;} } @-webkit-keyframes roop-animate { 0% {background-position: 0 0;} 100% {background-position: -2198px 0;} } @media print, screen and (min-width: 751px) { #main .mv-subPage { padding-bottom: 207px; position: relative; overflow: hidden; background: url('../img/recruit/mv-bg.jpg') 50% 50% no-repeat; } #main .mv-subPage h2 { margin-bottom: 70px; } #main .mv-subPage h3 { margin-bottom: 45px; text-align: center; font-size: 1.6rem; line-height: 1.5; color: #fff; } #main .mv-subPage p { text-align: center; font-size: .85rem; font-weight: bold; line-height: 2.1; color: #fff; } #main .mv-subPage p.mt { margin-top: 25px; } #main .pageNav { margin-top: -60px; display: -webkit-box; display: -ms-flexbox; display: flex; position: relative; z-index: 2; } #main .pageNav li { width: 25%; border-right: 1px solid #22be97; } #main .pageNav li:first-of-type{ border-left: 1px solid #22be97; } #main .pageNav li a{ display: block; font-size: 1.15rem; font-weight: bold; text-align: center; background: #fff; -webkit-transition: .3s; transition: .3s; position: relative; color: #22be97; } #main .pageNav li a:after{ content: ''; width: 100%; height: 100%; display: block; position: absolute; top: 0; left: 0; z-index: -1; background: rgb(34,190,151); background: -webkit-gradient(linear, left top, right top, from(rgba(34,190,151,1)), to(rgba(34,208,151,1))); background: linear-gradient(90deg, rgba(34,190,151,1) 0%, rgba(34,208,151,1) 100%); } #main .pageNav li a:hover{ opacity: 1; background: transparent; color: #fff; } #main .pageNav li a>span{ padding: 43px 0 58px; display: block; position: relative; } #main .pageNav li a>span:before{ content: ''; width: 1px; height: 20px; background-color: #22be97; display: block; position: absolute; bottom: 16px; left: 50%; -webkit-transform: translate(-50%,0); transform: translate(-50%,0); } #main .pageNav li a>span:after{ content: ''; width: 10px; height: 10px; background-color: #22be97; display: block; position: absolute; bottom: 32px; left: 50%; -webkit-transform: translate(-50%,0); transform: translate(-50%,0); border-radius: 10px; -webkit-transition: .3s; transition: .3s; } #main .pageNav li a:hover>span:before{ background-color: #fff; } #main .pageNav li a:hover>span:after{ bottom: 12px; background-color: #fff; } #main .pageNav li a>span>span{ margin-top: 6px; font-size: .85rem; display: block; line-height: 1.5; } #zadankai { margin-top: 120px; position: relative; } #zadankai .master { max-width: 940px; } #zadankai .top h2 { margin-bottom: 50px; } #zadankai .top p { text-align: center; line-height: 2; } #zadankai .member { margin-top: 70px; } #zadankai .member h3 { padding: 11px 0; color: #22be97; border-top: 1px solid #22be97; border-bottom: 1px solid #22be97; font-size: 1.25rem; text-align: center; } #zadankai .member ul { margin-top: 40px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } #zadankai .member ul li { width: 20.32%; text-align: center; } #zadankai .member ul li figure{ width: 79.06%; margin: 0 auto; } #zadankai .member ul li figure figcaption{ margin-top: 14px; font-size: .95rem; font-weight: bold; } #zadankai .member ul li h4{ margin: 15px 0 6px; color: #000; font-size: 1.1rem; color: #22be97; } #zadankai .member ul li p{ line-height: 2.05; } #zadankai .sideTitle { width: 96px; position: absolute; top: 20px; left: -5px; } #question { margin-top: 111px; background-color: #ebf9f6; } #question:before { content: ''; width: 100%; height: 675px; display: block; background: url('../img/recruit/top-bg.jpg') 50% 50% no-repeat; background-size: cover; background-attachment: fixed; } #question .title { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } #question .box { position: relative; z-index: 2; } #question .q1:before,#question .q3:before,#question .q5:before{ content: ''; width: 1000px; height: 100%; display: block; position: absolute; top: 0; right: -1000px; background-color: #fff; } #question .q2:before,#question .q4:before,#question .q6:before{ content: ''; width: 1000px; height: 100%; display: block; position: absolute; top: 0; left: -1000px; background-color: #fff; } #question .box.q2 { margin-top: 75px; padding: 65px 60px 55px; } #question .box.q3 { padding: 65px 60px 55px; } #question .box.q4 { margin-top: 75px; padding: 65px 60px 55px; } #question .box.q5 { padding: 65px 60px 55px; } #question .box.q6 { margin-top: 75px; padding: 65px 60px 55px; } #question .q1 .title>div:nth-of-type(1){ width: 124px; } #question .q2 .title>div:nth-of-type(1){ width: 136px; } #question .q3 .title>div:nth-of-type(1){ width: 136px; } #question .q4 .title>div:nth-of-type(1){ width: 139px; } #question .q5 .title>div:nth-of-type(1){ width: 137px; } #question .q6 .title>div:nth-of-type(1){ width: 138px; } #question .box .title>div:nth-of-type(2){ margin-left: 45px; font-size: 1.6rem; font-weight: bold; } #question .box .title>div:nth-of-type(2) span{ padding: 6px 9px; display: inline-block; color: #fff; position: relative; } #question .box .title>div:nth-of-type(2) span:after{ content: ''; position: absolute; z-index: -1; bottom: 0; left: 0; width: 0; height:100%; background: rgb(34,190,151); background: -webkit-gradient(linear, left top, right top, from(rgba(34,190,151,1)), to(rgba(34,208,151,1))); background: linear-gradient(90deg, rgba(34,190,151,1) 0%, rgba(34,208,151,1) 100%); -webkit-transition:all .5s; transition:all .5s;opacity: 0; } #question .box .title>div.show:nth-of-type(2) span:after{ width: 100%; opacity: 1; } #question .box .title>div:nth-of-type(2) span:nth-of-type(2){ margin-top: 8px; } #question .box { margin-top: -100px; padding: 137px 60px 55px; background-color: #fff; } #question .box dl { margin-top: 55px; } #question .box dl>div { display: -webkit-box; display: -ms-flexbox; display: flex; } #question .box dl>div:nth-of-type(n+2){ margin-top: 47px; } #question .box dl>div>dt{ width: 80px; } #question .box dl>div>dt figcaption{ margin-top: 10px; text-align: center; font-weight: bold; } #question .box dl>div>dd{ width: calc(100% - 120px); margin-left: auto; } #question .box dl>div>dd p{ line-height: 2; } #question .box dl>div>dd p span{ color: #22be97; font-weight: bold; } #question .question-bg { width: 100%; height: 675px; margin: -90px 0; display: block; background: url('../img/recruit/question-bg.jpg') 50% 50% no-repeat; background-size: cover; background-attachment: fixed; } #question .question-bg2 { width: 100%; height: 675px; margin: -90px 0; display: block; background: url('../img/recruit/question-bg2.jpg') 50% 50% no-repeat; background-size: cover; background-attachment: fixed; } #question .question-bg3 { width: 100%; height: 675px; margin: -100px 0 0; display: block; background: url('../img/recruit/question-bg3.jpg') 50% 50% no-repeat; background-size: cover; background-attachment: fixed; } #voice { padding: 117px 0; position: relative; background: rgb(34,190,151); background: -webkit-gradient(linear, left top, right top, from(rgba(34,190,151,1)), to(rgba(34,208,151,1))); background: linear-gradient(90deg, rgba(34,190,151,1) 0%, rgba(34,208,151,1) 100%); } #voice .master { max-width: 950px; } #voice .text { margin-top: 52px; text-align: center; color: #fff; } /*#voice .youtube { margin-top: 58px; position: relative; width: 100%; padding-top: 56.25%; } #voice .youtube iframe { position: absolute; top: 0; right: 0; width: 100% !important; height: 100% !important; }*/ #voice .movie { margin-top: 58px; } #voice .movie video { width: 100%; } #voice .sideTitle { width: 75px; position: absolute; top: 116px; left: -5px; } #office { padding: 120px 0; position: relative; } #office .master { max-width: 877px; position: relative; } #office .box .master { max-width: 1000px; } /*#office dl { margin-top: 50px; } #office dl>div { display: -webkit-box; display: -ms-flexbox; display: flex; } #office dl>div>dt { width: 80px; } #office dl>div>dt figcaption{ margin-top: 10px; text-align: center; font-weight: bold; } #office dl>div>dd { width: calc(100% - 120px); margin-left: auto; } #office dl>div>dd p { line-height: 2; }*/ #office .top { margin-top: 50px; } #office .top p { text-align: center; line-height: 2.1; } #office .box { width: 100%; margin-top: 155px; position: relative; } #office .box02 { margin-top: 560px; } #office .box03 { margin-top: 560px; } #office .box04 { margin-top: 560px; } #office .box05 { margin-top: 560px; } #office .box06 { margin-top: 560px; } #office .box07 { margin-top: 560px; } #office .box:before { content: ''; width: 100%; height: 575px; background-color: #ebf9f6; position: absolute; top: 60px; left: 0; } #office .box .master>img{ position: absolute; } #office .box .master>img:nth-of-type(1){ width: 66%; top: 0; right: 5%; z-index: 2; } #office .box .master>img:nth-of-type(2){ width: 40%; top: 0; right: 0; z-index: 3; } #office .box .master>img:nth-of-type(3){ width: 301px; top: -15px; left: 0; z-index: 3; } #office .box .master>.textBox{ width: 42%; padding: 40px 40px 50px; position: relative; top: 434px; left: 0; z-index: 4; background: rgb(34,190,151); background: -webkit-gradient(linear, left top, right top, from(rgba(34,190,151,1)), to(rgba(34,208,151,1))); background: linear-gradient(90deg, rgba(34,190,151,1) 0%, rgba(34,208,151,1) 100%); } #office .box .master>.textBox h3{ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } #office .box .master>.textBox h3>span:nth-of-type(1){ margin: -7px 0 27px; font-size: 1.5rem; color: #fff; line-height: 1.4; } #office .box .master>.textBox h3>span:nth-of-type(2){ position: absolute; top: 26px; right: 32px; } #office .box01 .master>.textBox h3>span:nth-of-type(2){ width: 62px; } #office .box02 .master>.textBox h3>span:nth-of-type(2){ width: 71px; } #office .box03 .master>.textBox h3>span:nth-of-type(2){ width: 71px; } #office .box04 .master>.textBox h3>span:nth-of-type(2){ width: 73px; } #office .box05 .master>.textBox h3>span:nth-of-type(2){ width: 71px; } #office .box06 .master>.textBox h3>span:nth-of-type(2){ width: 72px; } #office .box07 .master>.textBox h3>span:nth-of-type(2){ width: 71px; } #office .box .master>.textBox p{ color: #fff; line-height: 2.1; } #office .return { } #office .return .master>img:nth-of-type(1){ width: 66%; top: 0; left: 5%; right: 0; z-index: 2; } #office .return .master>img:nth-of-type(2){ width: 40%; top: 0; right: auto; left: 0; z-index: 2; } #office .return .master>img:nth-of-type(3){ width: 301px; top: -15px; left: auto; right: 0; z-index: 3; } #office .return .master>.textBox{ top: 434px; left: auto; right: 0; margin-left: auto; } .roolImage { width: 100%; height: 226px; margin-top: 556px; background-image: url('../img/recruit/rool-image.jpg'); background-size: 2198px; background-repeat: repeat-x; -webkit-animation: roop-animate 35s linear infinite; animation: roop-animate 35s linear infinite; position: relative; } #office .sideTitle { width: 75px; position: absolute; top: 120px; left: -5px; } #entry { padding: 118px 0 145px; text-align: center; background: url('../img/recruit/entry-bg.jpg') 50% 50% no-repeat; background-size: cover; } #entry h2 { margin-bottom: 58px; } #entry p { text-align: center; line-height: 2.1; color: #fff; } #entry a { width: 100%; max-width: 420px; height: 80px; margin: 92px auto 0; line-height: 80px; display: block; font-size: 1.25rem; font-weight: bold; color: #22be97; background: #fff url('../img/recruit/btn-arrow.png') 92% 50% no-repeat; background-size: 22px; border-radius: 20px; } #footer { margin-top: 0; } } @media screen and (max-width: 1260px) and (min-width: 415px) { } @media screen and (max-width: 750px) { .pageTitle img { width: 179px; } #main .mv-subPage { padding-bottom: 75px; position: relative; overflow: hidden; background: url('../img/recruit/mv-bg.jpg') 50% 50% no-repeat; } #main .mv-subPage .master{ width: 100%; } #main .mv-subPage h2 { margin-bottom: 50px; padding: 0 5%; } #main .mv-subPage h3 { margin-bottom: 45px; text-align: center; font-size: 1rem; line-height: 1.5; color: #fff; } #main .mv-subPage p { margin-top: 25px; padding: 0 5%; text-align: justify; font-size: .85rem; font-weight: bold; line-height: 1.7; color: #fff; } #main .pageNav { margin-top: -60px; display: -webkit-box; display: -ms-flexbox; display: flex; position: relative; z-index: 2; } #main .pageNav { width: 100%; margin: 0 0 0 0; display: -webkit-box; display: -ms-flexbox; display: flex; } #main .pageNav li { width: 25%; border-right: 1px solid #22be97; } #main .pageNav li:first-of-type{ } #main .pageNav li:last-of-type{ border-right: 0; } #main .pageNav li a{ height: 100%; display: block; font-size: 1.05rem; font-weight: bold; text-align: center; background: #fff; -webkit-transition: .3s; transition: .3s; position: relative; color: #22be97; } #main .pageNav li a:after{ content: ''; width: 100%; height: 100%; display: block; position: absolute; top: 0; left: 0; z-index: -1; background: rgb(34,190,151); background: -webkit-gradient(linear, left top, right top, from(rgba(34,190,151,1)), to(rgba(34,208,151,1))); background: linear-gradient(90deg, rgba(34,190,151,1) 0%, rgba(34,208,151,1) 100%); } #main .pageNav li a:hover{ opacity: 1; background: transparent; color: #fff; } #main .pageNav li a>span{ height: 100%; padding: 15px 0 30px; display: block; position: relative; line-height: 1.3 } #main .pageNav li a>span:before{ content: ''; width: 1px; height: 12px; background-color: #22be97; display: block; position: absolute; bottom: 9px; left: 50%; -webkit-transform: translate(-50%,0); transform: translate(-50%,0); } #main .pageNav li a>span:after{ content: ''; width: 6px; height: 6px; background-color: #22be97; display: block; position: absolute; bottom: 18px; left: 50%; -webkit-transform: translate(-50%,0); transform: translate(-50%,0); border-radius: 10px; -webkit-transition: .3s; transition: .3s; } #main .pageNav li a:hover>span:before{ background-color: #fff; } #main .pageNav li a:hover>span:after{ bottom: 5px; background-color: #fff; } #main .pageNav li a>span>span{ margin-top: 6px; font-size: .75rem; display: block; line-height: 1.5; } #zadankai { margin-top: 75px; position: relative; } #zadankai .master { max-width: 940px; } #zadankai .top h2 { margin-bottom: 50px; } #zadankai .top p { text-align: justify; line-height: 1.7; } #zadankai .member { margin-top: 70px; } #zadankai .member h3 { padding: 11px 0; color: #22be97; border-top: 1px solid #22be97; border-bottom: 1px solid #22be97; font-size: 1.1rem; text-align: center; } #zadankai .member ul { margin-top: 40px; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } #zadankai .member ul li { width: 46%; text-align: center; } #zadankai .member ul li:nth-of-type(2n){ margin-left: auto; } #zadankai .member ul li:nth-of-type(n+3){ margin-top: 70px; } #zadankai .member ul li figure{ width: 79.06%; margin: 0 auto; } #zadankai .member ul li figure figcaption{ margin-top: 14px; font-size: .95rem; font-weight: bold; } #zadankai .member ul li h4{ margin: 15px 0 6px; color: #000; font-size: 1.1rem; color: #22be97; } #zadankai .member ul li p{ line-height: 1.7; } #question { margin-top: 70px; } #question:before { content: ''; width: 100%; height: 181px; display: block; background: url('../img/recruit/top-bg.jpg') 50% 50% no-repeat; background-size: cover; } #question .title { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } #question .box { position: relative; z-index: 2; } #question .q1 .title>div:nth-of-type(1){ width: 60px; } #question .q2 .title>div:nth-of-type(1){ width: 60px; } #question .q3 .title>div:nth-of-type(1){ width: 60px; } #question .q4 .title>div:nth-of-type(1){ width: 60px; } #question .q5 .title>div:nth-of-type(1){ width: 60px; } #question .q6 .title>div:nth-of-type(1){ width: 60px; } #question .box .title>div:nth-of-type(2){ width: calc(100% - 60px); padding-left: 15px; font-size: 1rem; font-weight: bold; } #question .box .title>div:nth-of-type(2) span{ padding: 6px 9px; display: inline-block; color: #fff; position: relative; } #question .box .title>div:nth-of-type(2) span:after{ content: ''; position: absolute; z-index: -1; bottom: 0; left: 0; width: 0; height:100%; background: rgb(34,190,151); background: -webkit-gradient(linear, left top, right top, from(rgba(34,190,151,1)), to(rgba(34,208,151,1))); background: linear-gradient(90deg, rgba(34,190,151,1) 0%, rgba(34,208,151,1) 100%); -webkit-transition:all .5s; transition:all .5s;opacity: 0; } #question .box .title>div.show:nth-of-type(2) span:after{ width: 100%; opacity: 1; } #question .box .title>div:nth-of-type(2) span:nth-of-type(n+2){ margin-top: 5px; } #question .box { padding: 50px 0 40px; background-color: #fff; } #question .box dl { margin-top: 45px; } #question .box dl>div { display: -webkit-box; display: -ms-flexbox; display: flex; } #question .box dl>div:nth-of-type(n+2){ margin-top: 40px; } #question .box dl>div>dt{ width: 60px; } #question .box dl>div>dt figcaption{ margin-top: 10px; text-align: center; font-weight: bold; } #question .box dl>div>dd{ width: calc(100% - 80px); margin-left: auto; } #question .box dl>div>dd p{ line-height: 1.7; } #question .box dl>div>dd p span{ color: #22be97; font-weight: bold; } #question .question-bg { width: 100%; height: 181px; margin: 0 0; display: block; background: url('../img/recruit/question-bg.jpg') 50% 50% no-repeat; background-size: cover; } #question .question-bg2 { width: 100%; height: 181px; margin: 0 0; display: block; background: url('../img/recruit/question-bg2.jpg') 50% 50% no-repeat; background-size: cover; } #question .question-bg3 { width: 100%; height: 181px; margin: 0 0 0; display: block; background: url('../img/recruit/question-bg3.jpg') 50% 50% no-repeat; background-size: cover; } #voice { padding: 70px 0; position: relative; background: rgb(34,190,151); background: -webkit-gradient(linear, left top, right top, from(rgba(34,190,151,1)), to(rgba(34,208,151,1))); background: linear-gradient(90deg, rgba(34,190,151,1) 0%, rgba(34,208,151,1) 100%); } #voice .master { max-width: 950px; } #voice .text { margin-top: 50px; text-align: center; color: #fff; line-height: 1.7; } /*#voice .youtube { margin-top: 40px; position: relative; width: 100%; padding-top: 56.25%; } #voice .youtube iframe { position: absolute; top: 0; right: 0; width: 100% !important; height: 100% !important; }*/ #voice .movie { margin-top: 40px; } #voice .movie video { width: 100%; } #voice .sideTitle { width: 75px; position: absolute; top: 116px; left: -5px; } #office { padding: 70px 0 100px; position: relative; } #office .master { max-width: 877px; position: relative; } #office .box .master { max-width: 1000px; } /*#office dl { margin-top: 50px; } #office dl>div { display: -webkit-box; display: -ms-flexbox; display: flex; } #office dl>div>dt { width: 60px; } #office dl>div>dt figcaption{ margin-top: 10px; text-align: center; font-weight: bold; } #office dl>div>dd { width: calc(100% - 80px); margin-left: auto; } #office dl>div>dd p { line-height: 1.7; }*/ #office .top { margin-top: 50px; } #office .top p { line-height: 1.7; } #office .box { width: 100%; margin-top: 50px; position: relative; } #office .box02 { margin-top: 500px; } #office .box03 { margin-top: 500px; } #office .box04 { margin-top: 500px; } #office .box05 { margin-top: 500px; } #office .box06 { margin-top: 500px; } #office .box07 { margin-top: 500px; } #office .box:before { content: ''; width: 100%; height: 450px; background-color: #ebf9f6; position: absolute; top: 60px; left: 0; } #office .box .master>img{ position: absolute; } #office .box .master>img:nth-of-type(1){ width: 330px; top: 0; left: -7%; z-index: 2; } #office .box .master>img:nth-of-type(2){ width: 200px; top: 180px; right: -7%; z-index: 3; } #office .box .master>img:nth-of-type(3){ width: 175px; top: 150px; left: -7%; z-index: 3; } #office .box .master>.textBox{ width: 100%; padding: 30px 20px 40px; position: relative; top: 400px; left: 0; z-index: 4; background: rgb(34,190,151); background: -webkit-gradient(linear, left top, right top, from(rgba(34,190,151,1)), to(rgba(34,208,151,1))); background: linear-gradient(90deg, rgba(34,190,151,1) 0%, rgba(34,208,151,1) 100%); } #office .box .master>.textBox h3{ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } #office .box .master>.textBox h3>span:nth-of-type(1){ margin: 5px 0 15px; font-size: 1.1rem; color: #fff; line-height: 1.4; } #office .box .master>.textBox h3>span:nth-of-type(2){ position: absolute; top: 26px; right: 32px; } #office .box01 .master>.textBox h3>span:nth-of-type(2){ width: 36px; } #office .box02 .master>.textBox h3>span:nth-of-type(2){ width: 36px; } #office .box03 .master>.textBox h3>span:nth-of-type(2){ width: 36px; } #office .box04 .master>.textBox h3>span:nth-of-type(2){ width: 36px; } #office .box05 .master>.textBox h3>span:nth-of-type(2){ width: 36px; } #office .box06 .master>.textBox h3>span:nth-of-type(2){ width: 36px; } #office .box07 .master>.textBox h3>span:nth-of-type(2){ width: 36px; } #office .box .master>.textBox p{ color: #fff; line-height: 1.7; } #office .return { } #office .return .master>img:nth-of-type(1){ width: 330px; top: 0; left: auto; right: -7%; z-index: 2; } #office .return .master>img:nth-of-type(2){ width: 200px; top: 180px; right: auto; left: -7%; z-index: 2; } #office .return .master>img:nth-of-type(3){ width: 175px; top: 150px; left: auto; right: -7%; } #office .return .master>.textBox{ } .roolImage { width: 100%; height: 0; margin-top: 500px; padding-top: 94%; background: url(../img/recruit/rool-image_sp.jpg) 50% 50% no-repeat; background-size: contain; } #entry { padding: 75px 0 75px; text-align: center; background: url('../img/recruit/entry-bg.jpg') 50% 50% no-repeat; background-size: cover; } #entry h2 { margin-bottom: 58px; } #entry p { text-align: center; line-height: 2.1; color: #fff; } #entry a { width: 85%; max-width: 420px; height: 60px; margin: 50px auto 0; line-height: 60px; display: block; font-size: 1rem; font-weight: bold; color: #22be97; background: #fff url('../img/recruit/btn-arrow.png') 92% 50% no-repeat; background-size: 22px; border-radius: 20px; } #footer { margin-top: 0; } }