@charset "UTF-8"; .page_recruit-top { padding-left: 148px; } @media (max-width: 767px) { .page_recruit-top { padding-left: 0; } } /* recruit header --------------------------------------------------------*/ .page_recruit-top .recruit-site_header { width: 100%; left: 0; } @media (max-width: 767px) { .page_recruit-top .recruit-site_header { width: 100%; left: auto; } } /* Sticky Navigation --------------------------------------------------------*/ .page_recruit-top .side-nav { position: fixed; top: 55%; left: 24px; width: 100px; padding: 24px 16px; border-radius: 8px; background: #FFF; box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.25); transform: translateY(-50%); transition: top 0.3s ease, transform 0.3s ease, opacity 0.3s ease; z-index: 1000; } @media (max-width: 767px) { .page_recruit-top .side-nav { top: auto; right: 0; bottom: -40px; left: 0; width: 100%; padding: 12px 20px; border-radius: 0; transition: none; } } .page_recruit-top .side-nav.is-scrolled { top: 40px; transform: none; opacity: 0.4; } .page_recruit-top .side-nav:hover { opacity: 1; } .page_recruit-top .side-nav .side-nav_list { position: relative; } @media (max-width: 767px) { .page_recruit-top .side-nav .side-nav_list { display: flex; justify-content: center; } } .page_recruit-top .side-nav .side-nav_list li { padding: 8px 6px; transition: 0.5s; } .page_recruit-top .side-nav .side-nav_list li:nth-of-type(n+2) { margin-top: 10px; } @media (max-width: 767px) { .page_recruit-top .side-nav .side-nav_list li { padding: 4px 2px; transition: 0.5s; } .page_recruit-top .side-nav .side-nav_list li:nth-of-type(n+2) { margin-top: 0; } } .page_recruit-top .side-nav .side-nav_list li:hover { border-radius: 10px; background: rgba(98, 112, 157, 0.15); } .page_recruit-top .side-nav .side-nav_list li a:hover { opacity: unset; } .page_recruit-top .side-nav .side-nav_image { padding: 0 15px; } .page_recruit-top .side-nav .side-nav_title { color: #6C7A89; text-align: center; font-size: 1.1rem; font-weight: 500; } @media (max-width: 767px) { .page_recruit-top .side-nav .side-nav_title { font-size: 0.8rem; } } /* Text --------------------------------------------------------*/ .page_recruit-top .primary_lead-text { font-size: 2.2rem; font-weight: 500; line-height: 220%; } @media (max-width: 767px) { .page_recruit-top .primary_lead-text { font-size: 1.6rem; line-height: 200%; } } @media (min-width:768px) and ( max-width:1468px){ .page_recruit-top .primary_lead-text { font-size: 2rem; } } .page_recruit-top .primary_lead-small-text { font-size: 1.8rem; font-weight: 500; line-height: 220%; } @media (max-width: 767px) { .page_recruit-top .primary_lead-small-text { font-size: 1.6rem; line-height: 180%; } } @media (min-width:768px) and ( max-width:1468px){ .page_recruit-top .primary_lead-small-text { font-size: 1.7rem; } } /* Main Visual --------------------------------------------------------*/ .page_recruit-top .section_mainvisual { width: calc(100% + 148px); height: calc(100vh - 109px); left: calc(-148px); padding-bottom: 100px; } @media (max-width: 767px) { .page_recruit-top .section_mainvisual { width: 100%; height: 60vw; left: auto; padding-bottom: 0; } } .page_recruit-top .section_mainvisual .primary_title-lv1 { position: absolute; top: 32%; left: 35%; z-index: 1; } @media (max-width: 767px) { .page_recruit-top .section_mainvisual .primary_title-lv1 { top: 45%; left: 50%; width: 100%; transform: translate(-50%, -50%); display: flex; justify-content: center; } } .page_recruit-top .section_mainvisual .mainvisual_video { width: 100%; } /* NEWS --------------------------------------------------------*/ .page_recruit-top .section_news { margin: 100px 0 145px 0; } @media (max-width: 767px) { .page_recruit-top .section_news { margin: 50px 0 74px 0; } } @media (min-width:768px) and ( max-width:1468px){ .page_recruit-top .section_news .primary_contents-area { width: 1100px; } } .page_recruit-top .section_news .news_area { width: 840px; margin: 0 auto; padding: 28px 48px; background: #FFF; border-radius: 16px; box-shadow: 0 0 14px 0 rgba(0, 0, 0, 0.14); } @media (max-width: 767px) { .page_recruit-top .section_news .news_area { width: 100%; padding: 20px; } } .page_recruit-top .section_news .news_list { overflow: hidden; } .page_recruit-top .section_news .news_item { display: flex; margin-bottom: 25px; } @media (max-width: 767px) { .page_recruit-top .section_news .news_item { display: block; margin-bottom: 20px; } } .page_recruit-top .section_news .news_item .news_item-link { display: flex; align-items: center; } @media (max-width: 767px) { .page_recruit-top .section_news .news_item .news_item-link { display: block; } } .page_recruit-top .section_news .news_item .news_item-link:hover { opacity: 1; } .page_recruit-top .section_news .news_item .news_item-box { display: flex; align-items: center; } .page_recruit-top .section_news .news_item .news_item-box:first-child { flex: 0 0 200px; } @media (max-width: 767px) { .page_recruit-top .section_news .news_item .news_item-box:first-of-type { margin-bottom: 12px; } } .page_recruit-top .section_news .news_item .news_item-date { color: #666; font-size: 1.4rem; font-weight: 500; line-height: 100%; } .page_recruit-top .section_news .news_item .news_item-label { width: 70px; margin: 0 20px; padding: 4px 10px; text-align: center; color: #666; font-size: 1.2rem; font-weight: 500; line-height: 100%; border: 1px solid #666; border-radius: 123px; } .page_recruit-top .section_news .news_item-title { position: relative; font-size: 1.4rem; font-weight: 500; line-height: 160%; text-decoration: none; } @media (max-width: 767px) { .page_recruit-top .section_news .news_item-title { font-size: 1.2rem; font-weight: 400; } } .page_recruit-top .section_news .news_item .news_item-link:hover .news_item-title { color: #4662a8; text-decoration: underline; text-decoration-color: #4662a8; text-decoration-thickness: 1px; text-underline-offset: 3px; } .page_recruit-top .section_news .news_more { position: relative; text-align: center; } .page_recruit-top .section_news .news_more .news_more-link { position: relative; font-size: 1.4rem; font-weight: 500; letter-spacing: 1.2px; line-height: 100%; } .page_recruit-top .section_news .news_more .news_more-link::after { content: ''; position: relative; display: inline-block; top: -3px; width: 8px; height: 8px; margin-left: 12px; border-right: 2px solid #000; border-bottom: 2px solid #000; transform: rotate(45deg); transition: transform 0.3s ease; } .page_recruit-top .section_news .news_more .news_more-link.is_active::after { top: 2px; transform: rotate(-135deg); } /* Slogan --------------------------------------------------------*/ .page_recruit-top .section_slogan .slogan_area { display: flex; } @media (max-width: 767px) { .page_recruit-top .section_slogan .slogan_area { display: block; } } .page_recruit-top .section_slogan .slogan_title-area .slogan_title { color: #4662A8; font-size: 5.6rem; font-weight: 600; line-height: 160%; } @media (max-width: 767px) { .page_recruit-top .section_slogan .slogan_title-area .slogan_title { font-size: 3.8rem; } } @media (min-width:768px) and ( max-width:1468px){ .page_recruit-top .section_slogan .slogan_title-area .slogan_title { font-size: 5.1rem; } } .page_recruit-top .section_slogan .slogan_text-area { margin-left: 105px; } @media (max-width: 767px) { .page_recruit-top .section_slogan .slogan_text-area { margin-top: 50px; margin-left: 0; } } @media (min-width:768px) and ( max-width:1468px){ .page_recruit-top .section_slogan .slogan_text-area { margin-left: 95px; } } .page_recruit-top .section_slogan .slogan_text-area .slogan_text { font-size: 1.8rem; font-weight: 600; line-height: 220%; } @media (max-width: 767px) { .page_recruit-top .section_slogan .slogan_text-area .slogan_text { font-size: 1.6rem; } } .page_recruit-top .section_slogan .slogan_text-area .slogan_text:nth-of-type(n+2) { margin-top: 25px; } /* Column --------------------------------------------------------*/ .page_recruit-top .section_our-work .column_area { position: relative; } .page_recruit-top .column_box { position: relative; } @media (min-width:768px) and ( max-width:1468px){ .page_recruit-top .column_box { width: 1100px; } } .page_recruit-top .column_title { margin-bottom: 50px; font-size: 3.6rem; font-weight: 300; line-height: 100%; } @media (max-width: 767px) { .page_recruit-top .column_title { margin-bottom: 30px; font-size: 2.6rem; } } .page_recruit-top .column_list { display: flex; } @media (max-width: 767px) { .page_recruit-top .column_list { display: block; } } .page_recruit-top .column_item { position: relative; display: flex; width: 610px; } @media (max-width: 767px) { .page_recruit-top .column_item { display: block; width: 100%; } } .page_recruit-top .column_item:nth-of-type(2) { margin-left: 45px; } @media (max-width: 767px) { .page_recruit-top .column_item:nth-of-type(2) { margin-top: 30px; margin-left: 0; } } .page_recruit-top .column_image { width: 228px; height: 167px; } @media (max-width: 767px) { .page_recruit-top .column_image { width: 100%; height: auto; } } .page_recruit-top .column_image img { border-radius: 16px; } .page_recruit-top .column_text-box { margin-left: 15px; } @media (max-width: 767px) { .page_recruit-top .column_text-box { margin-top: 15px; margin-left: 0; } } .page_recruit-top .column_heading { margin-bottom: 15px; font-size: 1.6rem; font-weight: 700; line-height: 180%; letter-spacing: 0.7px; } .page_recruit-top .column_text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin-bottom: 15px; font-size: 1.4rem; font-weight: 500; line-height: 200%; } @media (max-width: 767px) { .page_recruit-top .column_link-area { text-align: right; padding-right: 10px; } } .page_recruit-top .column_link { color: #4662A8; font-size: 1.6rem; font-weight: 500; } .page_recruit-top .column_link::after { content: ""; position: relative; display: inline-block; top: -1px; left: 8px; width: 8px; height: 8px; border-top: 1px solid #4662A8; border-right: 1px solid #4662A8; transform: rotate(45deg); transition: .5s; } .page_recruit-top .column_archive-link { position: absolute; top: 5%; right: 30px; color: #4662A8; font-size: 1.6rem; font-weight: 500; line-height: 160%; } @media (max-width: 767px) { .page_recruit-top .column_archive-link { top: auto; right: 3%; bottom: -7%; } } .page_recruit-top .column_archive-link::after { content: ""; position: relative; display: inline-block; top: -1px; left: 8px; width: 8px; height: 8px; border-top: 1px solid #4662A8; border-right: 1px solid #4662A8; transform: rotate(45deg); transition: .5s; } /* Our work --------------------------------------------------------*/ .page_recruit-top .section_our-work { margin-top: 623px; } @media (max-width: 767px) { .page_recruit-top .section_our-work { margin-top: 265px; } } .page_recruit-top .section_our-work .bg_our-work { position: absolute; top: -435px; margin-left: -148px; } .page_recruit-top .section_our-work .bg_our-work img { height: 3007px; } @media (max-width: 767px) { .page_recruit-top .section_our-work .bg_our-work { top: -250px; margin-left: 0; } .page_recruit-top .section_our-work .bg_our-work img { height: 3143px; } } .page_recruit-top .section_our-work .features { position: relative; } .page_recruit-top .section_our-work .features .primary_title-box { align-items: end; } .page_recruit-top .section_our-work .features .primary_title-content { margin-left: 60px; } @media (max-width: 767px) { .page_recruit-top .section_our-work .features .primary_title-content { margin-top: 20px; margin-left: 0; } } .page_recruit-top .section_our-work .features .primary_contents-area { margin-top: 175px; } @media (max-width: 767px) { .page_recruit-top .section_our-work .features .primary_contents-area { margin-top: 75px; } } .page_recruit-top .section_our-work .features .features_item { position: relative; } .page_recruit-top .section_our-work .features .features_item-02 { margin-top: 290px; } @media (max-width: 767px) { .page_recruit-top .section_our-work .features .features_item-02 { margin-top: 130px; } } .page_recruit-top .section_our-work .features .features_item-03 { margin-top: 40px; } @media (max-width: 767px) { .page_recruit-top .section_our-work .features .features_item-03 { margin-top: 30px; } } .page_recruit-top .section_our-work .features .features_box { width: 1350px; margin: 0 auto; display: flex; align-items: flex-end; position: relative; z-index: 1; } @media (max-width: 767px) { .page_recruit-top .section_our-work .features .features_box { flex-wrap: wrap; } } .page_recruit-top .section_our-work .features_item-02 .features_box { align-items: flex-start; } @media (max-width: 767px) { .page_recruit-top .section_our-work .features_item-02 .features_box { flex-wrap: wrap-reverse; } } .page_recruit-top .section_our-work .features .features_item-text { position: relative; z-index: 2; width: 48%; padding: 90px 90px 90px 0; } .page_recruit-top .section_our-work .features_item-02 .features_item-text { padding: 90px 50px 90px 90px; } .features_item .features_item-text::before { content: ""; position: absolute; top: 0; right: 0; width: 200vw; height: 100%; background: rgba(255, 255, 255, 0.75); z-index: -1; border-radius: 0 150px 150px 0; } .features_item-02 .features_item-text::before { content: ""; position: absolute; top: 0; left: 0; width: 200vw; height: 100%; background: rgba(255, 255, 255, 0.75); z-index: -1; border-radius: 150px 0 0 150px; } @media (max-width: 767px) { .page_recruit-top .section_our-work .features .features_item-text { width: 100%; padding: 50px 20px; } .features_item .features_item-text::before { width: 100%; padding: 50px 20px; border-radius: 75px; } } @media (max-width: 767px) { .page_recruit-top .section_our-work .features .features_item-01 .features_box, .page_recruit-top .section_our-work .features .features_item-02 .features_box, .page_recruit-top .section_our-work .features .features_item-03 .features_box { width: 100%; } } .page_recruit-top .section_our-work .features .features_item .features_title { font-size: 3.4rem; font-weight: 700; line-height: 160%; } @media (max-width: 767px) { .page_recruit-top .section_our-work .features .features_item .features_title { font-size: 2.0rem; } } @media (min-width:768px) and ( max-width:1468px){ .page_recruit-top .section_our-work .features .features_item .features_title { font-size: 3.1rem; } } .page_recruit-top .section_our-work .features .features_item .features_text { margin-top: 32px; font-size: 1.6rem; font-weight: 500; letter-spacing: 1.2px; line-height: 240%; } @media (max-width: 767px) { .page_recruit-top .section_our-work .features .features_item .features_text { margin-top: 24px; font-size: 1.4rem; line-height: 220%; } } .page_recruit-top .section_our-work .features .features_item .features_images-area { z-index: -1; } .page_recruit-top .section_our-work .features .features_item-01 .features_images-area { width: 694px; height: 498px; margin-bottom: -100px; margin-left: -2%; } @media (max-width: 767px) { .page_recruit-top .section_our-work .features .features_item-01 .features_images-area { width: 100%; height: 305px; margin-top: -25px; margin-left: 0; } } @media (min-width:768px) and ( max-width:1468px){ .page_recruit-top .section_our-work .features .features_item-01 .features_images-area { width: 551px; display: flex; align-items: flex-end; } } .page_recruit-top .section_our-work .features .features_item-02 .features_images-area { width: 694px; height: 498px; margin-right: -2%; margin-top: -90px; } @media (max-width: 767px) { .page_recruit-top .section_our-work .features .features_item-02 .features_images-area { width: 100%; height: 300px; margin-top: -25px; margin-right: 0; } } @media (min-width:768px) and ( max-width:1468px){ .page_recruit-top .section_our-work .features .features_item-02 .features_images-area { width: 551px; } } .page_recruit-top .section_our-work .features .features_item-03 .features_images-area { width: 830px; height: 557px; z-index: 10; padding-top: 70px; margin-left: -80px; } @media (max-width: 767px) { .page_recruit-top .section_our-work .features .features_item-03 .features_images-area { width: 100%; height: 252px; padding-top: 0; margin-left: 0; margin-top: -25px; } } @media (min-width:768px) and ( max-width:1468px){ .page_recruit-top .section_our-work .features .features_item-03 .features_images-area { width: 645px; } } .page_recruit-top .section_our-work .features .features_item .features_images-area img { width: 100%; border-radius: 60px; } .page_recruit-top .section_our-work .features .features_item-03 .features_images-area img { border-radius: 0; } .features_item-text, .features_images-area { transform: translateY(0); will-change: transform; } /* Domain --------------------------------------------------------*/ .page_recruit-top .section_our-work .domain { position: relative; width: calc(100% + 148px); left: calc(-148px); margin: -500px 0 0 0; padding: 620px 0 430px 148px; } @media (max-width: 767px) { .page_recruit-top .section_our-work .domain { width: 100%; left: auto; padding: 600px 0 170px 0; } } .page_recruit-top .section_our-work .domain::after { content: ''; position: absolute; display: block; width: calc(100% + 148px); height: 100%; top: 0; left: calc(-148px); z-index: -10; background-color: #eee; } @media (max-width: 767px) { .page_recruit-top .section_our-work .domain::after { width: 100%; left: auto; } } .page_recruit-top .section_our-work .domain .primary_title-content { margin-left: 132px; } @media (max-width: 767px) { .page_recruit-top .section_our-work .domain .primary_title-content { margin-top: 25px; margin-left: 0; } } @media (min-width:768px) and ( max-width:1468px){ .page_recruit-top .section_our-work .domain .primary_title-content { margin-left: 80px; } } .page_recruit-top .section_our-work .domain .primary_contents-area { margin-top: 155px; } @media (max-width: 767px) { .page_recruit-top .section_our-work .domain .primary_contents-area { margin-top: 130px; } } @media (min-width:768px) and ( max-width:1468px){ .page_recruit-top .section_our-work .domain .primary_contents-area { width: 1100px; } } .page_recruit-top .section_our-work .domain .bg_domain { position: absolute; top: 40%; margin-left: -148px; } @media (max-width: 767px) { .page_recruit-top .section_our-work .domain .bg_domain { top: 52%; margin-left: 0; } } .page_recruit-top .section_our-work .domain .primary_box:nth-of-type(2) { margin-top: 60px; border-top: 4px dotted #CCC; } .page_recruit-top .section_our-work .domain .domain_heading { margin: 60px 0 150px 0; text-align: center; font-size: 2.6rem; font-weight: 700; line-height: 100%; } @media (max-width: 767px) { .page_recruit-top .section_our-work .domain .domain_heading { margin: 30px 0 0 0; font-size: 2.0rem; } } .page_recruit-top .section_our-work .domain .primary_box-special { position: relative; margin-top: 80px; } .page_recruit-top .section_our-work .domain .primary_box-special .domain_item-imagebox { position: absolute; top: 134px; right: 0; width: 387px; height: 385px; } @media (max-width: 767px) { .page_recruit-top .section_our-work .domain .primary_box-special .domain_item-imagebox { top: auto; bottom: 0; width: 145px; height: 145px; } } .page_recruit-top .section_our-work .domain .domain_item { padding: 130px 30px 50px 30px; border-radius: 16px; background: #FFF; } @media (max-width: 767px) { .page_recruit-top .section_our-work .domain .domain_item { margin-top: 152px; padding: 120px 30px 50px 30px; } } @media (max-width: 767px) { .page_recruit-top .section_our-work .domain .domain_item.domain_item01 { margin-top: 0; } } .page_recruit-top .section_our-work .domain .domain_item .domain_item-image { position: relative; } .page_recruit-top .section_our-work .domain .domain_item .domain_item-image img { position: absolute; top: -260px; left: 28%; width: 260px; height: 260px; padding: 10px; border-radius: 50%; background: #FFF; overflow: hidden; } @media (max-width: 767px) { .page_recruit-top .section_our-work .domain .domain_item .domain_item-image img { top: -220px; left: 50%; width: 174px; height: 174px; padding: 5px; transform: translateX(-50%); } } @media (min-width:768px) and ( max-width:1468px){ .page_recruit-top .section_our-work .domain .domain_item .domain_item-image img { left: 22%; } } .page_recruit-top .section_our-work .domain .domain_item .primary_text { line-height: 220%; } @media (max-width: 767px) { .page_recruit-top .section_our-work .domain .domain_item .primary_text { line-height: 200%; } } .page_recruit-top .section_our-work .domain .primary_box-special .domain_item { padding: 60px 377px 112px 60px; } @media (max-width: 767px) { .page_recruit-top .section_our-work .domain .primary_box-special .domain_item { margin-top: 65px; padding: 50px 20px 170px 20px; } } .page_recruit-top .section_our-work .domain .primary_box-special .domain_title { font-size: 4.0rem; font-weight: 700; line-height: 100%; } @media (max-width: 767px) { .page_recruit-top .section_our-work .domain .primary_box-special .domain_title { font-size: 2.0rem; } } .page_recruit-top .section_our-work .domain .primary_box-special .domain_title .domain_subtitle { display: block; margin-bottom: 5px; font-size: 2.4rem; } @media (max-width: 767px) { .page_recruit-top .section_our-work .domain .primary_box-special .domain_title .domain_subtitle { margin-bottom: 10px; font-size: 1.4rem; } } .page_recruit-top .section_our-work .domain .primary_box-special .primary_large-text { margin-top: 25px; } .page_recruit-top .section_our-work .domain .domain_item .domain_item-heading { margin: 30px 0; text-align: center; font-size: 2.6rem; font-weight: 700; line-height: 100%; } @media (max-width: 767px) { .page_recruit-top .section_our-work .domain .domain_item .domain_item-heading { margin: 0 0 30px 0; font-size: 2.0rem; line-height: 160%; } } @media (max-width: 767px) { .page_recruit-top .section_our-work .domain .domain_item .primary_text { line-height: 200%; } } /* Awards --------------------------------------------------------*/ .page_recruit-top .section_our-work .awards { position: relative; margin-bottom: 475px; } @media (max-width: 767px) { .page_recruit-top .section_our-work .awards { margin-bottom: 215px; } } .page_recruit-top .section_our-work .awards .bg_awards { position: absolute; top: -630px; margin-left: -148px; z-index: -1; } .page_recruit-top .section_our-work .awards .bg_awards img { height: 1562px; } @media (max-width: 767px) { .page_recruit-top .section_our-work .awards .bg_awards { top: -200px; margin-left: 0; } .page_recruit-top .section_our-work .awards .bg_awards img { height: 973px; } } .page_recruit-top .section_our-work .awards .catch_text { position: absolute; top: -335px; left: 5%; } @media (max-width: 767px) { .page_recruit-top .section_our-work .awards .catch_text { top: -150px; left: 0; } } .page_recruit-top .section_our-work .awards .primary_lead-small-text { margin-top: 20px; } @media (max-width: 767px) { .page_recruit-top .section_our-work .awards .primary_lead-small-text { margin-top: 15px; } } .page_recruit-top .section_our-work .awards .primary_btn { margin-top: 35px; } @media (max-width: 767px) { .page_recruit-top .section_our-work .awards .primary_btn { margin-top: 380px; } } .page_recruit-top .section_our-work .awards .primary_btn_link::after { background-image: none; } .page_recruit-top .section_our-work .awards .awards_images-area { position: relative; } @media (min-width:768px) and ( max-width:1468px){ .page_recruit-top .section_our-work .awards .awards_images-area img { width: 85%; } } .page_recruit-top .section_our-work .awards .awards_image { position: absolute; } .page_recruit-top .section_our-work .awards .awards_image-01 { top: -40px; left: 30px; width: 395px; } @media (max-width: 767px) { .page_recruit-top .section_our-work .awards .awards_image-01 { top: -385px; left: 0; width: 40%; } } @media (min-width:768px) and ( max-width:1468px){ .page_recruit-top .section_our-work .awards .awards_image-01 { left: 0; } } .page_recruit-top .section_our-work .awards .awards_image-02 { top: -80px; right: -30px; width: 395px; } @media (max-width: 767px) { .page_recruit-top .section_our-work .awards .awards_image-02 { top: -410px; right: 12%; width: 40%; } } @media (min-width:768px) and ( max-width:1468px){ .page_recruit-top .section_our-work .awards .awards_image-02 { right: 60px; } } .page_recruit-top .section_our-work .awards .awards_image-03 { top: 270px; right: -120px; width: 640px; } @media (max-width: 767px) { .page_recruit-top .section_our-work .awards .awards_image-03 { top: -270px; right: 3%; width: 65%; } } @media (min-width:768px) and ( max-width:1468px){ .page_recruit-top .section_our-work .awards .awards_image-03 { top: 250px; right: -10px; } } /* Members --------------------------------------------------------*/ .page_recruit-top .section_members { margin-top: 260px; } @media (max-width: 767px) { .page_recruit-top .section_members { margin-top: 220px; } } .page_recruit-top .section_members .bg_members { position: absolute; top: 200px; margin-left: -148px; } @media (max-width: 767px) { .page_recruit-top .section_members .bg_members { top: 120px; width: 100%; margin-left: 0; } } .page_recruit-top .section_members .primary_contents-area { margin-top: 160px; } @media (max-width: 767px) { .page_recruit-top .section_members .primary_contents-area { margin-top: 100px; } } .section_members .message_contents { position: relative; margin-top: 90px; display: flex; justify-content: flex-end; } @media (max-width: 767px) { .section_members .message_contents { margin-top: 36px; flex-wrap: wrap; justify-content: flex-end; } } @media (min-width:768px) and ( max-width:1468px){ .section_members .message_contents { width: 1100px; } } .section_members .message_contents .message_images-area { position: absolute; width: 424px; top: 0; left: 0; } @media (max-width: 767px) { .section_members .message_contents .message_images-area { position: relative; width: 100%; top: 0; left: 0; } } .section_members .message_contents .message_images-area img { width: 100%; height: auto; } .section_members .message_contents .message_text-area { background: #fff; width: calc(100% - 424px + 80px); margin: 80px 0 0 -80px; display: inline-flex; padding: 48px 35px 48px 116px; flex-direction: column; justify-content: center; align-items: flex-start; gap: 64px; border-radius: 24px; } @media (max-width: 767px) { .section_members .message_contents .message_text-area { width: 100%; margin: -110px -20px 0 0; padding: 146px 20px 36px 21px; } } @media (max-width: 767px) { .section_members .message_contents .message_text-area .primary_large-text { font-size: 1.4rem; } } .section_members .message_contents .message_text-area .primary_large-text + .primary_large-text { margin-top: 30px; } @media (max-width: 767px) { .section_members .message_contents .message_text-area .primary_large-text + .primary_large-text { margin-top: 20px; } } .section_members .message_contents .message_text-area .message_intro { margin-top: 64px; } /* Interview --------------------------------------------------------*/ @media screen and (max-width: 1450px) and (min-width: 768px) { .page_recruit-top .interview .interview_contents { margin-left: 0; } } /* Designer's Talk --------------------------------------------------------*/ @media screen and (max-width: 1450px) and (min-width: 768px) { .page_recruit-top .talk .talk_contents { margin-left: 0; } } /* Environment --------------------------------------------------------*/ .section_environment { margin-top: 270px; } @media (max-width: 767px) { .section_environment { margin-top: 180px; } } .section_environment .bg_environment { position: absolute; top: 180px; margin-left: -148px; } @media (max-width: 767px) { .section_environment .bg_environment { top: 130px; margin-left: 0; } } /* Gallery --------------------------------------------------------*/ .section_environment .gallery { margin-top: 265px; } @media (max-width: 767px) { .section_environment .gallery { margin-top: 163px; } } @media (min-width:768px) and ( max-width:1468px){ .section_environment .gallery { width: 1100px; } } .section_environment .gallery .primary_title-area .l-row > div:first-child { margin-top: -70px; } @media (max-width: 767px) { .section_environment .gallery .primary_title-area .l-row > div:first-child { margin-top: 0; } } .section_environment .gallery .primary_lead-large-text { font-size: 2.4rem; font-weight: 500; line-height: 220%; } @media (max-width: 767px) { .section_environment .gallery .primary_lead-large-text { margin-top: 35px; font-size: 1.6rem; } } @media (min-width:768px) and ( max-width:1468px){ .section_environment .gallery .primary_lead-large-text { font-size: 2rem; } } .section_environment .gallery .gallery_contents { margin-top: 57px; } .section_environment .gallery .gallery-slider__main { position: relative; } .section_environment .gallery .gallery-slider__main .swiper-slide { position: relative; border-radius: 24px; overflow: hidden; opacity: 0.5; } @media (max-width: 767px) { .section_environment .gallery .gallery-slider__main .swiper-slide { border-radius: 16px; } } .section_environment .gallery .gallery-slider__main .swiper-slide.swiper-slide-active { opacity: 1; } .section_environment .gallery .gallery-slider__main .swiper-slide.swiper-slide-active::before { content: ''; z-index: 1; position: absolute; bottom: 0; width: 100%; height: 100%; background: linear-gradient(180deg, rgba(196, 196, 196, 0.00) 75.96%, #707070 100%); } .section_environment .gallery .gallery-slider__main .swiper-slide .gallery-slider_img .gallery-slider_caption { z-index: 2; position: absolute; right: 44px; left: 44px; bottom: 29px; display: none; width: calc(100% - 88px); color: #fff; font-size: 1.8rem; font-weight: 500; line-height: 220%; } .section_environment .gallery .gallery-slider__main .swiper-slide.swiper-slide-active .gallery-slider_img .gallery-slider_caption { display: block; } .section_environment .gallery .gallery-slider__main .swiper-button-prev, .section_environment .gallery .gallery-slider__main .swiper-button-next { width: 50px; height: 50px; background: #fff; border-radius: 25px; } @media (max-width: 767px) { .section_environment .gallery .gallery-slider__main .swiper-button-prev, .section_environment .gallery .gallery-slider__main .swiper-button-next { width: 36px; height: 36px; } } .section_environment .gallery .gallery-slider__main .swiper-button-prev { left: 38px; } @media (max-width: 767px) { .section_environment .gallery .gallery-slider__main .swiper-button-prev { left: 0; } } .section_environment .gallery .gallery-slider__main .swiper-button-next { right: 38px; } @media (max-width: 767px) { .section_environment .gallery .gallery-slider__main .swiper-button-next { right: 0; } } .section_environment .gallery .gallery-slider__main .swiper-button-prev:after, .section_environment .gallery .gallery-slider__main .swiper-button-next:after { content: ''; width: 10px; height: 10px; border-top: 2px solid #000; border-left: 2px solid #000; } @media (max-width: 767px) { .section_environment .gallery .gallery-slider__main .swiper-button-prev:after, .section_environment .gallery .gallery-slider__main .swiper-button-next:after { width: 7px; height: 7px; } } .section_environment .gallery .gallery-slider__main .swiper-button-prev:after { transform: rotate(-45deg); } .section_environment .gallery .gallery-slider__main .swiper-button-next:after { margin-left: -4px; transform: rotate(135deg); } .section_environment .gallery .gallery-slider__main .swiper-slide .gallery-slider_img { position: relative; } @media (max-width: 767px) { .section_environment .gallery .gallery-slider__main .swiper-slide .gallery-slider_img .gallery-slider_caption { right: 24px; bottom: 10px; left: 24px; width: calc(100% - 48px); font-size: 1.2rem; } } .section_environment .gallery .gallery-slider_control { position: relative; display: flex; justify-content: center; width: 100%; height: 20px; margin-top: 60px; } @media (max-width: 767px) { .section_environment .gallery .gallery-slider_control { height: 10px; margin-top: 18px; } } .section_environment .gallery .gallery-slider_control .swiper-pagination { position: relative; top: unset; bottom: unset; } .section_environment .gallery .gallery-slider_control .swiper-pagination-bullet { width: 20px; height: 20px; margin: 0 15px; background: rgba(255, 255, 255, 0.40);; opacity: .4; } @media (max-width: 767px) { .section_environment .gallery .gallery-slider_control .swiper-pagination-bullet { width: 10px; height: 10px; margin: 0 5px; } } .section_environment .gallery .gallery-slider_control .swiper-pagination-bullet.swiper-pagination-bullet.swiper-pagination-bullet-active { background: #fff; opacity: 1; } /* Data --------------------------------------------------------*/ .section_environment .data { margin-top: 108px; margin-bottom: 120px; padding: 150px 80px 111px; text-align: center; border-radius: 24px; background: #FFF; box-shadow: 0 0 34px 0 rgba(0, 0, 0, 0.15); } @media (max-width: 767px) { .section_environment .data { margin-top: 64px; margin-bottom: 80px; padding: 60px 20px; border-radius: 30px; } } @media (min-width:768px) and ( max-width:1468px){ .section_environment .data { width: 1100px; } } .section_environment .data .data_contents { padding-top: 80px; } @media (max-width: 767px) { .section_environment .data .data_contents { padding-top: 68px; } } .section_environment .data .primary_lead-large-text { margin-top: 20px; color: #000; font-size: 1.8rem; font-weight: 500; line-height: 160%; } @media (max-width: 767px) { .section_environment .data .primary_lead-large-text { font-size: 1.6rem; } } @media (max-width: 767px) { .section_environment .data .data-lists .data-lists_item + .data-lists_item { margin-top: 48px; } } .section_environment .data .data-lists .data-lists_item:nth-of-type(n+4) { margin-top: 60px; } @media (max-width: 767px) { .section_environment .data .data-lists .data-lists_item:nth-of-type(n+4) { margin-top: 0; } } .section_environment .data .data-lists .data-lists_item:nth-of-type(6) { display: flex; flex-direction: column; justify-content: center; align-items: center; } .section_environment .data .data-lists .data-lists_link { position: relative; width: 315px; padding: 20px 20px 20px 40px; color: #4662a8; text-align: center; font-size: 2.2rem; font-weight: 500; line-height: 1; border-radius: 8px; border: 1px solid #4662a8; background: #FFF; transition: 0.5s; opacity: unset; } @media (max-width: 767px) { .section_environment .data .data-lists .data-lists_link { padding: 15px 25px 15px 20px; font-size: 1.6rem; } } .section_environment .data .data-lists .data-lists_link:hover { color: #FFF; background: #4662a8; } .section_environment .data .data-lists .data-lists_link .icon_blank { position: relative; top: 1px; left: 65px; } .section_environment .data .data-lists .data-lists_link .icon_blank svg { width: 1em; height: 1em; transition: .5s; } .section_environment .data .data-lists .data-lists_link::after { background-image: none; } .section_environment .data .data-lists_item .data-lists_title { font-size: 2rem; font-weight: 500; line-height: 160%; } .section_environment .data .data-lists .data-lists_item:nth-of-type(6) .data-lists_link + .data-lists_title { margin-top: 56px; } @media (max-width: 767px) { .section_environment .data .data-lists .data-lists_item:nth-of-type(6) .data-lists_link + .data-lists_title { margin-top: 53px; } } .section_environment .data .data-lists .data-lists_item:nth-of-type(6) .data-lists_title + .data-lists_link { margin-top: 15px; } .section_environment .data .data_contents .data-survey::before, .section_environment .data .data_contents .data-survey::after { content: ''; display: table; clear: both; } .section_environment .data .data_contents .data-survey { display: block; margin-top: 56px; overflow: hidden; } .section_environment .data .data-lists_more { position: relative; display: inline-block; margin-top: 75px; text-align: center; font-size: 2.2rem; font-weight: 500; line-height: 100%; } .section_environment .data .data-lists_more:not(:focus-visible) { outline: 0; } @media (max-width: 767px) { .section_environment .data .data-lists_more { margin-top: 83px; font-size: 1.6rem; } } .section_environment .data .data-lists_more::after { content: ''; position: relative; display: inline-block; top: -5px; width: 12px; height: 12px; margin-left: 24px; border-right: 2px solid #000; border-bottom: 2px solid #000; transform: rotate(45deg); transition: transform 0.3s ease; } @media (max-width: 767px) { .section_environment .data .data-lists_more::after { top: -4px; width: 8px; height: 8px; margin-left: 16px; } } .section_environment .data .data-lists_more.is_active::after { top: 1px; transform: rotate(-135deg); } /* Data : More Button --------------------------------------------------------*/ .clearfix:before, .clearfix:after { content: " "; display: table; } .block-data { margin-left: -10px; margin-right: -10px; padding-bottom: 100px; } @media only screen and (max-width: 767px) { .block-data { margin-left: 0; margin-right: 0; padding-bottom: 0; } } .block-data > li { position: relative; display: inline-block; float: left; width: 33.333%; padding: 10px; margin-top: 60px; } @media only screen and (max-width: 1024px) { .block-data > li { width: 50%; } } @media only screen and (max-width: 767px) { .block-data > li { float: none; width: 100%; padding: 0 0 25px; margin-top: 48px; } } .block-data .wrap-data { width: 100%; height: 0; padding-bottom: 100%; } .block-data .wrap-data h4 { font-size: 2rem; font-weight: 500; line-height: 160%; } @media only screen and (min-width: 768px) and (max-width: 1200px) { .block-data .wrap-data h4 { font-size: 16px; padding: 5px 10px; } } @media only screen and (max-width: 767px) { .block-data .wrap-data h4 { padding: 5px 10px; top: 0; left: 0; } } @media only screen and (max-width: 360px) { .block-data .wrap-data h4 { font-size: 15px; } } .block-data .wrap-data > img { display: block; max-width: 100%; margin: 0 auto; } @media only screen and (min-width: 768px) and (max-width: 1024px) { .block-data .row-2 { width: 100%; } } .block-data .row-2 .wrap-data { padding-bottom: calc(200% + 40px); } @media only screen and (max-width: 1024px) { .block-data .row-2 .wrap-data { height: auto !important; padding-bottom: 0; } } .block-data .col-2 { width: 66.666%; } @media only screen and (max-width: 1024px) { .block-data .col-2 { width: 100%; } } .block-data .col-2 .wrap-data { padding-bottom: 50%; } @media only screen and (max-width: 1024px) { .block-data .col-2 .wrap-data { height: auto !important; padding-bottom: 0; } } .block-data .col-2.row-2 .wrap-data { padding-bottom: 100%; } @media only screen and (max-width: 1024px) { .block-data .col-2.row-2 .wrap-data { height: auto !important; padding-bottom: 0; } } .block-data .col-3 { width: 100%; } .block-data .col-3 .wrap-data { padding-bottom: 33.333%; } @media only screen and (max-width: 1200px) { .block-data .col-3 .wrap-data { height: auto !important; padding-bottom: 0; } } @media only screen and (min-width: 1025px) { .block-data .f-r { float: right; } } .block02 .wrap-data p, .block02 .wrap-data li { font-size: 14px; line-height: 1.7; letter-spacing: 0.05em; font-weight: bold; } .block02 .wrap-box .box { position: relative; } .block02 .wrap-box .box .img { position: absolute; bottom: 0; left: 0; text-align: center; width: 35%; } .block02 .wrap-box .box .img img { max-width: 100%; } .block02 .wrap-box .box p { border-radius: 20px; padding: 10px; display: inline-block; width: 65%; } .block02 .wrap-box .box .white { background: #fff; } .block02 .wrap-box .box .blue { background: #c1deeb; } .block02 .wrap-box .box .left { position: relative; margin-right: 35%; } .block02 .wrap-box .box .left + .img { left: auto; right: 0; } .block02 .wrap-box .box .left:before { content: ''; display: block; border-top: 12px solid transparent; border-bottom: 12px solid transparent; border-left: 18px solid #c1deeb; position: absolute; right: -18px; bottom: 50%; -webkit-transform: translateY(50%); -ms-transform: translateY(50%); transform: translateY(50%); } .block02 .wrap-box .box .left.white:before { border-left: 18px solid #fff; } .block02 .wrap-box .box .right { position: relative; margin-left: 35%; } .block02 .wrap-box .box .right:before { content: ''; display: block; border-top: 12px solid transparent; border-bottom: 12px solid transparent; border-right: 18px solid #c1deeb; position: absolute; left: -18px; bottom: 50%; -webkit-transform: translateY(50%); -ms-transform: translateY(50%); transform: translateY(50%); } .block02 .wrap-box .box .right.white:before { border-right: 18px solid #fff; } .block02 .data-01 img { position: absolute; top: 0; left: 0; } .block02 .data-01 ul { position: absolute; left: 25%; top: 25%; } @media only screen and (min-width: 768px) and (max-width: 1200px) { .block02 .data-01 ul { top: 22%; } } @media only screen and (max-width: 374px) { .block02 .data-01 ul { top: 17%; } } .block02 .data-01 ul.right { left: 52%; } .block02 .data-01 ul li { font-size: 19px; line-height: 2; } .block02 .data-02 ul { text-align: center; width: 71%; margin: 0 auto; padding-top: 14%; } @media only screen and (min-width: 768px) and (max-width: 1200px) { .block02 .data-02 ul { width: 85%; } } @media only screen and (max-width: 374px) { .block02 .data-02 ul { width: 85%; } } .block02 .data-02 ul li { font-size: 18px; line-height: 24px; background: -webkit-linear-gradient(transparent 75%, #f0e086 75%); background: linear-gradient(transparent 75%, #f0e086 75%); margin-bottom: 1em; } @media only screen and (min-width: 768px) and (max-width: 1200px) { .block02 .data-02 ul li { font-size: 15px; margin-bottom: 0.8em; } } @media only screen and (max-width: 374px) { .block02 .data-02 ul li { font-size: 15px; margin-bottom: 0.8em; } } .block02 .data-02 p { text-align: right; padding-right: 20px; margin-top: -0.5em; } @media only screen and (min-width: 1025px) and (max-width: 1200px) { .block02 .data-04 { padding-bottom: 125% !important; } } @media only screen and (min-width: 768px) { .block02 .data-04 img.sp { display: none; } } @media only screen and (max-width: 767px) { .block02 .data-04 img.pc { display: none; } } .block02 .data-04 .img-data04 { padding: 50px 30px 0; } .block02 .data-04 .wrap-box { padding: 0 25px; } @media only screen and (max-width: 1024px) { .block02 .data-04 .wrap-box { padding: 0 25px 30px; } } @media only screen and (max-width: 767px) { .block02 .data-04 .wrap-box { padding: 0 30px 0 0; } } .block02 .data-04 .wrap-box .box { text-align: left; width: 50%; float: left; } @media only screen and (max-width: 767px) { .block02 .data-04 .wrap-box .box { width: 100%; float: none; margin-bottom: 25px; } } .block02 .data-04 .wrap-box .box p { width: 56%; margin-left: 44%; padding: 15px; height: 100%; } @media only screen and (max-width: 767px) { .block02 .data-04 .wrap-box .box p { width: 65%; margin-left: 35%; } } .block02 .data-04 .wrap-box .box p:before { bottom: 60px; } .block02 .data-04 .data-04-ttl { text-align: center; line-height: 2; background: #79b7d9; color: #fff; width: 160px; padding: 2px 10px; margin: 0 auto 30px; } @media only screen and (min-width: 1025px) and (max-width: 1200px) { .block02 .data-04 .data-04-ttl { margin: 30px auto; } } @media only screen and (max-width: 1024px) { .block02 .data-04 .data-04-ttl { font-size: 18px; width: auto; margin: 20px; } } .block02 .data-04 .img { width: 45% !important; } @media only screen and (max-width: 767px) { .block02 .data-04 .img { width: 35% !important; } } .block02 .data-04 .img_1 { width: 86px; } .block02 .data-04 .img_2 { width: 42px; } @media only screen and (min-width: 1025px) and (max-width: 1200px) { .block02 .data-06 { padding-bottom: 150%; } } @media only screen and (max-width: 1024px) { .block02 .data-06 { height: auto !important; padding-bottom: 0; } } .block02 .data-06 .wrap-box { padding: 16% 30px; } @media only screen and (max-width: 1024px) { .block02 .data-06 .wrap-box { padding: 60px 0 5px; } } .block02 .data-06 .wrap-box .box { margin-bottom: 10px; } @media only screen and (max-width: 1024px) { .block02 .data-06 .wrap-box .box { min-height: 130px; margin-bottom: 25px; } .block02 .data-06 .wrap-box .box-06_01 { padding-right: 30px; } .block02 .data-06 .wrap-box .box-06_02 { padding-left: 30px; } } .block02 .data-06 .img_1 { width: 43px; } .block02 .data-06 .img_2 { width: 33px; } .block02 .data-07 .wrap-box { padding: 30px 10px; } @media only screen and (max-width: 1024px) { .block02 .data-07 .wrap-box { padding: 30px 0 120px; text-align: center; } } @media only screen and (max-width: 767px) { .block02 .data-07 .wrap-box { padding-bottom: 60px; } } .block02 .data-07 .wrap-box .box { width: 24%; display: inline-block; height: 50%; vertical-align: top; padding: 5px; } @media only screen and (max-width: 767px) { .block02 .data-07 .wrap-box .box { width: 49%; padding: 0 7px 20px; } } .block02 .data-07 .data-07-ttl { margin-bottom: -20px; position: relative; z-index: 2; text-align: center; color: #0f3468; font-size: 16px; width: auto !important; display: block !important; } @media only screen and (max-width: 1200px) { .block02 .data-07 .data-07-ttl { font-size: 13px; } } .block02 .data-07 .data-07-txt { position: relative; padding-top: 20px !important; height: 175px; width: auto !important; text-align: left; } @media only screen and (min-width: 1025px) and (max-width: 1200px) { .block02 .data-07 .data-07-txt { font-size: 12px; } } @media only screen and (max-width: 767px) { .block02 .data-07 .data-07-txt { height: 160px; } } @media only screen and (max-width: 374px) { .block02 .data-07 .data-07-txt { font-size: 12px; padding: 7px; } } .block02 .data-07 .img { display: block; width: 100%; position: absolute; bottom: -13px; left: 0; text-align: center; } .block02 .data-07 .img img { max-width: 100%; } @media only screen and (max-width: 1024px) { .block02 .data-07 .img { bottom: 40px; } .block02 .data-07 .img img { width: 90%; } } @media only screen and (min-width: 768px) { .block02 .data-08 img.sp { display: none; } } @media only screen and (max-width: 767px) { .block02 .data-08 img.pc { display: none; } } .block02 .data-09 .wrap-box { padding: 24% 30px; } @media only screen and (min-width: 1025px) and (max-width: 1200px) { .block02 .data-09 .wrap-box { padding: 30px 20px; } } @media only screen and (max-width: 1024px) { .block02 .data-09 .wrap-box { padding: 60px 0 5px; } } .block02 .data-09 .wrap-box .box { margin-bottom: 60px; } @media only screen and (min-width: 1025px) and (max-width: 1200px) { .block02 .data-09 .wrap-box .box { margin-bottom: 10px; } } @media only screen and (max-width: 1024px) { .block02 .data-09 .wrap-box .box { min-height: 130px; margin-bottom: 30px; } .block02 .data-09 .wrap-box .box-09_01, .block02 .data-09 .wrap-box .box-09_03 { padding-right: 30px; } .block02 .data-09 .wrap-box .box-09_02 { padding-left: 30px; } } .block02 .data-09 .img_1 { width: 41px; } .block02 .data-09 .img_2 { width: 39px; } .block02 .data-09 .img_3 { width: 43px; } .block02 .data-10 .wrap-box { padding: 70px 25px 0; } @media only screen and (min-width: 1025px) and (max-width: 1200px) { .block02 .data-10 .wrap-box { padding: 50px 25px 20px; } } @media only screen and (max-width: 1024px) { .block02 .data-10 .wrap-box { padding: 60px 30px 0 0; } } .block02 .data-10 .wrap-box .box { width: 33.333%; float: left; padding: 0 15px; } @media only screen and (max-width: 1024px) { .block02 .data-10 .wrap-box .box { width: 100%; float: none; padding: 0; margin-bottom: 25px; min-height: 130px; } } .block02 .data-10 .wrap-box .box p { height: 100%; padding: 15px 10px; } .block02 .data-10 .wrap-box .box p:before { bottom: 60px; } .block02 .data-10 .img_1 { width: 40px; } .block02 .data-10 .img_2 { width: 44px; } .block02 .data-10 .img_3 { width: 40px; } @media only screen and (min-width: 768px) and (max-width: 1024px) { .tb-hide { display: none !important; } } @media only screen and (max-width: 767px) { .tb-only { display: none !important; } } @media only screen and (min-width: 1025px) { .tb-only { display: none !important; } } @media only screen and (min-width: 768px) and (max-width: 1024px) { .tb-100 { width: 100% !important; } } @media only screen and (min-width: 1025px) { .js-anim .wrap-data > * { -webkit-transform: translateY(30px); -ms-transform: translateY(30px); transform: translateY(30px); opacity: 0; -webkit-transition: .5s 1s; transition: .5s 1s; } .js-anim .wrap-data h4 { -webkit-transition-delay: .7s; transition-delay: .7s; } .js-anim.delay1 { -webkit-transition-delay: .5s; transition-delay: .5s; } .js-anim.delay1 .wrap-data > * { -webkit-transition-delay: 1.2s; transition-delay: 1.2s; } .js-anim.delay1 .wrap-data h4 { -webkit-transition-delay: .9s; transition-delay: .9s; } .js-anim.delay2 { -webkit-transition-delay: .7s; transition-delay: .7s; } .js-anim.delay2 .wrap-data > * { -webkit-transition-delay: 1.4s; transition-delay: 1.4s; } .js-anim.delay2 .wrap-data h4 { -webkit-transition-delay: 1.1s; transition-delay: 1.1s; } .js-anim.anim .wrap-data > * { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); opacity: 1; } } /* Recruit --------------------------------------------------------*/ .page_recruit-top .section_recruit { margin-top: 240px; } @media (max-width: 767px) { .page_recruit-top .section_recruit { margin-top: 180px; } } .page_recruit-top .section_recruit .recruit { position: relative; } @media (max-width: 767px) { .page_recruit-top .section_recruit .recruit { margin-bottom: 100px; } } .page_recruit-top .recruit .recruit_area { display: flex; justify-content: space-between; } @media (max-width: 767px) { .page_recruit-top .recruit .recruit_area { display: block; } } @media (min-width:768px) and ( max-width:1468px){ .page_recruit-top .recruit .recruit_area { width: 1100px; } } .page_recruit-top .recruit .primary_contents-area { margin-top: 50px; } @media (min-width:768px) and ( max-width:1468px){ .page_recruit-top .recruit .primary_contents-area { width: 700px; } } .page_recruit-top .recruit .process .process_contents-area { margin-top: 60px; } @media (max-width: 767px) { .page_recruit-top .recruit .process .process_contents-area { margin-top: 15px; } } .page_recruit-top .recruit .training { margin-top: 100px; } @media (max-width: 767px) { .page_recruit-top .recruit .training { margin-top: 50px; } } .page_recruit-top .recruit .training .training_contents-area { margin-top: 20px; } @media (max-width: 767px) { .page_recruit-top .recruit .training .training_contents-area { margin-top: 15px; } } .page_recruit-top .recruit .training .training_images-area { display: flex; margin-top: 35px; } @media (max-width: 767px) { .page_recruit-top .recruit .training .training_images-area { display: block; margin-top: 25px; } } .page_recruit-top .recruit .training .training_images-area figure:first-of-type img { border-radius: 24px 0 0 24px; } @media (max-width: 767px) { .page_recruit-top .recruit .training .training_images-area figure:first-of-type img { border-radius: 24px 24px 0 0; } } .page_recruit-top .recruit .training .training_images-area figure:last-of-type img { border-radius: 0 24px 24px 0; } @media (max-width: 767px) { .page_recruit-top .recruit .training .training_images-area figure:last-of-type img { border-radius: 0 0 24px 24px; } } .page_recruit-top .recruit .training .training_card { display: flex; margin-top: 70px; padding: 40px 50px; background: #4662A8; border-radius: 24px; } @media (max-width: 767px) { .page_recruit-top .recruit .training .training_card { display: block; margin-top: 50px; padding: 40px 20px; } } .page_recruit-top .recruit .training .training_heading { margin-bottom: 20px; font-size: 2.4rem; font-weight: 700; line-height: 160%; } @media (max-width: 767px) { .page_recruit-top .recruit .training .training_heading { margin-bottom: 15px; } } .page_recruit-top .recruit .training .training_link-box { width: 338px; align-content: center; margin-left: 30px; } @media (max-width: 767px) { .page_recruit-top .recruit .training .training_link-box { width: 100%; margin-top: 35px; margin-left: 0; } } .page_recruit-top .recruit .training .training_link { position: relative; display: block; width: 100%; padding: 20px; text-align: center; font-size: 2.2rem; font-weight: 500; line-height: 100%; background: #FFF; border: 1px solid #FFF; border-radius: 8px; opacity: unset; transition: .5s; } @media (max-width: 767px) { .page_recruit-top .recruit .training .training_link { padding: 15px 20px; font-size: 1.6rem; } } .page_recruit-top .recruit .training .training_link .icon_blank { position: relative; top: 1px; left: 45px; } @media (min-width:768px) and ( max-width:1468px) { .page_recruit-top .recruit .training .training_link .icon_blank { left: 20px; } } .page_recruit-top .recruit .training .training_link .icon_blank svg { width: 1em; height: 1em; transition: .5s; } .page_recruit-top .recruit .training .training_link:hover { border: 1px solid #FFF; color: #FFF; background: #4662A8; } /* FAQ --------------------------------------------------------*/ .page_recruit-top .section_recruit .faq { position: relative; margin: 150px 0; } @media (max-width: 767px) { .page_recruit-top .section_recruit .faq { margin: 0; padding-top: 60px; padding-bottom:85px; } } .page_recruit-top .section_recruit .faq .bg_faq-top { margin-left: -148px; } .page_recruit-top .section_recruit .faq .bg_faq-bottom { margin-left: -148px; } @media (max-width: 767px) { .page_recruit-top .section_recruit .faq .bg_faq-top { top: -100px; margin-left: 0; } } .page_recruit-top .section_recruit .faq .faq_bg-area { margin-left: -148px; padding-left: 148px; background: #E8EDF2; } .page_recruit-top .section_recruit .faq .faq_area { display: flex; justify-content: space-between; padding-bottom: 60px; } @media (max-width: 767px) { .page_recruit-top .section_recruit .faq .faq_area { flex-direction: column; padding-bottom: 0; } } @media (min-width:768px) and ( max-width:1468px) { .page_recruit-top .section_recruit .faq .faq_area { width: 1100px; } } .page_recruit-top .section_recruit .faq .faq_area .primary_contents-area { display: flex; flex-direction: column; gap: 20px; width: 872px; } @media (max-width: 767px) { .page_recruit-top .section_recruit .faq .faq_area .primary_contents-area { width: 100%; margin-top: 55px; } } .faqBox { background: #fff; border-radius: 16px; } .faqBox + .faqBox { margin-top: 30px; } .faqBox_title { position: relative; padding: 20px 30px; border-radius: 16px; font-size: 2rem; font-weight: 700; line-height: 160%; cursor: pointer; transition: background .3s; } @media (max-width: 767px) { .faqBox_title { padding: 20px 50px 20px 30px; } } .faqBox_title::before { content: ''; position: absolute; top: 10px; right: 30px; bottom: 0; width: 15px; height: 15px; margin: auto; border-right: 2px solid #000; border-bottom: 2px solid #000; transform: translateY(-50%) rotate(45deg); transition: transform 0.3s ease, border-color 0.3s ease; } @media (max-width: 767px) { .faqBox_title::before { right: 20px; } } .faqBox.is_active .faqBox_title { color: #fff; background: #4662a8; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .faqBox.is_active .faqBox_title::before { top: 25px; border-right: 2px solid #FFF; border-bottom: 2px solid #FFF; transform: translateY(-50%) rotate(-135deg); } .faqBox_content { display: none; padding: 20px 30px 30px; font-size: 1.6rem; font-weight: 500; line-height: 200%; border-bottom-right-radius: 16px; border-bottom-left-radius: 16px; } @media (max-width: 767px) { .faqBox_content { padding: 20px 30px; } } @media (max-width: 767px) { .faqBox_title, .faqBox_content { font-size: 1.6rem; } } .faq .faqBox_more { position: relative; display: inline-block; margin-top: 48px; text-align: center; font-size: 2.2rem; font-weight: 500; line-height: 100%; } @media (max-width: 767px) { .faq .faqBox_more { font-size: 1.6rem; } } .faq .faqBox_more::after { content: ''; position: relative; display: inline-block; top: -4px; width: 15px; height: 15px; margin-left: 24px; border-right: 2px solid #000; border-bottom: 2px solid #000; transform: rotate(45deg); transition: transform 0.3s ease; } @media (max-width: 767px) { .faq .faqBox_more::after { width: 8px; height: 8px; margin-left: 16px; } } .faq .faqBox_more.is_active::after { top: 4px; transform: rotate(-135deg); } @media (max-width: 767px) { .faq .faqBox_more.is_active::after { top: 1px; } } /* Company --------------------------------------------------------*/ .page_recruit-top .section_recruit .company { position: relative; padding-bottom: 74px; } @media (min-width:768px) and ( max-width:1468px){ .page_recruit-top .section_recruit .company .company_area { width: 1100px; } } .page_recruit-top .section_recruit .company .primary_title-box { justify-content: center; } .page_recruit-top .section_recruit .company .primary_title { text-align: center; } .page_recruit-top .section_recruit .company .primary_contents-area { margin-top: 90px; } @media (max-width: 767px) { .page_recruit-top .section_recruit .company .primary_contents-area { margin-top: 60px; } } .page_recruit-top .section_recruit .company .company_cards { display: flex; } @media (max-width: 767px) { .page_recruit-top .section_recruit .company .company_cards { display: block; } } .page_recruit-top .section_recruit .company .company_cards:nth-of-type(n+2) { margin-top: 74px; } @media (max-width: 767px) { .page_recruit-top .section_recruit .company .company_cards:nth-of-type(n+2) { margin-top: 35px; } } .page_recruit-top .section_recruit .company .company_card { position: relative; width: 630px; height: 230px; border: 1px solid #CCC; border-radius: 16px; } @media (max-width: 767px) { .page_recruit-top .section_recruit .company .company_card { width: 100%; height: 100%; } } .page_recruit-top .section_recruit .company .company_card:nth-of-type(2) { margin-left: 54px; } @media (max-width: 767px) { .page_recruit-top .section_recruit .company .company_card:nth-of-type(2) { margin-top: 35px; margin-left: 0; } } .page_recruit-top .section_recruit .company .company_link { display: flex; padding-right: 0; transition: 0.5s; } @media (max-width: 767px) { .page_recruit-top .section_recruit .company .company_link { display: block; } } .page_recruit-top .section_recruit .company .company_link:hover { opacity: unset; color: #4662A8; } .page_recruit-top .section_recruit .company .company_link::after { display: none; } .page_recruit-top .section_recruit .company .company_image { width: 228px; border-radius: 10px 0 0 10px; overflow: hidden; transition: transform 0.4s ease; } @media (max-width: 767px) { .page_recruit-top .section_recruit .company .company_image { width: 100%; border-radius: 10px 10px 0 0; } } .page_recruit-top .section_recruit .company .company_image img { border-radius: 10px 0 0 10px; transition: transform 0.4s ease; } @media (max-width: 767px) { .page_recruit-top .section_recruit .company .company_image img { border-radius: 10px 10px 0 0; } } .page_recruit-top .section_recruit .company .company_card:hover .company_image img { transform: scale(1.15); } .page_recruit-top .section_recruit .company .company_text-area { padding: 30px 20px 25px 20px; } @media (max-width: 767px) { .page_recruit-top .section_recruit .company .company_text-area { padding: 15px 20px 20px 20px; } } @media (min-width:768px) and ( max-width:1468px){ .page_recruit-top .section_recruit .company .company_text-area { padding: 15px 20px 15px 20px; } } .page_recruit-top .section_recruit .company .company_title { display: flex; align-items: center; margin-bottom: 10px; font-size: 2.4rem; font-weight: 700; line-height: 160%; } @media (max-width: 767px) { .page_recruit-top .section_recruit .company .company_title { margin-bottom: 15px; font-size: 2.0rem; } } @media (min-width:768px) and ( max-width:1468px) { .page_recruit-top .section_recruit .company .company_title { font-size: 2.2rem; } } .page_recruit-top .section_recruit .company .company_title .icon_blank { position: relative; top: -9px; left: 20px; } @media (min-width:768px) and ( max-width:1468px) { .page_recruit-top .section_recruit .company .company_title .icon_blank { top: -7px; } } @media (max-width: 767px) { .page_recruit-top .section_recruit .company .company_title .icon_blank { top: -7px; } } .page_recruit-top .section_recruit .company .company_title .icon_blank svg { width: 20px; height: 20px; transition: .5s; } .page_recruit-top .section_recruit .company .company_text { font-size: 1.4rem; font-weight: 500; letter-spacing: 0.8px; line-height: 180%; } /* Career --------------------------------------------------------*/ @media (max-width: 767px) { .page_recruit-top .section_career { margin-top: 84px; } } .page_recruit-top .section_career::after { width: calc(100% + 148px); left: calc(-148px); } @media (max-width: 767px) { .page_recruit-top .section_career::after { width: 100%; left: auto; } } .page_recruit-top .bg_career { margin-left: -148px; } @media (max-width: 767px) { .page_recruit-top .bg_career { margin-left: 0; } } @media (min-width:768px) and ( max-width:1468px){ .page_recruit-top .section_career .career_area { margin-left: 0; } }