@charset "UTF-8";
@media screen and (min-width: 768px),print {

#ttlbox .inner-Box{padding: 27.5rem 0 0 0;margin-bottom: -126px;}
#ttlbox .inner-Box h1 .en{line-height: 1.3;margin-bottom: 1.2rem;}

#contentsmain {margin: -23px auto 13rem;position: relative;max-width: 1280px;padding: 9.4rem 4rem 0 4rem;}
#contentsmain p{ font-size: 1.6rem; line-height: 2.4; letter-spacing: 0; font-weight: 500; text-align: center; margin-bottom: 1.8rem; }

#contents01{padding: 0 4rem 101px;}
#contents01 h2{font-size: 2.8rem;line-height: 1.6;letter-spacing: 0;font-weight: 400;text-align: center;margin-bottom: 5.3rem;}
#contents01 .inner-Box .flip-item { opacity: 1; transition: opacity 0.25s ease; }
#contents01 .inner-Box .flip-item.is-hidden { opacity: 0; pointer-events: none; }
#contents01 .inner-Box .flip-item.is-none { display: none; }
#contents01 .inner-Box .flip-list { position: relative; transition: min-height 0.2s ease; }
#contents01 .inner-Box .flip-list {list-style: none;padding: 0;margin: 50px auto 30px auto;max-width: 1200px;display: flex;justify-content: flex-start;gap: 2.7%;flex-wrap: wrap;}
#contents01 .inner-Box .flip-item {width: calc(34.2% - 2.7%);min-height: 330px;perspective: 1000px;cursor: pointer;margin-bottom: 32px;}
#contents01 .inner-Box .flip-card-inner {position: relative;width: 100%;height: 100%;text-align: center;transition: transform 0.6s;transform-style: preserve-3d; #0097A3 1pxborder: solid;}
#contents01 .inner-Box .flip-item.is-flipped .flip-card-inner { transform: rotateY(180deg); }
#contents01 .inner-Box .face {position: absolute;width: 100%;height: 100%;top: 0;left: 0;backface-visibility: hidden;display: flex;flex-direction: column;/* box-shadow: 0 4px 8px rgba(0,0,0,0.1); */padding: 5.3rem 4rem;/* position: relative; */}
#contents01 .inner-Box .face.front {background-color: #fff;color: #0097A3;border: #0097A3 1px solid;}
#contents01 .inner-Box .face.front .number {margin-bottom: 2rem;font-size: 1.6rem;line-height: 0.56;letter-spacing: 0.096rem;font-weight: 400;font-style: italic;text-align: left;}
#contents01 .inner-Box .face.front .title {text-align: left;font-size: 2.4rem;line-height: 1.6;letter-spacing: 0;font-weight: 500;}
#contents01 .inner-Box .face.front .title span{  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
#contents01 .inner-Box .face.front .nnbe{font-size: 9.6rem;line-height: 1;color: #EEF7F9;position: absolute;bottom: 30px;left: 33px;}
#contents01 .inner-Box .face.front .ppnnbe{position: absolute;bottom: 47px;right: 38px;}

#contents01 .inner-Box .face.front.ffom2 {background-color: #EEF7F9;color: #0097A3;border: #0097A3 1px solid;}
#contents01 .inner-Box .face.front.ffom2 .number {margin-bottom: 2rem;letter-spacing: 0.096rem;font-weight: 400;font-style: italic;text-align: center;font-size: 1.1rem;line-height: 0.82;letter-spacing: 0.066rem;padding-top: 56px;}
#contents01 .inner-Box .face.front.ffom2 .title {font-size: 2.4rem;line-height: 1.6;letter-spacing: 0;font-weight: 500;text-align: center;}
#contents01 .inner-Box .face.front.ffom2 .title span{ font-size: 1.6rem; line-height: 1; letter-spacing: 0.096rem; display: block; padding-top: 13px; }



/* --- 裏面のデザイン --- */
#contents01 .inner-Box .face.back {background: url(../images/recruit/img.svg)no-repeat bottom 20px right 20px #0097A3;color: white;transform: rotateY(180deg);padding: 41px 11px 41px 41px;box-sizing: border-box;}
#contents01 .inner-Box .face.back figure { width: 90%; margin: 0 0 15px 0; overflow: hidden; border-radius: 10px; }
#contents01 .inner-Box .face.back img { width: 100%; height: auto; display: block; }
#contents01 .inner-Box .face.back .description {text-align: left;width: 90%;margin-bottom: 1rem;font-size: 1.8rem;line-height: 1.96;letter-spacing: 0;font-weight: 500;}
#contents01 .inner-Box .face.back .description p{margin-bottom: 35px;}
#contents01 .inner-Box .face.back .detail-btn::before{content: "";display: inline-block;width: 20px;height: 20px;background: url(../images/works/zoom.svg)no-repeat top center;background-size: 100% auto;position: relative;top: 4px;}



#contentsbottom {margin: -23px auto 16rem;position: relative;max-width: 1280px;padding: 0 4rem;}
#contentsbottom .inner-Box ul{display: -webkit-box; display: -moz-flex; display: -ms-flex; display: -o-flex; display: -ms-flexbox; display: flex; -webkit-box-lines: multiple; -moz-box-lines: multiple; -ms-flex-wrap: wrap; flex-wrap: wrap;}
#contentsbottom .inner-Box ul li {position: relative;width: 31.7%;margin-right: 2.4%;}
#contentsbottom .inner-Box ul li:nth-child(3n) { margin-right: 0px; }
#contentsbottom .inner-Box ul li a {display: block;height: 119px;background: #EEF7F9;position: relative;padding: 37px 10px 0 145px;}
#contentsbottom .inner-Box ul li a:hover {  }
#contentsbottom .inner-Box figure.figbo { position: absolute; top: 0; left: 0; }
#contentsbottom .inner-Box figure.figbo img{  }
#contentsbottom .inner-Box p.ltext {position: relative;font-size: 1.3rem;line-height: 1.5;letter-spacing: 0;font-weight: 400;}
#contentsbottom .inner-Box p.ltext span.f-en {display: block;margin-bottom: 10px;font-size: 1.6rem;line-height: 1;letter-spacing: 0.128rem;}
#contentsbottom .inner-Box ul li .arr{position: absolute;bottom: 15px;right: 17px;transition: all 0.3s ease-in-out;}
#contentsbottom .inner-Box ul li a:hover .arr{  right: 10px;}



}
@media screen and (min-width:768px) and ( max-width:1919px) {

}


