@charset "UTF-8";
/* CSS Document */
@keyframes txtloop {
0% {
transform: translateX(100%);
}
to {
transform: translateX(-100%);
}
}
@keyframes txtloop2 {
0% {
transform: translateX(0);
}
to {
transform: translateX(-200%);
}
}
/* ズームイン */
@keyframes fvZoomIn {
0% {
transform: scale(1.25);
}
100% {
transform: scale(1);
}
}
@keyframes wave {
0% {
transform: scaleX(0.9) translate(-10%, 20%);
}
50% {
transform: scaleX(1.1) translate(10%, -20%);
}
100% {
transform: scaleX(0.9) translate(-10%, 20%);
}
}
@keyframes wave2 {
0% {
transform: scaleX(1.1) translateX(10%);
}
50% {
transform: scaleX(0.9) translateX(-10%);
}
100% {
transform: scaleX(1.1) translateX(10%);
}
}
@keyframes vertical-animation {
from {
transform: translateY(0);
}
to {
transform: translateY(-100%);
}
}
/*PC*/
@media print, screen and (min-width: 769px) {
/* com
--------------------------------------------*/
/* mv
--------------------------------------------*/
#mv {
width: 100%;
height: 100vh;
position: relative;
margin: 0;
overflow: hidden;
}
#mv .flex {
display: flex;
flex-wrap: wrap;
position: relative;
}
#mv .flex .t-mv-overlay {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: linear-gradient(180deg, rgba(182, 141, 105, 0.5) 0%, rgba(0, 0, 0, 0) 26.08%), linear-gradient(180deg, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.2) 100%), rgba(0, 0, 0, 0.2);
z-index: 9;
}

#mv .move {
overflow: hidden;
position: relative;
width:100%;
height:100vh;
height:100svh;
min-height: 50vh;
margin: 0 auto;
}

#mv .move::before{
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background:rgba(61, 145, 255, 0.2);
z-index: 1;
}

.top-hero .move video {
position: absolute;
top: 50%;
left: 50%;
object-fit: cover;
transform: translate(-50%, -50%);
width: 101%;
height: 101%;
}

