@charset "UTF-8";
.c-pageHeader {
width: 100%;
height: 540px;
background-size: cover;
text-align: center;
padding-top: 197px;
}
@media screen and (max-width: 768px) {
.c-pageHeader {
height: 70vw;
margin-top: 60px;
padding-top: 7.03125vw;
background-position: top center;
background-size: auto 100%;
}
}
.c-pageHeader.staff {
background-image: url(//care-design.jp/cms/wp-content/themes/caredesign/img/staff/image_header.png);
}
.c-pageHeader.company {
background-image: url(//care-design.jp/cms/wp-content/themes/caredesign/img/company/image_header.png);
}
.c-pageHeader.service {
background-image: url(//care-design.jp/cms/wp-content/themes/caredesign/img/service/image_header.png);
}
.c-pageHeader.recruit {
background-image: url(//care-design.jp/cms/wp-content/themes/caredesign/img/recruit/image_header.png);
}
.c-pageHeader.contact {
background-image: url(//care-design.jp/cms/wp-content/themes/caredesign/img/contact/image_header.png);
}
.c-pageHeader.blog {
background-image: url(//care-design.jp/cms/wp-content/themes/caredesign/img/blog/image_header.png);
}
.c-pageHeader.event {
background-image: url(//care-design.jp/cms/wp-content/themes/caredesign/img/event/image_header.png);
}
.c-pageHeader_title {
font-weight: bold;
letter-spacing: 0.3rem;
}
.c-pageHeader_title span {
display: inline-block;
}
.c-pageHeader_title_caption {
font-size: 20px;
}
@media screen and (max-width: 768px) {
.c-pageHeader_title_caption {
font-size: 6.25vw;
}
}
@media screen and (max-width: 768px) {
.c-pageHeader_title_caption {
font-size: 15px;
}
}
@media screen and (max-width: 768px) and (max-width: 768px) {
.c-pageHeader_title_caption {
font-size: 4.6875vw;
}
}
.c-pageHeader_title_en {
font-size: 50px;
margin-top: 10px;
}
@media screen and (max-width: 768px) {
.c-pageHeader_title_en {
font-size: 15.625vw;
}
}
@media screen and (max-width: 768px) {
.c-pageHeader_title_en {
font-size: 40px;
line-height: 1;
}
}
@media screen and (max-width: 768px) and (max-width: 768px) {
.c-pageHeader_title_en {
font-size: 12.5vw;
}
}
.c-pageHeader_title_ja {
font-size: 14px;
margin-top: 10px;
}
@media screen and (max-width: 768px) {
.c-pageHeader_title_ja {
font-size: 4.375vw;
}
}
@media screen and (max-width: 768px) {
.c-pageHeader_title_ja {
font-size: 10px;
margin-top: 0;
}
}
@media screen and (max-width: 768px) and (max-width: 768px) {
.c-pageHeader_title_ja {
font-size: 3.125vw;
}
}
.c-pageHeader_shape {
width: 0;
height: 0;
border-width: 45px 214px;
border-style: solid;
border-top-color: transparent;
border-left-color: transparent;
margin: -18px auto 0;
}
@media screen and (max-width: 768px) {
.c-pageHeader_shape {
border-width: 7vw 35vw;
margin-top: -4.6875vw;
}
}
.c-pageHeader_shape.staff {
border-right-color: #F5C860;
border-bottom-color: #F5C860;
}
.c-pageHeader_shape.company {
border-right-color: #B53939;
border-bottom-color: #B53939;
}
.c-pageHeader_shape.service {
border-right-color: #3B53A7;
border-bottom-color: #3B53A7;
}
.c-pageHeader_shape.recruit {
border-right-color: #9DC02E;
border-bottom-color: #9DC02E;
}
.c-pageHeader_shape.contact {
border-right-color: #F5C860;
border-bottom-color: #F5C860;
}
.c-pageHeader_shape.event {
border-right-color: #9DC02E;
border-bottom-color: #9DC02E;
}
.c-pageHeader_shape.blog {
border-right-color: #3B53A7;
border-bottom-color: #3B53A7;
}
.p-recruit_intro {
position: relative;
width: 1080px;
margin: 120px auto 60px;
}
.p-recruit_intro_wrapper {
position: relative;
}
.p-recruit_intro_wrapper:before, .p-recruit_intro_wrapper:after {
position: absolute;
content: "";
bottom: -60px;
}
@media screen and (max-width: 768px) {
.p-recruit_intro_wrapper:before, .p-recruit_intro_wrapper:after {
display: none;
}
}
.p-recruit_intro_wrapper:before {
width: 50%;
height: 100%;
background-color: #CEDF96;
left: 0;
}
.p-recruit_intro_wrapper:after {
width: 0;
height: 0;
border-width: 216px;
border-style: solid;
border-color: transparent transparent #9DC02E #9DC02E;
left: calc(((100% - 1080px) / 2) + 1080px + 60px);
}
@media screen and (max-width: 768px) {
.p-recruit_intro {
width: 100%;
padding: 4.6875vw;
margin-top: 14.0625vw;
margin-bottom: 14.0625vw;
}
}
.p-recruit_intro:before, .p-recruit_intro:after {
position: absolute;
content: "";
}
.p-recruit_intro:before {
width: calc(100% + 60px);
height: 100%;
background-color: #CEDF96;
z-index: -2;
bottom: -60px;
left: 0;
}
@media screen and (max-width: 768px) {
.p-recruit_intro:before {
width: 100%;
height: 90%;
bottom: -4.6875vw;
}
}
.p-recruit_intro:after {
width: 0;
height: 0;
border-width: 216px;
border-style: solid;
border-color: transparent #fff #fff transparent;
bottom: -60px;
right: -60px;
z-index: -1;
}
@media screen and (max-width: 768px) {
.p-recruit_intro:after {
display: none;
}
}
.p-recruit_intro img {
width: 100%;
}
.p-recruit_intro figcaption {
background-color: #fff;
padding: 75px 70px;
}
@media screen and (max-width: 768px) {
.p-recruit_intro figcaption {
padding: 4.6875vw 7.03125vw 9.375vw;
}
}
.p-recruit_intro figcaption h2 {
font-size: 28px;
font-weight: bold;
}
@media screen and (max-width: 768px) {
.p-recruit_intro figcaption h2 {
font-size: 8.75vw;
}
}
@media screen and (max-width: 768px) {
.p-recruit_intro figcaption h2 {
font-size: 18px;
}
}
@media screen and (max-width: 768px) and (max-width: 768px) {
.p-recruit_intro figcaption h2 {
font-size: 5.625vw;
}
}
.p-recruit_intro figcaption p {
margin-top: 20px;
font-size: 20px;
color: #6F7579;
}
@media screen and (max-width: 768px) {
.p-recruit_intro figcaption p {
font-size: 6.25vw;
}
}
@media screen and (max-width: 768px) {
.p-recruit_intro figcaption p {
margin-top: 4.6875vw;
font-size: 14px;
}
}
@media screen and (max-width: 768px) and (max-width: 768px) {
.p-recruit_intro figcaption p {
font-size: 4.375vw;
}
}
.p-recruit_intro figcaption a {
margin: 66px auto 0;
}
@media screen and (max-width: 768px) {
.p-recruit_intro figcaption a {
margin-top: 4.6875vw;
}
}
.p-recruit_occupation {
background-color: #F2F5EA;
padding: 60px 0 150px;
}
@media screen and (max-width: 768px) {
.p-recruit_occupation {
margin-top: -9.375vw;
padding: 14.0625vw 0;
}
}
.p-recruit_occupation_lists {
width: 1080px;
margin: 90px auto 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
@media screen and (max-width: 768px) {
.p-recruit_occupation_lists {
width: 100%;
display: block;
margin-top: 14.0625vw;
padding: 0 4.6875vw;
}
}
.p-recruit_occupation_list {
width: 320px;
}
@media screen and (max-width: 768px) {
.p-recruit_occupation_list {
width: 100%;
}
.p-recruit_occupation_list:not(:last-of-type) {
margin-bottom: 4.6875vw;
}
}
.p-recruit_occupation_list img {
width: 100%;
height: 300px;
-o-object-fit: cover;
object-fit: cover;
-webkit-box-shadow: 0 3px 30px rgba(0, 0, 0, 0.1);
box-shadow: 0 3px 30px rgba(0, 0, 0, 0.1);
border-radius: 5px;
}
@media screen and (max-width: 768px) {
.p-recruit_occupation_list img {
-webkit-box-shadow: 0 0.9375vw 9.375vw rgba(0, 0, 0, 0.1);
box-shadow: 0 0.9375vw 9.375vw rgba(0, 0, 0, 0.1);
}
}
@media screen and (max-width: 768px) {
.p-recruit_occupation_list img {
height: initial;
}
}
.p-recruit_occupation_list p {
margin-top: 22px;
font-size: 20px;
font-weight: bold;
}
@media screen and (max-width: 768px) {
.p-recruit_occupation_list p {
font-size: 6.25vw;
}
}
@media screen and (max-width: 768px) {
.p-recruit_occupation_list p {
margin-top: 2.34375vw;
font-size: 16px;
}
}
@media screen and (max-width: 768px) and (max-width: 768px) {
.p-recruit_occupation_list p {
font-size: 5vw;
}
}
.p-recruit_occupation_none {
margin: 90px auto 0;
text-align: center;
}
.p-recruit_info {
width: 1080px;
margin-left: auto;
margin-right: auto;
background-color: #fff;
-webkit-box-shadow: 0 3px 30px rgba(0, 0, 0, 0.1);
box-shadow: 0 3px 30px rgba(0, 0, 0, 0.1);
padding: 60px;
}
@media screen and (max-width: 768px) {
.p-recruit_info {
-webkit-box-shadow: 0 0.9375vw 9.375vw rgba(0, 0, 0, 0.1);
box-shadow: 0 0.9375vw 9.375vw rgba(0, 0, 0, 0.1);
}
}
@media screen and (max-width: 768px) {
.p-recruit_info {
width: 100%;
padding: 7.03125vw;
}
}
.p-recruit_info_wrapper {
margin: 120px 0;
position: relative;
}
@media screen and (max-width: 768px) {
.p-recruit_info_wrapper {
margin: 14.0625vw 0;
padding: 4.6875vw;
}
}
.p-recruit_info_wrapper:before {
position: absolute;
content: "";
width: 50%;
height: 88%;
background-color: #CEDF96;
top: 0;
bottom: 0;
margin-top: auto;
margin-bottom: auto;
z-index: -1;
}
@media screen and (max-width: 768px) {
.p-recruit_info_wrapper:before {
left: 0;
}
}
.p-recruit_info_title {
font-size: 28px;
font-weight: bold;
margin-bottom: 20px;
}
@media screen and (max-width: 768px) {
.p-recruit_info_title {
font-size: 8.75vw;
}
}
@media screen and (max-width: 768px) {
.p-recruit_info_title {
font-size: 22px;
margin-bottom: 4.6875vw;
}
}
@media screen and (max-width: 768px) and (max-width: 768px) {
.p-recruit_info_title {
font-size: 6.875vw;
}
}
.p-recruit_info_detail {
margin-bottom: 65px;
letter-spacing: 0.15rem;
color: #6F7579;
font-weight: bold;
}
@media screen and (max-width: 768px) {
.p-recruit_info_detail {
margin-bottom: 14.0625vw;
}
}
.p-recruit_info_detail dt {
font-size: 20px;
padding-bottom: 10px;
border-bottom: 1px solid rgba(111, 117, 121, 0.1);
color: #3B53A7;
}
@media screen and (max-width: 768px) {
.p-recruit_info_detail dt {
font-size: 6.25vw;
}
}
@media screen and (max-width: 768px) {
.p-recruit_info_detail dt {
font-size: 14px;
padding-bottom: 2.34375vw;
}
}
@media screen and (max-width: 768px) and (max-width: 768px) {
.p-recruit_info_detail dt {
font-size: 4.375vw;
}
}
.p-recruit_info_detail dd {
padding: 15px 0;
border-bottom: 1px solid rgba(111, 117, 121, 0.1);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
font-size: 14px;
}
@media screen and (max-width: 768px) {
.p-recruit_info_detail dd {
font-size: 4.375vw;
}
}
@media screen and (max-width: 768px) {
.p-recruit_info_detail dd {
font-size: 13px;
padding: 3.125vw 0;
}
}
@media screen and (max-width: 768px) and (max-width: 768px) {
.p-recruit_info_detail dd {
font-size: 4.0625vw;
}
}
.p-recruit_info_detail dd th, .p-recruit_info_detail dd td {
text-align: left;
vertical-align: top;
padding: 0.8em 1em;
}
.p-recruit_info_detail dd th {
width: 240px;
}
@media screen and (max-width: 768px) {
.p-recruit_info_detail dd th {
display: inline-block;
width: 400px;
}
}
@media screen and (min-width: 769px) {
.p-recruit_info_detail dd td {
max-width: calc( 100% - 240px);
padding-left: 20px;
}
}
.p-recruit_info_detail dd td h2 {
font-size: 1.2em;
margin: 1.5em 0;
}
.p-recruit_info_detail dd td > *:first-child {
margin-top: 0;
}
.p-recruit_info_detail dd td > *:nth-child(n+2) {
margin-top: 1em;
}
.p-recruit_info_btn {
margin-left: auto;
margin-right: auto;
}

body {
overflow-x: visible!important;
}
.inner{
width: 100%;
max-width: calc(1170px + 5%* 2);
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding-left: 3%;
padding-right: 3%;
margin-left: auto;
margin-right: auto;
position: relative;
}
.p-recruit.archive{
overflow-x: hidden;
}
.rec-mv{
position: relative;
overflow: hidden;
height: min(1032 / 1920 * 100vw, 1032px); }
.rec-mv .recruit-piece{
max-width: 1920px;
height: min(1032 / 1920 * 100vw, 1032px);
width: 90%;
margin: 0 0 0 auto;
position: relative;
animation: loading 3s ease-in-out forwards;
}
@keyframes loading {
0% {opacity: 0;transform: scale(1.05);}
100% {opacity: 1;transform: scale(1);}
}
.rec-mv .catch{
position: absolute;
top: 41%;
transform: translate(0, -50%);
left: 3%;
width: 100%;
max-width: 27%;
}
.rec-mv .mvimg{
width: 100%;
position: absolute; animation-iteration-count: infinite;
transition: all 3s ease;
}
.bounce01{
animation: bounce 3s ease-in-out forwards;
}
.bounce02{
animation: bounce 5s ease-in-out forwards;
}
@keyframes bounce {
0% {
transform: scale(1);
-webkit-transform: scale(1);
}
50% {
transform: scale(1.03);
-webkit-transform: scale(1.03);
}
}
.rec-mv .mv01{  right: min(340 / 1920* 100vw, 3405px);
top: min(-240 / 1920* 100vw, -240px);
width: min(918 / 1920* 100vw, 918px);
}
.rec-mv .mv02{
right: min(625 / 1920* 100vw, 625px);
bottom: min(-325 / 1920* 100vw, -325px);
width: min(922 / 1920* 100vw, 922px);
}
.rec-mv .mv03{ right: min(178 / 1920* 100vw, 178px);
bottom: min(26 / 1920* 100vw, 26px);
width: min(590 / 1920* 100vw, 590px);
}
.rec-mv .mv04{  right: min(-485 / 1920* 100vw, -485px);
top: min(-75 / 1920* 100vw, -75px);
width: min(919 / 1920* 100vw, 919px);
}
.rec-mv .deco01{ bottom: min(-159 / 1920* 100vw, -159px);
right: min(1442 / 1920* 100vw, 1442px);
width: min(300 / 1920* 100vw, 300px)
}
.rec-mv .deco02{ top: min(-360 / 1920* 100vw, -360px);
right: min(30 / 1920* 100vw, 30px);
width: min(554 / 1920* 100vw, 554px);
}
.rec-mv .deco03{ bottom: min(-299 / 1920* 100vw, -299px);
right: min(-144 / 1920* 100vw, -144px);
width: min(586 / 1920* 100vw, 586px);
}
.rec-mv .deco04{ bottom: min(-110 / 1920* 100vw, -110px);
right: min(491 / 1920* 100vw, 491px);
width: min(200 / 1920* 100vw, 200px);
}
@media screen and (max-width: 1750px) {
.rec-mv .recruit-piece {
height: min(900 / 1920* 100vw, 900px);
}
.rec-mv .mv01 {
right: min(310 / 1920* 100vw, 310px);
top: min(-240 / 1920* 100vw, -240px);
width: min(890 / 1920* 100vw, 890px);
}
.rec-mv .mv03 {
right: min(128 / 1920* 100vw, 128px);
bottom: min(-50 / 1920* 100vw, -50px);
width: min(590 / 1920* 100vw, 590px);
}
.rec-mv .mv04 {
right: min(-465 / 1920* 100vw, -465px);
top: min(-105 / 1920* 100vw, -105px);
width: min(900 / 1920* 100vw, 900px);
}
.rec-mv .mv02 {
right: min(625 / 1920* 100vw, 625px);
bottom: min(-325 / 1920* 100vw, -325px);
width: min(912 / 1920* 100vw, 912px);
}
.rec-mv .deco01 {
bottom: min(-211 / 1920* 100vw, -211px);
right: min(1415 / 1920* 100vw, 1415px);
width: min(300 / 1920* 100vw, 300px);
}
.rec-mv .deco02 {
top: min(-360 / 1920* 100vw, -360px);
right: min(5 / 1920* 100vw, 5px);
width: min(554 / 1920* 100vw, 554px);
}
.rec-mv .deco03 {
bottom: min(-300 / 1920* 100vw, -300px);
right: min(-160 / 1920* 100vw, -160px);
width: min(536 / 1920* 100vw, 536px);
}
.rec-mv .deco04 {
bottom: min(-210 / 1920* 100vw, -210px);
right: min(441 / 1920* 100vw, 441px);
width: min(280 / 1920* 100vw, 280px);
}
}
@media screen and (max-width: 1510px) {
.rec-mv .mv04 {
right: min(-435 / 1920* 100vw, -435px);
top: min(-95 / 1920* 100vw, -95px);
width: min(900 / 1920* 100vw, 900px);
}
.rec-mv .mv01 {
right: min(310 / 1920* 100vw, 3105px);
top: min(-240 / 1920* 100vw, -240px);
width: min(900 / 1920* 100vw, 900px);
}
.rec-mv .mv02 {
right: min(570 / 1920* 100vw, 570px);
bottom: min(-325 / 1920* 100vw, -325px);
width: min(912 / 1920* 100vw, 912px);
}
.rec-mv .mv03 {
right: min(120 / 1920* 100vw, 120px);
bottom: min(-30 / 1920* 100vw, -30px);
width: min(580 / 1920* 100vw, 580px);
}
.rec-mv .deco04 {
bottom: min(-190 / 1920* 100vw, -190px);
right: min(421 / 1920* 100vw, 421px);
width: min(220 / 1920* 100vw, 220px);
}
.rec-mv .deco03 {
bottom: min(-290 / 1920* 100vw, -290px);
right: min(-145 / 1920* 100vw, -145px);
width: min(536 / 1920* 100vw, 536px);
}
.rec-mv .deco01 {
bottom: min(-221 / 1920* 100vw, -221px);
right: min(1380 / 1920* 100vw, 1380px);
width: min(300 / 1920* 100vw, 300px);
}
}
@media screen and (max-width: 1350px) {
.rec-mv .mv01 {
right: min(205 / 1350* 100vw, 205px);
top: min(-227 / 1350* 100vw, -227px);
width: min(720 / 1350* 100vw, 720px);
}
.rec-mv .mv02 {
right: min(490 / 1350* 100vw, 490px);
bottom: min(-225 / 1350* 100vw, -225px);
width: min(512 / 1350* 100vw, 512px);
}
.rec-mv .mv03 {
right: min(30 / 1350* 100vw, 30px);
bottom: min(-140 / 1350* 100vw, -140px);
width: min(520 / 1350* 100vw, 520px);
}
.rec-mv .mv04 {
right: min(-280 / 1350* 100vw, -280px);
top: min(-45 / 1350* 100vw, -45px);
width: min(550 / 1350* 100vw, 550px);
}
.rec-mv .deco01 {
bottom: min(-221 / 1920* 100vw, -221px);
right: min(1260 / 1920* 100vw, 1260px);
width: min(300 / 1920* 100vw, 300px);
}
.rec-mv .deco02 {
top: min(-250 / 1350* 100vw, -250px);
right: min(5 / 1350* 100vw, 5px);
width: min(354 / 1350* 100vw, 354px);
}
.rec-mv .deco03 {
bottom: min(-290 / 1350* 100vw, -290px);
right: min(-188 / 1350* 100vw, -188px);
width: min(390 / 1350* 100vw, 390px);
}
.rec-mv .deco04 {
bottom: min(-220 / 1350* 100vw, -220px);
right: min(360 / 1350* 100vw, 360px);
width: min(220 / 1350* 100vw, 220px);
}
}
@media screen and (max-width: 1060px) {
.rec-mv {
height: min(1300 / 1060* 100vw, 1300px);
}
.rec-mv .recruit-piece {
height: min(1300 / 1060* 100vw, 1300px);
}
.rec-mv .mv01 {
right: min(200 / 1060* 100vw, 200px);
top: min(-60 / 1060* 100vw, -60px);
width: min(900 / 1060* 100vw, 900px);
}
.rec-mv .mv03 {
right: min(-160 / 1060* 100vw, -160px);
bottom: min(30 / 1060* 100vw, 30px);
width: min(800 / 1060* 100vw, 800px);
}
.rec-mv .mv02 {
right: min(450 / 1060* 100vw, 450px);
bottom: min(-205 / 1060* 100vw, -205px);
width: min(912 / 1060* 100vw, 912px);
}
.rec-mv .mv04 {
right: min(-420 / 1060* 100vw, -420px);
top: min(75 / 1060* 100vw, 75px);
width: min(700 / 1060* 100vw, 700px);
}
.rec-mv .deco02 {
top: min(-90 / 1060* 100vw, -90px);
right: min(-50 / 1060* 100vw, -50px);
width: min(454 / 1060* 100vw, 454px);
}
.rec-mv .deco04 {
bottom: min(-130 / 1060* 100vw, -130px);
right: min(250 / 1060* 100vw, 250px);
width: min(320 / 1060* 100vw, 320px);
}
.rec-mv .deco03 {
bottom: min(-230 / 1060* 100vw, -230px);
right: min(-248 / 1060* 100vw, -248px);
width: min(536 / 1060* 100vw, 536px);
}
}
.staff-area{
padding: 5em 0;
}
.staff-area .staff-wrap{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
flex-direction: row-reverse;
margin-top: 8em;
}
.staff-area .staff-wrap .staff-box{
width: 44%;
margin-bottom: 4em;
position: relative;
}
.staff-area .staff-wrap .staff-box figure{
width: 100%;
}
.staff-area .staff-wrap .staff-box figure img{
display: block;
width: 100%;
}
.staff-area .staff-wrap .staff-box .office{
border: 1px solid #D5D7DE;
border-radius: 25px;
padding: 0.5em 1em;
text-align: center;
max-width: 144px;
width: 100%;
display: table;
font-weight: bold;
margin: 1.1em 0;
font-size: 14px;
}
.staff-area .staff-wrap .staff-box .catch{
font-size: 26px;
font-weight: bold;
}
.staff-area .staff-wrap .staff-box .name{
font-size: 20px;
font-weight: bold;
margin-top: 0.9em;
}
.staff-area .staff-wrap .staff-box:nth-child(even){
margin-top: 18em;
}
.staff-area .staff-wrap .staff-box:nth-child(3){
margin-top: -13em;
}
.int-wrapper{
display: flex;
justify-content: space-between;
position: relative;
flex-flow: row-reverse;
width: 100%;
padding: 0 1em 8em;
margin: 0 auto;
} .int-wrapper .contents{ 
width: 49vw;
padding-right: 12em;
}
.int-wrapper .contents div{ 
padding-top: 17vh; 
}
.int-wrapper .contents div .c-ttl{ 
margin-bottom: 0.5em;
position: relative;
padding-left: 0;
font-size: 3.5rem;
font-size: 35px;
font-weight: bold;
line-height: 1.6;
}
.int-wrapper .contents div .c-ttl.mt{
margin-top: 4em;
}
.int-wrapper .contents div p{
line-height: 1.8;
}
.int-wrapper .contents div:last-child{ 
padding-bottom: 18vh; 
} .int-wrapper .images{
width: 40vw;
height: 71vh;
display: flex;
align-items: center;
position: sticky;
position: -webkit-sticky;
top:0;
}
.int-wrapper .images p {
height: 400px;
margin: auto;
display: block;
visibility: hidden; position: absolute;
top: 0;
bottom: 0; transition: .8s;
opacity: 0;
}
.int-wrapper .images p img{
width: 100%;
max-width: 100%;
}
.int-wrapper .images p:first-child,
.int-wrapper .images p.active {
visibility: visible;
opacity: 1;
}
.int-wrapper .contents div .img-box{
display: none;
}
.int-profile{
border-bottom: 3px solid #376084;
padding-bottom: 1em;
margin-bottom: 4em;
}
.int-profile .profile-table{
display: flex;
justify-content: space-between;
font-weight: bold;
margin-bottom: 1em;
font-size: 20px;
}
.int-profile .profile-table dt{
width: 21%;
}
.int-profile .profile-table dd{
width: 85%;
}
.int-profile .catch{
font-size: 3.5rem;
font-size: 35px;
font-weight: bold;
line-height: 1.6;
margin-bottom: 0.6em;
}
.int-profile .office{
border: 1px solid #D5D7DE;
border-radius: 25px;
padding: 0.4em 1em;
text-align: center;
max-width: 144px;
width: 100%;
display: table;
font-weight: bold;
margin: 0.3em 0 1em;
}
.int-profile .name{
font-size: 35px;
font-weight: bold;
}
.int-profile .detail{
display: block;
margin: 1em 0 1.4em;
font-weight: bold;
font-size: 20px;
}
.message-area{
background-color: #FBFBFF;
padding: 6em 0 6em;
}
.message-area .m-block{
margin-top: 4em;
}
.message-area .m-block .c-btn{
margin: 3em auto 0;
}
.message-area .m-block p{
line-height: 2;
}
.message-area .ttl{
font-size: 3.2rem;
font-size: 32px;
font-weight: bold;
border-bottom: 3px solid #376084;
padding-bottom: 0.3em;
margin-bottom: 0.7em;
line-height: 1.6;
}
.p-recruit_occupation_lists{
flex-wrap : wrap;
}
.p-recruit_occupation_lists::after{
content:"";
display: block;
width: 320px;
}
@media screen and (max-width: 1300px) {
.int-wrapper .contents div .c-ttl {
font-size: 27px;
}
.int-wrapper .contents {
padding-right: 3em;
}
}
@media screen and (max-width: 900px) {
.int-wrapper .images {
width: 68vw;
}
.int-wrapper .contents {
width: 74vw;
}
}
@media screen and (max-width: 768px) {
.rec-mv {
height: 95vh;  }
.rec-mv .recruit-piece {
height: 95vh;
}
.rec-mv .deco02{
display: none;
}
.rec-mv .mv01 {
right: min(160 / 768* 100vw, 160px);
bottom: min(195 / 768* 100vw, 195px);
width: min(600 / 768* 100vw, 580px);
top: auto;
}
.rec-mv .mv02 {
right: min(440 / 768* 100vw, 440px);
bottom: min(-88 / 768* 100vw, -88px);
width: min(650 / 768* 100vw, 650px);
}
.rec-mv .mv03 {
right: min(-78 / 768* 100vw, -78px);
bottom: min(-58 / 768* 100vw, -58px);
width: min(600 / 768* 100vw, 600px);
}
.rec-mv .mv04 {
right: min(-55 / 768* 100vw, -55px);
bottom: min(520 / 768* 100vw, 520px);
width: min(500 / 768* 100vw, 500px);
top: auto;
}
.rec-mv .deco01 {
bottom: min(541 / 768* 100vw, 5421px);
right: min(570 / 768* 100vw, 570px);
width: min(400 / 768* 100vw, 400px);
}
.rec-mv .deco03 {
bottom: min(336 / 768* 100vw, 336px);
right: min(-98 / 768* 100vw, -98px);
width: min(320 / 768* 100vw, 320px);
}
.rec-mv .deco04 {
bottom: min(-59 / 1920* 100vw, -59px);
right: min(740 / 1920* 100vw, 740px);
width: min(580 / 1920* 100vw, 580px);
} 
.rec-mv .catch {
position: absolute;
top: 22%;
left: 3%;
width: 100%;
max-width: 76%;
} 
.staff-area {
padding: 1em 0 4em;
}
.staff-area .staff-wrap {
margin-top: 4em;
}
.staff-area .staff-wrap .staff-box:nth-child(even) {
margin-top: 0;
}
.staff-area .staff-wrap .staff-box:nth-child(3) {
margin-top: auto;
}
.staff-area .staff-wrap .staff-box .catch {
font-size: 22px;
}
.staff-area .staff-wrap .staff-box .name {
font-size: 15px;
margin-top: 1em;
}
.staff-area .staff-wrap .staff-box {
width: 100%;
}
.int-wrapper {
display: block;
}
.int-wrapper .contents {
width: 100%;
padding-right: 0;
}
.int-profile .catch {
font-size: 25px;
}
.int-profile .office {
font-size: 14px;
}
.int-profile .name {
font-size: 24px;
}
.int-profile .detail {
font-size: 14px;
}
.int-profile .profile-table {
font-size: 14px;
}
.int-wrapper .contents div .c-ttl {
margin-bottom: 1em;
font-size: 22px;
}
.int-wrapper .images{
display: none;
}
.int-wrapper .contents div .img-box{
display: block;
margin-top: 2em;
}
.int-wrapper .contents div .img-box img{
width: 100%;
display: block;
height: auto;
}
.int-wrapper .contents div {
padding-top: 9vh;
}
.message-area {
padding: 4em 0 4em;
}
.message-area .m-block .c-btn {
margin: 2em auto 0;
}
.message-area .ttl {
font-size: 20px;
padding-bottom: 0.6em;
}
}