@media screen and (max-width: 767px) {

#contentsmain {margin: 0vw auto 8vw;position: relative;padding: 6vw;}
#contentsmain p{font-size: 3.86vw;line-height: 2.4;letter-spacing: 0;font-weight: 500;text-align: center;margin-bottom: 7.8vw;}

#contents01{padding: 0 7vw 24.4vw;}
#contents01 h2{font-size: 5.76vw;line-height: 1.6;letter-spacing: 0;font-weight: 400;text-align: center;margin-bottom: 4.3vw;}
#contents01 .inner-Box .flip-item {opacity: 1;transition: opacity 0.25s ease;}
#contents01 .inner-Box .flip-item.is-hidden { opacity: 0; pointer-events: none; }
#contents01 .inner-Box .flip-item.is-none { display: none; }
#contents01 .inner-Box .flip-list { position: relative; transition: min-height 0.2s ease; }
#contents01 .inner-Box .flip-list {list-style: none;padding: 0;margin: 12.08vw auto 7.25vw auto;display: flex;justify-content: flex-start;gap: 2.7%;flex-wrap: wrap;}
#contents01 .inner-Box .flip-item {width: 100%;perspective: 90vw;cursor: pointer;margin-bottom: 7.73vw;height: 76vw;}
#contents01 .inner-Box .flip-card-inner {position: relative;width: 100%;height: 100%;text-align: center;transition: transform 0.6s;transform-style: preserve-3d; #0097A3 0.24vwborder: solid;}
#contents01 .inner-Box .flip-item.is-flipped .flip-card-inner { transform: rotateY(180deg); }
#contents01 .inner-Box .face {position: absolute;width: 100%;height: 100%;top: 0;left: 0;backface-visibility: hidden;display: flex;flex-direction: column;/* box-shadow: 0 0.97vw 1.93vw rgba(0,0,0,0.1); */padding: 8vw;/* position: relative; */}
#contents01 .inner-Box .face.front {background-color: #fff;color: #0097A3;border: #0097A3 0.24vw solid;}
#contents01 .inner-Box .face.front .number {margin-bottom: 2rem;font-size: 3.86vw;line-height: 0.56;letter-spacing: 0.23vw;font-weight: 400;font-style: italic;text-align: left;}
#contents01 .inner-Box .face.front .title {text-align: left;font-size: 5.8vw;line-height: 1.6;letter-spacing: 0;font-weight: 500;}
#contents01 .inner-Box .face.front .title span{  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
#contents01 .inner-Box .face.front .nnbe{font-size: 23.19vw;line-height: 1;color: #EEF7F9;position: absolute;bottom: 7.25vw;left: 7.97vw;}
#contents01 .inner-Box .face.front .ppnnbe{position: absolute;bottom: 7.18vw;right: 7.18vw;width: 5vw;}

#contents01 .inner-Box .face.front.ffom2 {background-color: #EEF7F9;color: #0097A3;border: #0097A3 0.24vw solid;}
#contents01 .inner-Box .face.front.ffom2 .number {margin-bottom: 2rem;letter-spacing: 0.23vw;font-weight: 400;font-style: italic;text-align: center;font-size: 2.66vw;line-height: 0.82;letter-spacing: 0.16vw;padding-top: 13.53vw;}
#contents01 .inner-Box .face.front.ffom2 .title {font-size: 5.8vw;line-height: 1.6;letter-spacing: 0;font-weight: 500;text-align: center;}
#contents01 .inner-Box .face.front.ffom2 .title span{ font-size: 3.86vw; line-height: 1; letter-spacing: 0.23vw; display: block; padding-top: 3.14vw; }

/* --- 裏面のデザイン --- */
#contents01 .inner-Box .face.back {background: url(../images/recruit/img.svg)no-repeat bottom 4.83vw right 4.83vw #0097A3;color: white;transform: rotateY(180deg);padding: 9.9vw 2.66vw 9.9vw 9.9vw;box-sizing: border-box;background-size: 18vw auto;}
#contents01 .inner-Box .face.back figure { width: 90%; margin: 0 0 3.62vw 0; overflow: hidden; border-radius: 2.42vw; }
#contents01 .inner-Box .face.back img { width: 100%; height: auto; display: block; }
#contents01 .inner-Box .face.back .description {text-align: left;width: 90%;margin-bottom: 1rem;font-size: 4.35vw;line-height: 1.96;letter-spacing: 0;font-weight: 500;}
#contents01 .inner-Box .face.back .description p{margin-bottom: 8.45vw;}
#contents01 .inner-Box .face.back .detail-btn::before{content: "";display: inline-block;width: 4.83vw;height: 4.83vw;background: url(../images/works/zoom.svg)no-repeat top center;background-size: 100% auto;position: relative;top: 0.97vw;}




#contentsbottom {margin: -8vw auto 13vw;position: relative;padding: 0 6.6vw;}
#contentsbottom .inner-Box ul{display: -webkit-box; display: -moz-flex; display: -ms-flex; display: -o-flex; display: -ms-flexbox; display: flex; -webkit-box-lines: multiple; -moz-box-lines: multiple; -ms-flex-wrap: wrap; flex-wrap: wrap;}
#contentsbottom .inner-Box ul li {position: relative;width: 100%;margin-bottom: 3.9vw;}
#contentsbottom .inner-Box ul li a {display: block;height: 32.28vw;background: #EEF7F9;position: relative;padding: 10.43vw 2.42vw 0 27.88vw;}
#contentsbottom .inner-Box ul li a:hover {  }
#contentsbottom .inner-Box figure.figbo { position: absolute;top: 0;left: 0;width: 21.5vw; aspect-ratio: 8 / 12; overflow: hidden; text-align: center;}
#contentsbottom .inner-Box figure.figbo img { width: 100%; height: 100%; object-fit: cover; display: block; }

#contentsbottom .inner-Box p.ltext {font-weight: 500;margin-bottom: 3rem;position: relative;font-size: 3.38vw;line-height: 1.5;letter-spacing: 0;}
#contentsbottom .inner-Box p.ltext span.f-en {font-size: 3.85vw;line-height: 1;letter-spacing: 0.35vw;display: block;margin-bottom: 3.02vw;}
#contentsbottom .inner-Box ul li .arr{position: absolute;bottom: 4.26vw;width: 5.1vw;right: 4.11vw;transition: all 0.3s ease-in-out;}
#contentsbottom .inner-Box ul li a:hover .arr{  right: 2.42vw;}

}