#mv .txt {
width: 100%;
position: absolute;
bottom: 100px;
right: 0;
left: 0;
margin: auto;
text-align: center;
z-index: 10;
}
#mv .txt h1 {
letter-spacing: .04em;
font-size: 5.6rem;
font-weight: 700;
color: #FFF;
margin-bottom: 20px;
text-shadow: 0px 0px 6px rgba(0, 0, 0, .3);
}
#mv .txt h1 span {
color: #f4901b;
font-size: 8rem;
}
#mv .txt p {
font-size: 2.2rem;
font-weight: 600;
line-height: 2;
color: #FFF;
margin: 0;
text-shadow: 0px 0px 6px rgba(0, 0, 0, .3);
}
/* about
--------------------------------------------*/
#about {
width: 90%;
position: relative;
margin: 120px auto 100px;
}
.wave {
position: absolute;
top: 10%;
left: -40%;
width: 200%;
max-width: none;
animation: wave 15s linear infinite;
z-index: -1;
}
.wave2 {
position: absolute;
top: 18%;
left: -10%;
width: 140%;
max-width: none;
animation: wave2 15s linear infinite;
z-index: -1;
}
.wave svg, .wave2 svg {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
vertical-align: bottom;
}
#about h2 {
font-size: 4rem;
font-weight: 400;
margin-bottom: 100px;
}
#about h2 span {
display: block;
font-size: 12rem;
font-weight: 600;
line-height: 1.2;
color: #3f3f3f;
opacity: .2;
}
#about .flex_wrap {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
#about .flex_wrap .imgbox {
width: 55%;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
#about .flex_wrap .imgbox .img01 {
width: 65%;
margin-top: 50px;
}
#about .flex_wrap .imgbox .img02 {
width: 30%;
}
#about .flex_wrap .imgbox .img01, #about .flex_wrap .imgbox .img02 {
overflow: hidden;
border-radius: 5px;
}
#about .flex_wrap .imgbox .img01 img, #about .flex_wrap .imgbox .img02 img {
display: block;
width: 100%;
height: auto;
will-change: transform;
transform: translate3d(0, 0, 0);
border-radius: 5px;
}
#about .flex_wrap .txt {
position: relative;
width: 40%;
margin-top: 100px;
}
#about .flex_wrap .txt p {
font-size: 1.6rem;
line-height: 2;
font-weight: 600;
}
#about .flex_wrap .txt p span {
font-size: 2.4rem;
color: #f4901b;
font-weight: 800;
}
/* business
--------------------------------------------*/
#business {
position: relative;
margin: 0 auto 100px;
}
/* スクロール距離を確保（値は好みで調整） */
#business .wrapper {
width: 100%;
}
/* 画面先頭で固定 */
#business .wrapper .container {
width: 100%;
position: sticky;
top: 0;
display: grid;
place-items: center;
}
/* 今回は高さを固定してアスペクト比は使わない */
#business .wrapper .container .mask {
position: relative;
overflow: hidden;
height: 80vh !important; /* 画面いっぱいの縦サイズに固定 */
padding-top: 20vh;
}
/* 画像はマスク内にフィットさせ、拡大縮小に備える */
#business .wrapper .container .mask .img {
inset: 0;
width: 100%;
height: auto;
object-fit: cover;
transform-origin: center center;
will-change: transform;
}
#business .bg {
padding: 100px 5%;
background: #f8f8f8;
}
#business h2 {
font-size: 4rem;
font-weight: 400;
margin-bottom: 100px;
}
#business h2 span {
display: block;
font-size: 12rem;
font-weight: 600;
line-height: 1.2;
color: #3f3f3f;
opacity: .2;
}
#business h3 {
font-size: 3.8rem;
margin-bottom: 50px;
}
#business p.read {
font-size: 1.6rem;
line-height: 2;
font-weight: 600;
}
#business p.read span {
font-size: 2.4rem;
color: #f4901b;
font-weight: 800;
}
#business .flex_wrap {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
margin-top: 50px;
}
#business .flex_wrap li {
width: 45%;
}
#business .flex_wrap li a {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
background: #fff;
padding: 30px 40px;
border-radius: 10px;
border: 2px solid #3d3d3d;
}
#business .flex_wrap li a:hover {
box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
}
#business .flex_wrap li a .img {
width: 28%;
}
#business .flex_wrap li a .li_txt {
width: 67%;
}

#business .flex_wrap li a .li_txt .n_ttl{
font-size: 2rem;
font-weight: 800;
border-bottom: 1px solid #d1d1d1;
padding-bottom: 3px;
margin-bottom: 10px;
}

#business .flex_wrap li a .li_txt p{
font-size: 1.2rem;
font-weight: 800;
}

