@charset "utf-8"; /*-------------------------------------- copyright : yuyu design. --------------------------------------*/ @import url(reset.css); @import url(common.css); @import url(../libs/fontawesome/css/all.min.css); @import url(../libs/aos/aos.css); /* @import url(../libs/OwlCarousel/assets/owl.carousel.min.css); @import url(../libs/OwlCarousel/assets/owl.theme.default.min.css); */ /* @import url(../libs/lightGallery/css/lightgallery.min.css); */ /* @import url(../libs/Remodal/remodal.css); @import url(../libs/Remodal/remodal-default-theme.css); */ /* recruit ==============================*/ /* cwbg1 ----------*/ .cwbg1 { top: 3rem; left: 0; } .cwbg2 { top: 0; right: 0; } .cwbg3 { position: fixed; z-index: 5; top: 0; left: 0; width: 100%; height: 100vh; } #midCareer .cwbg3, #newGraduate .cwbg3 { display: none; } @media screen and (max-width:1200px) { .cwbg1 { left: -12rem; } .cwbg2 { right: -7rem; } } @media screen and (max-width:896px) { /* m */ .cwbg1 { top: 20rem; } .cwbg2 { top: -20rem; right: -35rem; } } .obi_bg1::before { background-color: #E86262; } #newGraduate .obi_bg1::before { background-color: #F6ADAD; } #mvp { position: relative; } #mvp::after { position: absolute; top: calc(100% + 6rem); left: 0; content: ""; display: block; width: 100%; height: 100vh; background-color: #FFF; } #mvp.s3::after { top: 100%; } /* main ----------*/ #main .sec { padding: 10rem 0; } #main .bg2 { background-color: rgba(232, 98, 98, 0.08); } #newGraduate #main .bg2 { background-color: rgba(232, 98, 98, 0.23); } #main .wbox { margin-bottom: 0; background-color: #FFFFFF; } #main .bg1 .wbox { background-color: #FFF4F4; } #main h2 { margin-bottom: 4rem; text-align: center; font-size: 3.2rem; font-weight: var(--bold); } #main h2 span { position: relative; display: inline-block; width: clamp(40rem, max-content, 100%); padding: 0.9rem 6rem; background-color: #FFF; } #main h2 span::before { position: absolute; top: -0.1rem; left: 0; content: ""; width: 6.3rem; height: 6.4rem; background-image: url(../img/recruit/h_bg_01.svg); background-repeat: no-repeat; background-position: center; background-size: 100% 100%; } #main h2 span::after { position: absolute; top: 0; right: -0.15rem; content: ""; width: 1.7rem; height: 100%; background-image: url(../img/recruit/h_bg_02w.svg); background-repeat: no-repeat; background-position: center; background-size: 100% 100%; } #main .bg1 h2 span::after, #main .bg2 h2.c span::after { background-image: url(../img/recruit/h_bg_02.svg); } #main h2 span i { position: absolute; z-index: 1; top: 0; left: 0; display: block; width: 100%; height: 100%; } #main h2 span i::before { position: absolute; top: 0; right: 0; content: ""; display: block; width: calc(100% - 6.1rem); border-top: solid 2px #000; } #main h2 span i::after { position: absolute; bottom: 0; right: 0; content: ""; display: block; width: calc(100% - 2rem); border-top: solid 2px #000; } #main h3 { margin-bottom: 2rem; color: #E86262; font-size: 2.5rem; font-weight: var(--bold); } #main h3.red { color: #E86262; } #main .catch { margin-bottom: 4rem; text-align: center; } #main p { line-height: 2; font-size: 1.4rem; font-weight: var(--medium); } #main p strong.l { font-size: 1.6rem; } @media screen and (max-width:920px) { #main h2 span { word-break: break-all; } } @media screen and (max-width:480px) { /* s */ #main .sec { padding: 6rem 0; } #main h2 { font-size: 2.8rem; } #main h2 span::before { width: 5rem; height: 5rem; } } /* careerFlow ----------*/ #careerFlow {} #careerFlow .wbox { background-image: url(../../assets/img/recruit/bg_img_01.svg); background-repeat: no-repeat; background-position: right bottom; background-size: 9rem auto; } #careerFlow .career_flow {} #careerFlow .career_flow li { position: relative; display: flex; margin-top: 4rem; border: solid 1px #000; } #careerFlow .career_flow li::after { position: absolute; top: calc(100% + 1.2rem); left: 0; right: 0; content: ""; display: block; width: 4.3rem; height: 1.8rem; margin: auto; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='18' viewBox='0 0 44 18'%3E%3Cpath d='M21.9998 18L43.2175 0H0.782227L21.9998 18Z' fill='%23E86262'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M21.9998 16.6886L3.50677 1H40.4929L21.9998 16.6886ZM21.9998 18L0.782227 0H43.2175L21.9998 18Z' fill='black'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: cover; } #careerFlow .career_flow li:last-child:after { display: none; } #careerFlow .career_flow li span { display: block; } #careerFlow .career_flow li .h { display: grid; width: 25rem; color: #FFF; font-weight: var(--bold); font-size: 2rem; place-items: center; } #careerFlow .career_flow li:nth-child(1) .h { background-color: #FEB5B5; } #careerFlow .career_flow li:nth-child(2) .h { background-color: #F78888; } #careerFlow .career_flow li:nth-child(3) .h { background-color: #E86262; } #careerFlow .career_flow li:nth-child(4) .h { background-color: #E86262; } #careerFlow .career_flow li:nth-child(5) .h { background-color: #E86262; } #careerFlow .career_flow li:nth-child(6) .h { background-color: #DB3333; } #careerFlow .career_flow li .t { width: calc(100% - 25rem); padding: 0.7rem 1.6rem; background-color: #FFF; font-size: 1.4rem; letter-spacing: 0; } @media screen and (max-width:480px) { /* s */ #careerFlow .career_flow { max-width: 80%; margin: auto; } #careerFlow .career_flow li { display: block; } #careerFlow .career_flow li .h { width: 100%; } #careerFlow .career_flow li .t { width: 100%; border-left: none; border-top: solid 1px #000; } } /* welfareBenefits ----------*/ #welfareBenefits {} #welfareBenefits .wbox { margin-top: 6.5rem; padding-top: 6rem; } #welfareBenefits .wbox:first-child { margin-top: 0; } #welfareBenefits .wbox:nth-child(odd) { background-color: #FEB5B5; } #welfareBenefits .wbox.-s { padding: 2rem 3.5rem; } #welfareBenefits .wbox h3 { position: relative; margin-bottom: 0; padding: 0 17% 6rem; text-align: center; font-size: 3.2rem; font-weight: var(--black); } #welfareBenefits .wbox h3 img { position: absolute; bottom: -1rem; } #welfareBenefits .wbox h3.-s { font-size: 1.7rem; text-align: left; padding: 0; } #welfareBenefits .wbox:nth-child(2) h3 img { right: 65%; } #welfareBenefits .wbox:nth-child(3) h3 img { left: 80%; } #welfareBenefits .wbox:nth-child(4) h3 img { right: 85%; } #welfareBenefits .wbox:nth-child(5) h3 img { left: 70%; } #welfareBenefits .wbox:nth-child(6) h3 img { bottom: 2rem; right: 70%; } #welfareBenefits .wbox:nth-child(7) h3 img { left: 85%; } #welfareBenefits .wbox:nth-child(8) h3 img { right: 65%; } #welfareBenefits .wbox:nth-child(9) h3 img { left: 82%; } #welfareBenefits .wbox:nth-child(odd) h3 { color: #FFF; } #welfareBenefits .welfare_list {} #welfareBenefits .welfare_list > li { margin-top: 2rem; padding: 2rem; background-color: #FFF4F4; box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25); } #welfareBenefits .welfare_list > li:first-child { margin-top: 0; } #welfareBenefits .welfare_list > li.ex { background-color: #FBDBDB; border: solid 1px #E86262; } #welfareBenefits .welfare_list > li h4 { color: #E86262; font-weight: var(--black); font-size: 2.4rem; letter-spacing: 0; } #welfareBenefits .welfare_list > li.ex h4 span { display: inline-block; border-bottom: solid 2px #E86262; } #welfareBenefits .welfare_list > li.ex h5 { margin-top: 2rem; padding: 0.5rem; letter-spacing: 0; text-align: center; font-size: 2rem; background-color: #FFF; color: #E86262; border: solid 1px #E86262; } #welfareBenefits .welfare_list > li.ex h6 { margin-top: 2rem; padding: 0.5rem; letter-spacing: 0; text-align: center; font-size: 2rem; background-color: #E86262; color: #FFF; } #welfareBenefits .welfare_list > li p { letter-spacing: 0; vertical-align: baseline; } #welfareBenefits .welfare_list li p strong.red { color: #E86262; vertical-align: baseline;} #welfareBenefits .welfare_list li p strong.red.-m { font-size: 1.6rem; } #welfareBenefits .welfare_list li p strong.red.-l { font-size: 1.8rem; } #welfareBenefits .welfare_list .sub_list { margin-top: 1rem; font-size: 1.4rem; letter-spacing: 0; } #welfareBenefits .welfare_list .sub_list li { display: flex; } #welfareBenefits .welfare_list .sub_list span { color: #E86262; } @media screen and (max-width:1024px) { /* l */ #welfareBenefits .wbox h3 { padding: 0 17% 4rem; } #welfareBenefits .wbox h3 img { bottom: -3%; } #welfareBenefits .wbox:nth-child(2) h3 img { width: 23.34%; } #welfareBenefits .wbox:nth-child(3) h3 img { left: 85%; width: 23.22%; } #welfareBenefits .wbox:nth-child(4) h3 img { width: 15.67%; } #welfareBenefits .wbox:nth-child(5) h3 img { width: 19.99%; } #welfareBenefits .wbox:nth-child(6) h3 img { width: 35.06%; } #welfareBenefits .wbox:nth-child(7) h3 img { width: 15.43%; } #welfareBenefits .wbox:nth-child(8) h3 img { width: 26.68%; } #welfareBenefits .wbox:nth-child(9) h3 img { width: 15.43%; } } @media screen and (max-width:480px) { /* s */ #welfareBenefits .wbox { padding-top: 3rem; } #welfareBenefits .wbox h3 { padding: 0 17% 2rem; } #welfareBenefits .wbox:nth-child(2) h3 img { right: 80%; } #welfareBenefits .wbox:nth-child(3) h3 img { left: 85%; } #welfareBenefits .wbox:nth-child(4) h3 img { right: 85%; } #welfareBenefits .wbox:nth-child(5) h3 img { left: 85%; } #welfareBenefits .wbox:nth-child(6) h3 img { right: 85%; } #welfareBenefits .wbox:nth-child(7) h3 img { left: 85%; } #welfareBenefits .wbox:nth-child(8) h3 img { right: 75%; } #welfareBenefits .wbox:nth-child(9) h3 img { right: 85%; } } /* midCareer ----------*/ #midCareer {} #midCareer .wbox {} #midCareer .wbox h2 { display: inline-block; margin-bottom: 0; padding: 0.8rem 2rem; border: solid 2px #000; border-radius: 0.5rem; background-color: #FEB5B5; text-align: left; font-size: 2.8rem; letter-spacing: 0; } #midCareer .wbox h3 { margin-top: 4rem; font-size: 2.2rem; letter-spacing: 0; } #midCareer .wbox p { letter-spacing: 0; } #midCareer .wbox .btw { margin-top: 3.5rem; } #midCareer .wbox .btw a { display: inline-flex; width: 100%; max-width: 30rem; border-bottom: solid 2px #000; border-right: solid 2px #000; border-radius: 0.5rem; color: #FFF; background-color: #F31356; text-decoration: none; font-size: 2rem; font-weight: var(--bold); gap: 1rem; align-items: center; justify-content: center; } #midCareer .wbox .btw a:hover { opacity: 1; color: #000; background-color: #FCFF6C !important; } #midCareer .wbox .btw a svg.o { width: 1.6rem; height: auto; transition: all 0.3s ease-out; stroke: #FFF; aspect-ratio: 1; fill: transparent; } #midCareer .wbox .btw a:hover svg.o { stroke: #000; } #midCareer .wbox .btw a svg.i { fill: #000; } @media screen and (max-width:480px) { /* s */ #midCareer .wbox .btw { text-align: center; } } /* newGraduate ----------*/ #newGraduate {} #newGraduate .cwbgw { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; } #newGraduate #contentsWrap { overflow: inherit; } #requirementsList { padding-left: 18rem !important; padding-right: 18rem !important; } #requirementsList .requirements_list { row-gap: 6rem; } #requirementsList .requirements_list li { padding: 3rem; border-radius: 0.5rem; background-color: #FFF; box-shadow: 4px 6px 15px 0px rgba(0, 0, 0, 0.25); } #requirementsList .requirements_list li h2 { margin-bottom: 3rem; color: #E86262; text-align: left; font-size: 2.8rem; } #requirementsList .requirements_list li h3 { margin-top: 3rem; margin-bottom: 2rem; font-size: 1.8rem; } #requirementsList .requirements_list li p { font-size: 1.4rem; } @media screen and (max-width:1024px) { /* l */ #requirementsList { padding-left: 12rem !important; padding-right: 12rem !important; } } @media screen and (max-width:480px) { /* s */ #requirementsList { padding-left: 0 !important; padding-right: 6rem !important; } #requirementsList .requirements_list { row-gap: 3rem; } } #offeringEssentialPoint {} #offeringEssentialPoint h3 { margin-bottom: 7rem; text-align: center; } #offeringEssentialPoint h3 span { display: inline-block; padding: 1rem 5rem; border-bottom: solid 2px #000; border-right: solid 2px #000; color: #000; background-color: #FFF4F4; font-size: 2.8rem; box-shadow: 3px 3px 6px 0px rgba(0, 0, 0, 0.25); } #offeringEssentialPoint .essential_list { border-top: solid 1px #E6A2A2; } #offeringEssentialPoint .essential_list li { display: flex; padding: 4rem 0; border-bottom: solid 1px #E6A2A2; gap: 2rem; } #offeringEssentialPoint .essential_list li span { display: block; } #offeringEssentialPoint .essential_list li .h { width: 16rem; color: #E86262; font-size: 1.6rem; letter-spacing: 0; } #offeringEssentialPoint .essential_list li .t { width: calc(100% - 16rem); font-weight: var(--regular); font-size: 1.6rem; letter-spacing: 0; } @media screen and (max-width:480px) { /* s */ #offeringEssentialPoint .essential_list li { display: block; padding: 2rem 0; } #offeringEssentialPoint .essential_list li .h, #offeringEssentialPoint .essential_list li .t { width: 100%; } } #reservation { overflow: hidden; } #reservation .inner { position: relative; z-index: 3; } #reservation .bg { position: absolute; z-index: 1; top: 0; display: block; width: 80rem; height: 100%; } #reservation .bg6 { left: 0; opacity: 0.5; } #reservation .bg7 { right: 0; opacity: 0.5; } #reservation .bg canvas { position: absolute; z-index: 1; top: 0; left: 0; display: block; width: 100% !important; height: 100% !important; } #reservation .btw {} #reservation .btw a { position: relative; display: block; padding: 3rem; border-bottom: solid 3px #000; border-right: solid 3px #000; border-radius: 10rem; color: #FFF; background-color: #F31356; text-align: center; text-decoration: none; font-size: 3.5rem; font-weight: var(--black); letter-spacing: 0; } #reservation .btw a .i { position: absolute; top: 0; bottom: 0; right: 1rem; width: 3.5rem; height: auto; margin: auto; transition: all 0.3s ease-out; fill: #FFF; } #reservation .btw a:hover { opacity: 1; color: #000; background-color: #FCFF6C; box-shadow: 10px 10px 20px 0px rgba(0, 0, 0, 0.25); } #reservation .btw a:hover .i { right: -1rem; fill: #000; } #reservation h3 { margin-top: 11rem; margin-bottom: 5rem; text-align: center; } #reservation h3 mark { position: relative; background: linear-gradient(transparent 60%, #FFF 60%); font-size: 2.8rem; } #reservation h3 mark::after { position: absolute; top: calc(100% + 1rem); left: 0; content: ""; width: 100%; height: 23px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='491' height='23' viewBox='0 0 491 23' fill='none' preserveAspectRatio='none'%3E%3Cpath d='M0 2H228.249L246.827 20L264.521 2H491' stroke='black' stroke-width='3' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: 100% 100%; background-position: center; } #reservation .rc_nav_link { display: flex; gap: 5rem; row-gap: 2rem; justify-content: center; flex-flow: wrap; } #reservation .rc_nav_link li { text-align: center; } #reservation .rc_nav_link li a { display: inline-block; width: 33rem; border-radius: 5rem; color: #FFF; text-align: center; text-decoration: none; font-size: 2.4rem; font-weight: var(--bold); box-shadow: 4px 4px 0px 0px rgba(0, 0, 0, 0.70); } #reservation .rc_nav_link li a:hover { opacity: 1; box-shadow: 8px 10px 0px 0px #000; } @media screen and (max-width:480px) { /* s */ #reservation .btw a { line-height: 1.2; } } /* applicationFormBt ----------*/ #applicationFormBt { position: sticky; z-index: 100; top: 8rem; display: flex; pointer-events: none; } #applicationFormBt + div { margin-top: -25rem; } #applicationFormBt a { position: relative; display: grid; width: 23rem; height: 23rem; margin: 1rem 2rem 1rem auto; border-radius: 100%; color: #FFF; background-color: #F31356; text-decoration: none; text-align: center; font-size: 2.4rem; font-weight: var(--black); place-items: center; letter-spacing: 0; pointer-events: all; filter: drop-shadow(6px 6px 20px rgba(0, 0, 0, 0.25)); } #applicationFormBt a:hover { opacity: 1; color: #000; background-color: #FCFF6C; } @media screen and (max-width:1024px) { /* l */ #applicationFormBt a { width: 18rem; height: 18rem; margin: 1rem 1rem 1rem auto; font-size: 2rem; } } @media screen and (max-width:480px) { /* s */ #applicationFormBt + div { margin-top: -17rem; } #applicationFormBt a { width: 12rem; height: 12rem; margin: 0 0.5rem 1rem auto; font-size: 1.5rem; } } /* applicationForm ----------*/ #applicationForm { background-color: #FFF4F4; } #applicationForm #mvp::after { display: none; } #applicationForm #mvp .tw { margin-bottom: 0; } /* form ----------*/ #form { padding-top: 2rem !important; } #form .inner { max-width: 114rem; } #form .w { padding: 6rem; background-color: #FFF; box-shadow: 4px 6px 15px 0px rgba(0, 0, 0, 0.25); } #form .w p { text-align: inherit; line-height: 2; font-weight: var(--regular); font-size: 1.6rem; } #form .w p strong { font-weight: var(--bold); } #form form {} #form form table { width: 100%; } #form form table th, #form form table td { padding: 3.5rem 0; border-top: solid 1px #E86262; font-size: 1.6rem; font-weight: var(--regular); letter-spacing: 0; } #form form table th { width: 25rem; text-align: left; } #form form table th.required::after { content: "必須"; display: inline-block; margin-left: 1.8rem; padding: 0.3rem 0.5rem; color: #FFF; background-color: #E86262; line-height: 1em; font-size: 1.4rem; } #form form table td {} #form form input[type=text], #form form input[type=email], #form form textarea { width: 100%; padding: 1rem 2rem; border: solid 1px rgba(0, 0, 0, 0.7); } #form form .radio_icons { display: grid; grid-template-columns: 1fr; gap: 1rem; } #form form .radio_icons label {} #form form .radio_icons label:hover { opacity: 0.6; cursor: pointer; } #form form .radio_icons label input { display: none; } #form form .radio_icons label span { display: flex; line-height: 1.2; gap: 1rem; align-items: center; } #form form .radio_icons label span::before { content: ""; display: inline-block; flex: 0 0 2.2rem; width: 2.2rem; height: 2.2rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22' fill='none'%3E%3Ccircle cx='11' cy='11' r='10.5' fill='white' stroke='black'/%3E%3C/svg%3E"); background-size: 2.2rem 2.2rem; } #form form .radio_icons label input:checked + span::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22' fill='none'%3E%3Ccircle cx='11' cy='11' r='10.5' fill='white' stroke='black'/%3E%3Ccircle cx='11' cy='11' r='6' fill='%23E86262'/%3E%3C/svg%3E"); } #form form .radio_bts { display: flex; flex-flow: wrap; gap: 1rem; } #form form .radio_bts label {} #form form .radio_bts label:hover { cursor: pointer; } #form form .radio_bts label input { display: none; } #form form .radio_bts label span { display: block; width: 13.6rem; padding: 1.3rem 0.5rem; border: solid 1px #E86262; text-align: center; line-height: 1.2; transition: all 0.3s ease-out; } #form form .radio_bts label input:checked + span, #form form .radio_bts label:hover span { color: #FFF; background-color: #E86262; } #form form .policy_icon { } #form form .policy_icon label {} #form form .policy_icon input { display: none; } #form form .policy_icon label input + span { display: flex; line-height: 1.2; gap: 1rem; align-items: center; } #form form .policy_icon label input + span::before { content: ""; display: inline-block; flex: 0 0 2.4rem; width: 2.4rem; height: 2.4rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Crect width='24' height='24' fill='white'/%3E%3Crect x='0.5' y='0.5' width='23' height='23' stroke='black' stroke-opacity='0.7'/%3E%3C/svg%3E"); background-size: 2.4rem 2.4rem; } #form form .policy_icon label input:checked + span::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Crect width='24' height='24' fill='white'/%3E%3Crect x='0.5' y='0.5' width='23' height='23' stroke='black' stroke-opacity='0.7'/%3E%3Crect x='5' y='5' width='14' height='14' fill='%23E86262'/%3E%3C/svg%3E"); } #form form .btw { margin-top: 10rem; text-align: center; } #form form .btw input[type=submit] { width: 45rem; padding: 2rem; border: none; color: #FFF; background-color: #E86262; line-height: 1; font-size: 3rem; transition: all 0.3s ease-out; } #form form .btw input[type=submit]:hover { background-color: #D34444; box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25); } @media screen and (max-width:896px) { /* m */ #form form table, #form form table tr, #form form table th, #form form table td { display: block; width: 100%; } #form form table th {} #form form table td { padding-top: 0; border-top: 0; } } @media screen and (max-width:480px) { /* s */ #form .w { padding: 3rem; } #form form .btw { margin-top: 4rem; } #form form .btw input[type=submit] { width: 100%; } } .mw_wp_form_confirm .confirm_hide { display: none; } .mw_wp_form .horizontal-item + .horizontal-item { margin-left: 0 !important; } .error { display: inline-block; padding: 0.5rem 1rem; background-color: #ffffb3; }