/* reason
--------------------------------------------*/
#reason {
position: relative;
margin: 0 auto 100px;
}
#reason .flex_wrap {
width: 90%;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 0 auto;
}
#reason .flex_wrap h2 {
width: 45%;
font-size: 4rem;
font-weight: 400;
}
#reason .flex_wrap h2 span {
display: block;
font-size: 12rem;
font-weight: 600;
line-height: 1.2;
color: #3f3f3f;
opacity: .2;
}
#reason .flex_wrap .txt {
width: 53%;
margin-top: 50px;
}
#reason .flex_wrap .txt h3 {
font-size: 2.8rem;
margin-bottom: 50px;
}
#reason .flex_wrap .txt p.read {
font-size: 1.6rem;
line-height: 2;
font-weight: 600;
}
#reason ul {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 70px auto 0;
}
#reason ul li {
width: calc(100% / 3);
}
#reason ul li a {
position: relative;
display: block;
padding: 50% 50px;
box-sizing: border-box;
color: #fff;
overflow: hidden;
}
#reason ul li a::before {
content: '';
width: 100%;
height: 100%;
position: absolute;
top: 0;
right: 0;
z-index: 0;
background-size: cover;
transition: transform .5s ease;
}
#reason ul li a:hover::before {
transform: scale(1.2);
transition: transform 1s ease;
}
#reason ul li:nth-child(1) a::before {
background: url("../images/index/reason_img01.jpg") no-repeat center;
}
#reason ul li:nth-child(2) a::before {
background: url("../images/index/reason_img02.jpg") no-repeat center;
}
#reason ul li:nth-child(3) a::before {
background: url("../images/index/reason_img03.jpg") no-repeat center;
}
#reason ul li a::after {
content: '';
width: 100%;
height: 100%;
position: absolute;
top: 0;
right: 0;
background: rgba(0, 0, 0, 0.6);
z-index: 0;
}
#reason ul li a h4 {
position: relative;
font-size: 2.8rem;
font-weight: 800;
margin-bottom: 30px;
z-index: 1;
}
#reason ul li a p {
position: relative;
font-size: 1.8rem;
font-weight: 600;
z-index: 1;
}
#reason .li_button {
position: absolute;
bottom: 50px;
right: 50px;
padding: 0 0 0 70px;
font-weight: 600;
}
#reason .li_button:before, #reason .li_button:after {
content: "";
position: absolute;
display: block;
top: 50%;
transition: all 0.5s;
}
#reason .li_button:before {
width: 0.7rem;
height: 0.7rem;
left: 12%;
border-top: solid 2px #f4901b;
border-right: solid 2px #f4901b;
z-index: 2;
transform: translateY(-50%) rotate(45deg);
}
#reason .li_button:after {
width: 5rem;
height: 5rem;
left: 0;
border: 1px solid #f4901b;
z-index: 1;
border-radius: 4rem;
transform: translateY(-50%);
}
#reason .li_button span {
position: relative;
z-index: 3;
font-size: 1.4rem;
}
#reason ul li a:hover .li_button:before {
border-top: solid 2px #fff;
border-right: solid 2px #fff;
transition: all 0.5s;
}
#reason ul li a:hover .li_button:after {
background: #f4901b;
transition: all 0.5s;
}
#reason ul li a:hover .li_button span {
color: #f4901b;
}
#reason article {
overflow: hidden;
position: relative;
margin: -5px 0 0;
}
#reason .loop_wrap {
display: flex;
width: 100%;
overflow: hidden;
margin: 0 auto 0;
}
#reason .loop_wrap div {
flex: 0 0 auto;
white-space: nowrap;
font-size: 12rem;
font-weight: 500;
line-height: 1;
overflow: hidden;
color: #F3F3F3;
letter-spacing: 2rem;
}
#reason .loop_wrap div:nth-child(odd) {
animation: txtloop 70s -35s linear infinite;
}
#reason .loop_wrap div:nth-child(even) {
animation: txtloop2 70s linear infinite;
}
/* message
--------------------------------------------*/
#message {
position: relative;
margin: 0 auto 100px;
}
#message .flex_wrap {
display: flex;
flex-wrap: wrap;
flex-direction: row-reverse;
justify-content: space-between;
align-items: center;
}
#message .txtbox {
width: 55%;
padding: 0px 5% 0px 3%;
box-sizing: border-box;
}
#message .txtbox h2 {
font-size: 4rem;
font-weight: 400;
margin-bottom: 50px;
}
#message .txtbox h2 span {
display: block;
font-size: 12rem;
font-weight: 600;
line-height: 1.2;
color: #3f3f3f;
opacity: .2;
}
#message .txtbox p {
font-size: 1.6rem;
line-height: 2;
font-weight: 600;
}
#message .txtbox .illust {
width: 90%;
margin: 40px auto 0;
}
#message .imgbox {
width: 45%;
}
#message .imgbox .message_slider {
position: relative;
width: 100%;
}
#message .imgbox .message_slider img {
margin: auto;
max-height: 100%;
max-width: 100%;
object-fit: cover;
width: 100%;
height: 110vh;
}
#message .add-animation {
animation: fvZoomIn 8s linear 0s normal both;
}
/* recruit
--------------------------------------------*/
#recruit {
position: relative;
margin: 0 auto 100px;
}
#recruit .txtbox {
position: relative;
width: 50%;
margin: 300px auto 250px;
text-align: center;
padding: 0 3%;
box-sizing: border-box;
}
#recruit .txtbox h2 {
font-size: 3rem;
font-weight: 400;
line-height: 1.6;
margin-bottom: 80px;
}
#recruit .txtbox h2 span {
display: block;
font-size: 12rem;
font-weight: 600;
line-height: 1.2;
color: #3f3f3f;
opacity: .2;
}
#recruit .txtbox p {
font-size: 1.6rem;
line-height: 2.4;
font-weight: 600;
margin-bottom: 60px;
}
#recruit .img {
position: absolute;
}
#recruit .img01 {
width: 23%;
max-width: 420px;
top: -2%;
left: 2%;
}
#recruit .img02 {
width: 20%;
max-width: 360px;
top: -10%;
right: 5%;
}
#recruit .img03 {
width: 20%;
max-width: 350px;
top: 65%;
left: 3%;
}
#recruit .img04 {
width: 22%;
max-width: 410px;
top: 42%;
right: 3%;
}
}
/*sp*/
@media only screen and (max-width: 768px) {
/* com
--------------------------------------------*/
/* mv
--------------------------------------------*/
#mv {
width: 100%;
height: 100vh;
position: relative;
margin: 0;
overflow: hidden;
}
#mv .flex {
position: relative;
}
#mv .flex .t-mv-overlay {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: linear-gradient(180deg, rgba(182, 141, 105, 0.5) 0%, rgba(0, 0, 0, 0) 26.08%), linear-gradient(180deg, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.2) 100%), rgba(0, 0, 0, 0.2);
z-index: 9;
}

#mv .move {
overflow: hidden;
position: relative;
width:100%;
height:100vh;
height:100svh;
min-height: 50vh;
margin: 0 auto;
}

#mv .move::before{
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background:rgba(61, 145, 255, 0.2);
z-index: 1;
}

#mv .move video {
position: absolute;
top: 50%;
left: 50%;
object-fit: cover;
transform: translate(-50%, -50%);
width: 101%;
height: 101%;
}
#mv .txt {
width:90%;
position: absolute;
top: 26%;
left: 5%;
margin: auto;
text-align: center;
z-index: 10;
}
#mv .txt h1 {
letter-spacing: .04em;
font-size: 2rem;
font-weight: 700;
color: #FFF;
margin-bottom: 20px;
text-shadow: 0px 0px 6px rgba(0, 0, 0, .3);
line-height: 1.6;
}
#mv .txt h1 span {
color: #f4901b;
font-size: 4.6rem;
display: block;
}
#mv .txt p {
font-size: 1.4rem;
font-weight: 600;
line-height: 2;
color: #FFF;
margin: 0;
text-shadow: 0px 0px 6px rgba(0, 0, 0, .3);
}
/* about
--------------------------------------------*/
#about {
width: 100%;
position: relative;
margin: 60px auto 0;
overflow: hidden;
}
.wave {
position: absolute;
top: 10%;
left: -40%;
width: 200%;
max-width: none;
animation: wave 15s linear infinite;
z-index: -1;
}
.wave2 {
position: absolute;
top: 18%;
left: -10%;
width: 140%;
max-width: none;
animation: wave2 15s linear infinite;
z-index: -1;
}
.wave svg, .wave2 svg {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
vertical-align: bottom;
}
#about h2 {
font-size: 1.8rem;
font-weight: 400;
margin-bottom: 100px;
width: 90%;
margin: auto;
}
#about h2 span {
display: block;
font-size: 4rem;
font-weight: 600;
line-height: 1;
color: #3f3f3f;
opacity: .2;
}
#about .flex_wrap {
position: relative;
}
#about .flex_wrap .imgbox {
width: 60%;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-left: 5%;
}
#about .flex_wrap .imgbox .img01 {
width: 65%;
margin-top: 50px;
}
#about .flex_wrap .imgbox .img02 {
width: 30%;
}
#about .flex_wrap .imgbox .img01, #about .flex_wrap .imgbox .img02 {
overflow: hidden;
border-radius: 5px;
}
#about .flex_wrap .imgbox .img01 img, #about .flex_wrap .imgbox .img02 img {
display: block;
width: 100%;
height: auto;
will-change: transform;
transform: translate3d(0, 0, 0);
border-radius: 5px;
}
#about .flex_wrap .txt {
position: relative;
width: 90%;
margin:40px auto 0;
}
#about .flex_wrap .txt p {
font-size: 1.2rem;
line-height: 2;
font-weight: 600;
}
#about .flex_wrap .txt p span {
font-size: 1.8rem;
color: #f4901b;
font-weight: 800;
}
/* business
--------------------------------------------*/
#business {
position: relative;
margin: 0 auto 60px;
}
/* スクロール距離を確保（値は好みで調整） */
#business .wrapper {
width: 100%;
}
/* 画面先頭で固定 */
#business .wrapper .container {
width: 100%;
position: sticky;
top: 0;
display: grid;
place-items: center;
}
/* 今回は高さを固定してアスペクト比は使わない */
#business .wrapper .container .mask {
position: relative;
overflow: hidden;
height: 200px !important; /* 画面いっぱいの縦サイズに固定 */
padding-top: 15vh;
}
/* 画像はマスク内にフィットさせ、拡大縮小に備える */
#business .wrapper .container .mask .img {
inset: 0;
width: 100%;
height: auto;
object-fit: cover;
transform-origin: center center;
will-change: transform;
}
#business .bg {
padding: 40px 5%;
background: #f8f8f8;
}
#business h2 {
font-size: 1.8rem;
font-weight: 400;
margin-bottom: 30px;
}
#business h2 span {
display: block;
font-size: 4rem;
font-weight: 600;
line-height: 1.2;
color: #3f3f3f;
opacity: .2;
}
#business h3 {
font-size: 2.2rem;
margin-bottom: 50px;
}
#business p.read {
font-size: 1.2rem;
line-height: 2;
font-weight: 600;
}
#business p.read span {
font-size:1.8rem;
color: #f4901b;
font-weight: 800;
}
#business .flex_wrap {
margin-top: 30px;
}
#business .flex_wrap li {
width: 100%;
margin-bottom: 20px;
}
#business .flex_wrap li:last-child{
margin-bottom: 0;
}
#business .flex_wrap li a {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
background: #fff;
padding: 15px 20px;
border-radius: 10px;
border: 2px solid #3d3d3d;
}
#business .flex_wrap li a:hover {
box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
}

#business .flex_wrap li a .img {
width: 28%;
}

#business .flex_wrap li a .li_txt {
width: 67%;
}

#business .flex_wrap li a .li_txt .n_ttl{
font-size: 1.8rem;
font-weight: 800;
border-bottom: 1px solid #d1d1d1;
padding-bottom: 3px;
margin-bottom: 10px;
}

#business .flex_wrap li a .li_txt p{
font-size: 1.2rem;
font-weight: 800;
}

/* reason
--------------------------------------------*/
#reason {
position: relative;
margin: 0 auto 60px;
}
#reason .flex_wrap {
width: 90%;
margin: 0 auto;
}
#reason .flex_wrap h2 {
width: 100%;
font-size: 1.8rem;
font-weight: 400;
}
#reason .flex_wrap h2 span {
display: block;
font-size: 4rem;
font-weight: 600;
line-height: 1.2;
color: #3f3f3f;
opacity: .2;
}
#reason .flex_wrap .txt {
width:100%;
margin-top: 20px;
}
#reason .flex_wrap .txt h3 {
font-size: 2.2rem;
margin-bottom: 50px;
}
#reason .flex_wrap .txt p.read {
font-size: 1.2rem;
line-height: 2;
font-weight: 600;
}
#reason ul {
margin: 50px auto 0;
}
#reason ul li {
width:100%;
}
#reason ul li a {
position: relative;
display: block;
padding: 10% 5% 25%;
box-sizing: border-box;
color: #fff;
overflow: hidden;
}
#reason ul li a::before {
content: '';
width: 100%;
height: 100%;
position: absolute;
top: 0;
right: 0;
z-index: 0;
background-size: cover;
transition: transform .5s ease;
}
#reason ul li a:hover::before {
transform: scale(1.2);
transition: transform 1s ease;
}
#reason ul li:nth-child(1) a::before {
background: url("../images/index/reason_img01.jpg") no-repeat center;
}
#reason ul li:nth-child(2) a::before {
background: url("../images/index/reason_img02.jpg") no-repeat center;
}
#reason ul li:nth-child(3) a::before {
background: url("../images/index/reason_img03.jpg") no-repeat center;
}
#reason ul li a::after {
content: '';
width: 100%;
height: 100%;
position: absolute;
top: 0;
right: 0;
background: rgba(0, 0, 0, 0.6);
z-index: 0;
}
#reason ul li a h4 {
position: relative;
font-size: 2rem;
font-weight: 800;
margin-bottom: 10px;
z-index: 1;
}
#reason ul li a p {
position: relative;
font-size: 1.2rem;
font-weight: 600;
z-index: 1;
margin-bottom: 20px;
}
#reason .li_button {
position: absolute;
bottom: 50px;
right: 50px;
padding: 0 0 0 40px;
font-weight: 600;
}
#reason .li_button:before, #reason .li_button:after {
content: "";
position: absolute;
display: block;
top: 50%;
transition: all 0.5s;
}
#reason .li_button:before {
width: 0.7rem;
height: 0.7rem;
left: 7%;
border-top: solid 2px #f4901b;
border-right: solid 2px #f4901b;
z-index: 2;
transform: translateY(-50%) rotate(45deg);
}
#reason .li_button:after {
width: 3rem;
height: 3rem;
left: 0;
border: 1px solid #f4901b;
z-index: 1;
border-radius: 3rem;
transform: translateY(-50%);
}
#reason .li_button span {
position: relative;
z-index: 3;
font-size: 1.4rem;
}
#reason ul li a:hover .li_button:before {
border-top: solid 2px #fff;
border-right: solid 2px #fff;
transition: all 0.5s;
}
#reason ul li a:hover .li_button:after {
background: #f4901b;
transition: all 0.5s;
}
#reason ul li a:hover .li_button span {
color: #f4901b;
}
#reason article {
overflow: hidden;
position: relative;
margin: -5px 0 0;
}
#reason .loop_wrap {
display: flex;
width: 100%;
overflow: hidden;
margin: 0 auto 0;
}
#reason .loop_wrap div {
flex: 0 0 auto;
white-space: nowrap;
font-size: 6rem;
font-weight: 500;
line-height: 1;
overflow: hidden;
color: #F3F3F3;
letter-spacing: 2rem;
}
#reason .loop_wrap div:nth-child(odd) {
animation: txtloop 70s -35s linear infinite;
}
#reason .loop_wrap div:nth-child(even) {
animation: txtloop2 70s linear infinite;
}
/* message
--------------------------------------------*/
#message {
position: relative;
margin: 0 auto 60px;
}
#message .flex_wrap {
position: relative;
}
#message .txtbox {
width: 90%;
margin: 0 auto 40px;
}
#message .txtbox h2 {
font-size: 1.8rem;
font-weight: 400;
margin-bottom: 50px;
}
#message .txtbox h2 span {
display: block;
font-size: 4rem;
font-weight: 600;
line-height: 1.2;
color: #3f3f3f;
opacity: .2;
}
#message .txtbox p {
font-size: 1.2rem;
line-height: 2;
font-weight: 600;
}
#message .txtbox .illust {
width: 100%;
margin: 40px auto 0;
}
#message .imgbox {
width: 100%;
}
#message .imgbox .message_slider {
position: relative;
width: 100%;
}
#message .imgbox .message_slider img {
margin: auto;
max-height: 100%;
max-width: 100%;
object-fit: cover;
width: 100%;
height: 60vh;
}
#message .add-animation {
animation: fvZoomIn 8s linear 0s normal both;
}
/* recruit
--------------------------------------------*/
#recruit {
position: relative;
margin: 0 auto 60px;
}
#recruit .txtbox {
position: relative;
width: 100%;
margin: 60px auto;
text-align: center;
padding: 0 3%;
box-sizing: border-box;
}
#recruit .txtbox h2 {
font-size: 1.8rem;
font-weight: 400;
line-height: 1.6;
margin-bottom: 40px;
}
#recruit .txtbox h2 span {
display: block;
font-size: 4rem;
font-weight: 600;
line-height: 1.2;
color: #3f3f3f;
opacity: .2;
}
#recruit .txtbox p {
font-size: 1.2rem;
line-height: 2.4;
font-weight: 600;
margin-bottom: 30px;
text-align: left;
}
#recruit .img {
position: relative;
}
#recruit .img01 {
width: 50%;
max-width: 420px;
top: -2%;
left: 2%;
}
#recruit .img02 {
width: 35%;
max-width: 360px;
margin: -50px 0 0 auto;
}
#recruit .img03 {
width: 40%;
max-width: 350px;
top: -5%;
left: 6%;
}
#recruit .img04 {
width: 30%;
max-width: 410px;
margin: -30px 0 0 auto;
right: 5%;
}
}